作者：mobiledu2502885523 | 来源：互联网 | 2024-10-29 10:04
通过运用ViewComponents技术，在Asp.NetCore中实现了高效的分页组件开发。本文详细介绍了如何通过创建`PaginationViewComponent`类并利用`HelloWorld.DataContext`上下文，实现对分页参数的定义与管理，从而提升Web应用程序的性能和用户体验。
分页控件（定义分页参数）
~/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();
}
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++)
{
="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 ="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 List(int id, string keyword)
{
ViewBag.KeyWord = keyword;
ViewBag.CurrentPageIndex = id <= 1 ? 1 : id;
ViewBag.TotalPageCount = 1;
if (!ModelState.IsValid) return View();
List 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>
分页效果
![[Asp.Net Core] - 使用 ViewComponents 实现分页控件](https://img1.php1.cn/3cd4a/24d65/3b4/2256a7ec4ccfc947.jpeg "[Asp.Net Core] - 使用 ViewComponents 实现分页控件")
参考资料
https://docs.microsoft.com/en-us/aspnet/core/mvc/views/view-components
京公网安备 11010802041100号