[Asp.Net Core] - 使用 ViewComponents 實現分頁控制項

標籤：https   doc   user   lis   hosting   protect   onclick   logging   else   

 

分頁控制項（定義分頁參數）

~/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

[Asp.Net Core] - 使用 ViewComponents 實現分頁控制項