在开发Web应用程序时，分页是一个常见的需求。随着数据量的增加，将所有数据一次性加载到页面上不仅会降低用户体验，还会对服务器造成不必要的压力。因此，实现分页功能是提高应用性能和用户体验的有效方法。本文将介绍如何在ASP.NET CoreMVC项目中实现分页功能，包括后端的分页逻辑和前端的分页展示。
首先，需要创建一个新的ASP.NET CoreMVC项目。项目文件可能会包含以下内容：
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<OutputType>exe</OutputType>
<TargetFramework>netcoreapp1.1</TargetFramework>
<ApplicationIcon>/</ApplicationIcon>
<OutputTypeEx>exe</OutputTypeEx>
<StartupObject>/</StartupObject>
</PropertyGroup>
<ItemGroup>
<Content Include="wwwroot\scripts\site.js" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Server.IISIntegration" Version="1.1.2" />
<PackageReference Include="Microsoft.AspNetCore.Server.Kestrel" Version="1.1.2" />
<PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="1.1.2" />
<PackageReference Include="Microsoft.AspNetCore.Mvc" Version="1.1.3" />
<PackageReference Include="Microsoft.Extensions.Configuration.FileExtensions" Version="1.1.2" />
<PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="1.1.2" />
<PackageReference Include="Microsoft.AspNetCore.Diagnostics" Version="1.1.2" />
</ItemGroup>
</Project>
在Startup.cs文件中，需要配置服务和路由，以便运行MVC。
public class Startup
{
public Startup(IHostingEnvironment env)
{
var builder = new ConfigurationBuilder()
.SetBasePath(env.ContentRootPath)
.AddJsonFile("appsettings.json");
Configuration = builder.Build();
}
public IConfiguration Configuration { get; set; }
public void ConfigureServices(IServiceCollection service)
{
service.AddMvc();
service.AddSingleton(Configuration)
.AddTransient(typeof(IPageHelper<>), typeof(PageHelper<>))
.AddSingleton();
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseDeveloperExceptionPage();
app.UseStaticFiles();
app.UseMvc(config => config.MapRoute(
"default",
"{controller=Home}/{action=Index}/{id?}"));
app.Run(handler => handler.Response.WriteAsync("Page not found."));
}
}
接下来，需要添加一个HomeController来展示员工列表。
public class HomeController : Controller
{
private EmployeeDbContext _dbContext;
private IPageHelper _pageHelper;
public HomeController(IPageHelper pageHelper)
{
_dbContext = new EmployeeDbContext();
_pageHelper = pageHelper;
}
[HttpGet]
public IActionResult Index(int pageNumber = 1)
{
var allEmployees = _dbContext.GetEmployees();
var result = _pageHelper.GetPage(allEmployees, pageNumber);
var employees = new EmployeePageViewModel
{
Employees = result.Items,
Pager = result.Pager
};
return View(employees);
}
}
为了实现分页功能，定义了三个接口：IPageHelper
public interface IPageHelper
{
IResultSet GetPage(IQueryable items, int pageNumber);
}
public interface IPageConfig
{
int PageSize { get; }
}
public interface IResultSet
{
IEnumerable Items { get; set; }
Pager Pager { get; set; }
}
然后，创建一个Pager类来存储分页信息。
public class Pager
{
public int NumberOfPages { get; set; }
public int CurrentPage { get; set; }
public int TotalRecords { get; set; }
}
最后，实现IPageHelper
public class PageHelper : IPageHelper
{
private readonly IPageConfig _pageConfig;
public PageHelper(IPageConfig pageConfig)
{
_pageConfig = pageConfig;
}
public IResultSet GetPage(IQueryable items, int pageNumber)
{
var numberOfRecords = items.Count();
var numberOfPages = GetPaggingCount(numberOfRecords, _pageConfig.PageSize);
if (pageNumber == 0) { pageNumber = 1; }
var pager = new Pager
{
NumberOfPages = numberOfPages,
CurrentPage = pageNumber,
TotalRecords = numberOfRecords
};
var countFrom = _countFrom(_pageConfig.PageSize, pageNumber);
var resultSet = new ResultSet
{
Pager = pager,
Items = items.Skip(countFrom).Take(_pageConfig.PageSize)
};
return resultSet;
}
private readonly Func _countFrom = (pageSize, pageNumber) => pageNumber == 1 ? 0 : (pageSize * pageNumber) - pageSize;
private static int GetPaggingCount(int count, int pageSize)
{
var extraCount = count % pageSize > 0 ? 1 : 0;
return (count < pageSize) ? 1 : (count / pageSize) + extraCount;
}
}
public class ResultSet : IResultSet
{
public IEnumerable Items { get; set; }
public Pager Pager { get; set; }
}
为了使用simplePagination.js，需要在项目中添加bower.json文件，并添加所需的依赖项。
"dependencies": {
"jquery": "3.2.1",
"simplePagination.js": "*"
}
在cshtml文件中，需要引用simplePagination.js和jquery.min.js，并使用foreach循环显示所有记录。
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<link href="~/lib/simplePagination.js/simplePagination.css" rel="stylesheet" />
<script src="~/lib/simplePagination.js/jquery.simplePagination.js"></script>
<script src="~/scripts/site.js"></script>
<table>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
@foreach (var emp in Model.Employees)
{
<tr>
<td>@emp.Id</td>
<td>@emp.FirstName</td>
<td>@emp.LastName</td>
</tr>
}
</table>
<ul id="emp-pagination" class="pagination"></ul>
<input asp-for="Pager.NumberOfPages" type="hidden" id="hdnTotalNumberOfPages" value="@Model.Pager.NumberOfPages" />
<input asp-for="Pager.CurrentPage" type="hidden" id="hdnCurrentPage" value="@Model.Pager.CurrentPage" />
$(function() {
$('#emp-pagination').pagination({
pages: $('#hdnTotalNumberOfPages').val(),
currentPage: $('#hdnCurrentPage').val(),
itemsOnPage: 10,
cssStyle: 'light-theme',
onPageClick: function(pageNo) {
var url = "/Home/Index?pageNumber=" + pageNo;
window.location.href = url;
},
hrefTextSuffix: '',
selectOnClick: true
});
});