ASP.NET 8 Razor列表功能（包括分页）

1、在Models文件夹下新建Commodity.cs

public partial class Commodity
{
    public int Id { get; set; }
    public long? ProductId { get; set; }
    public int? CategoryId { get; set; }

    [Required(ErrorMessage = "Title不能为空")]
    [StringLength(500, ErrorMessage = "最长只能是500长度")]
    public string? Title { get; set; }
    public decimal? Price { get; set; }

    public string? Url { get; set; }
    public string? ImageUrl { get; set; }
}

2、Controller

public class A04ActualCombatController : Controller
{
    private static List<Commodity> commodities = new List<Commodity>(); 

    /// <summary>
    /// 静态构造函数在整个进程中只执行一次
    /// </summary>
    static A04ActualCombatController()
    {
        for (int i = 1; i <= 201; i++)
        {
            commodities.Add(new Commodity()
            {
                Id = i,
                CategoryId = i,
                ImageUrl = "xxx.img",
                Price = new Random().Next(10, 30),
                ProductId = i + new Random().Next(10, 30),
                Title = $"商品-{i}",
                Url = "xxx.com"
            });
        }
    }

    public IActionResult Index(string searchString, int pageIndex, int pageSize = 10)
    {
        List<Commodity> commodityList = commodities;
        if (!string.IsNullOrWhiteSpace(searchString))
        {
            commodityList = commodities.Where(c => c.Title.Contains(searchString)).ToList();
        }

        PagingResult<Commodity> pagingResult = new PagingResult<Commodity>()
        {
            DataList = commodityList.Skip((pageIndex - 1) * pageSize).Take(pageSize).ToList(),
            SearchString = searchString,
            PageIndex = pageIndex,
            PageSize = pageSize,
            RecordCount = commodityList.Count
        };
        return View(pagingResult);
    }
}

3、View

@model PagingResult<Commodity>;

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

@using (Html.BeginForm("Index", Model.SearchString, FormMethod.Get, new { @class = "row g-3" }))
{
    <p></p>
    @await Html.PartialAsync("SearchPartialView", Model)
    @await Html.PartialAsync("CommodityPartialView", Model.DataList)
    @* 分页使用组件便于复用 *@
    @await Component.InvokeAsync("Pagination",
                new { pageIndex = Model.PageIndex, pageSize = Model.PageSize, totalCount = Model.RecordCount })
}

4、新建分页组件

ComponentExt文件夹下新建类PaginationViewComponent.cs

[ViewComponent(Name = "Pagination")]
public class PaginationViewComponent : ViewComponent
{
    public async Task<IViewComponentResult> InvokeAsync(int pageIndex, int pageSize, int totalCount)
    {
        int totalPageCount = totalCount / pageSize;
        if (totalCount % pageSize > 0)
        {
            totalPageCount = totalCount / pageSize + 1;
        }
        ViewBag.TotalPageCount = totalPageCount;
        ViewBag.CurrentPageIndex = pageIndex;
        return await Task.FromResult(View("~/Utility/ComponentExt/Views/PaginationView.cshtml"));
    }
}

ComponentExt/Views文件夹下新建视图PaginationView.cshtml

<nav>
    <ul class="pagination">
        @{
            const int pageIncrement = 2;
            const int pageTrailing = 5;
            var totalPageCount = ViewBag.TotalPageCount == null ? 1 : (int)ViewBag.TotalPageCount;
            if (totalPageCount > 1)
            {
                var pageIndex = ViewBag.CurrentPageIndex == null ? 1 : (int)ViewBag.CurrentPageIndex;
                var pageRangeStart = pageIndex <= pageIncrement ? 1 : pageIndex - pageIncrement;
                var pageRangeEnd = pageIndex + pageIncrement <= totalPageCount ? (totalPageCount > pageTrailing && pageIndex + pageIncrement < pageTrailing ? pageTrailing : pageIndex + pageIncrement) : totalPageCount;
                if (pageRangeStart > 1)
                {
                    <li class="page-item">
                        <input name="pageIndex" type="submit" class="page-link" style="cursor: pointer;" value="1" />
                    </li>
                    if (pageRangeStart > 2)
                    {
                        <li class="page-item disabled">
                            <input name="pageIndex" type="submit" class="page-link" style="cursor: pointer;" value="..." />
                        </li>
                    }
                }
                for (var i = pageRangeStart; i <= pageRangeEnd; i++)
                {
                    <li class="page-item @(pageIndex == i ? "active" : null)">
                        <input name="pageIndex" type="submit" class="page-link" style="cursor: pointer;" value="@i" />
                    </li>
                }
                if (pageRangeEnd < totalPageCount)
                {
                    if (pageRangeEnd + 1 < totalPageCount)
                    {
                        <li class="page-item disabled">
                            <input name="pageIndex" type="submit" class="page-link" style="cursor: pointer;" value="..." />
                        </li>
                    }
                    <li class="page-item">
                        <input name="pageIndex" type="submit" class="page-link" style="cursor: pointer;" value="@totalPageCount" />
                    </li>
                }
            }
        }
    </ul>
</nav>

A04ActualCombat中新建PartialView

SearchPartialView.cshtml

@model PagingResult<Commodity>
<p></p>
<div class="mb-3 row">
    <label class="col-sm-1 col-form-label">关键字</label>
    <div class="col-sm-2">
        @Html.TextBox("searchString", Model.SearchString, new { @class = "form-control", @placeholder = "关键字" })
    </div>
    <div class="col-sm-1">
        <button type="submit" class="btn btn-primary mb-3">查询</button>
    </div>
    <div class="col-sm-2">
        @Html.ActionLink("创建Commodity", "Create")
    </div>
</div>

CommodityPartialView.cshtml

@model List<Commodity>
<div id="partialajaxlist" style="width:100%">
    <table class="table">
        <tr>
            <th>Id</th>
            <th>标题</th>
            <th>@Html.ActionLink("价格", "Index", new { orderBy = ViewBag.OrderBy, searchString = ViewBag.SearchString, page = 1 })</th>
            <th>Url</th>
            <th>图片</th>
            <th>Action</th>
        </tr>
        @foreach (Commodity item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Id)@*//强类型 可以展示display*@
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Title)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Price)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Url)
                </td>
                <td>
                    <img src="@item.ImageUrl" width="40px" />
                </td>
                <td>
                    <a href="/Ninth/Details/@item.Id">详情</a>|
                    @Html.ActionLink("编辑", "Edit", new { id = item.Id }) |
                    @Html.ActionLink("删除", "Delete", new { id = item.Id }) |
                    <a id="@item.Id" href="javascript:void(0);" onclick="ajaxDelete(this)">ajax删除</a>
                </td>
            </tr>
        }
    </table>
</div>