[Asp.Net Core] - 使用 ViewComponents 实现分页控件

 

分页控件（定义分页参数）

~/ViewComponents/PaginationViewComponent.cs

using HelloWorld.DataContext;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;

namespace HelloWorld.ViewComponents
{
    public class PaginationViewComponent : ViewComponent
    {
        protected readonly IHostingEnvironment Env;
        protected readonly AppBusinessDbContext BusinessDbContext;
        protected readonly ILogger Logger;

        public PaginationViewComponent(IHostingEnvironment env, AppBusinessDbContext context, ILoggerFactory loggerFactory)
        {
            Env = env;
            BusinessDbContext = context;
            Logger = loggerFactory.CreateLogger<PaginationViewComponent>();
        }

        public IViewComponentResult Invoke()
        {
            return View();
        }
    }
}

~/Views/Shared/Components/Pagination/Default.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="id" type="submit" class="page-link" style="cursor: pointer;" value="1" />
                    </li>
                    if (pageRangeStart > 2)
                    {
                        <li class="page-item disabled">
                            <input name="id" 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="id" 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="id" type="submit" class="page-link" style="cursor: pointer;" value="..." />
                        </li>
                    }
                    <li class="page-item">
                        <input name="id" type="submit" class="page-link" style="cursor: pointer;" value="@totalPageCount" />
                    </li>
                }
            }
        }
    </ul>
</nav>

 

列表页面（更新分页参数）

~/Controllers/ArticleController.cs

        public async Task<IActionResult> List(int id, string keyword)
        {
            ViewBag.KeyWord = keyword;
            ViewBag.CurrentPageIndex = id <= 1 ? 1 : id;
            ViewBag.TotalPageCount = 1;
            if (!ModelState.IsValid) return View();

            List<ResumeDetail> list;
            if (string.IsNullOrEmpty(keyword))
            {
                list = await _businessDbContext.News.Join(_businessDbContext.Mapping, r => r.Gid, m => m.Gid, (r, m) => new { r, m })
                             .Where(t => t.r.Active && t.m.UserGid == UserGid).OrderByDescending(t => t.r.Created).Select(t => t.r).ToListAsync();
            }
            else
            {
                keyword = keyword.ToLower().Trim();
                list = await _businessDbContext.News.Join(_businessDbContext.Mapping, r => r.Gid, m => m.Gid, (r, m) => new { r, m })
                    .Where(t => t.r.Active && t.m.UserGid == UserGid && !string.IsNullOrEmpty(t.r.Title) && t.r.Title.ToLower().Contains(keyword))
                    .OrderByDescending(t => t.r.Created)
                    .Select(t => t.r).ToListAsync();
            }
            var tmpTotalCount = list.Count;
            ViewBag.TotalPageCount = (tmpTotalCount / PageSize) + (tmpTotalCount % PageSize == 0 ? 0 : 1);
            var result = list.Skip(PageSize * (id - 1)).Take(PageSize).Select(ResumeBasicViewModel.ConvertToViewModel).ToList();
            return View(result);
        }

~/Views/Article/List.cshtml

        <nav class="navbar navbar-light bg-faded">
            <form asp-controller="Candidate" asp-action="List" method="GET">
                <div class="row">
                    <div class="col-6">
                        @await Component.InvokeAsync("Pagination")
                    </div>
                    <div class="col-4">
                        <input type="text" name="keyword" class="form-control" maxlength="50" placeholder="关键字" value="@ViewBag.KeyWord"/>
                    </div>
                    <div class="col-1" style="padding-left: 0;">
                        <button class="form-control btn btn-success" type="submit">检 索</button>
                    </div>
                    <div class="col-1" style="padding-left: 0;">
                        <button class="form-control btn btn-secondary" type="submit" onclick="fnClearKeyword()">清 空</button>
                    </div>
                </div>
            </form>
        </nav>

 

分页效果

 

参考资料

https://docs.microsoft.com/en-us/aspnet/core/mvc/views/view-components