[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