在 asp.net mvc core、entity framework 和 simplePagination.js 中实现分页

• 下载演示 - 516.1 KB

 

引言

本文将解释如何在 asp.net mvc core 应用程序中使用分页，目标是 enity framework，并使用 jquery 模板 simplePagination.js。

在我的一个应用程序中，我必须实现分页。有很多客户端 jquery 模板可用，但问题是如何将所有这些集成到我们的应用程序中？此演示将逐步介绍所有必需的部分和价格来完成分页。

提供了一个泛型类来处理所有计算，包括从 app.config 文件读取页面大小。

背景

此演示不涉及如何创建新的 asp.net core mvc 项目或任何编程语言。我打算解决一个普遍存在的问题。

使用代码

代码将执行以下操作。

• 从源获取记录（硬编码）
• 使用分页助手来计算和获取请求的页面
• 将页面传递给视图
• 要求 simplePagination.js 渲染分页器
• 完成！！！

创建一个新的 .net core mvc 应用程序，项目文件如下所示

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <OutputType>exe</OutputType>
    <TargetFramework>netcoreapp1.1</TargetFramework>
    <ApplicationIcon />
    <OutputTypeEx>exe</OutputTypeEx>
    <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();
        }

        private IConfiguration Configuration { get; set; }

        public void ConfigureServices(IServiceCollection service)
        {
            service.AddMvc();

            service.AddSingleton(Configuration)
                .AddTransient(typeof(IPageHelper<>), typeof(PageHelper<>))
                .AddSingleton<IPageConfig, PageConfig>();
        }

        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 find."));
        }

添加了一个 home controller 来显示员工列表

HomeController 将接受一个构造函数，该构造函数将有助于准备分页器。通常，pageHelper 和 _dbContext 应该位于业务层内部，为了便于阅读，我直接在 controller 内部使用它。

public class HomeController : Controller
    {
        private EmployeeDbContext _dbContext;
        private IPageHelper<EmployeeViewModel> _pageHelper;

        public HomeController(IPageHelper<EmployeeViewModel> 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);
        }
    }

 

定义了三个接口，其中 IResultSet<T> 将是 GetPage() 的返回类型

 

    public interface IPageHelper<T>
    {
        IResultSet<T> GetPage(IQueryable<T> items, int pageNumber);
    }

    public interface IPageConfig
    {
        int PageSize { get; }
    }

    public interface IResultSet<T>
    {
        IEnumerable<T> Items { get; set; }

        Pager Pager { get; }
    }

 

以及存储页面的模型

 

public class Pager
    {
        public int NumberOfPages { get; set; }

        public int CurrentPage { get; set; }

        public int TotalRecords { get; set; }
    }

 

最后是 IPageHelper<T> 的实现

请注意，GetPage 接受 IQueryable<T>，可以将其更改为 IEnumerable<T>

public class PageHelper<T> : IPageHelper<T>
    {
        private readonly IPageConfig _pageConfig;

        public PageHelper(IPageConfig pageConfig)
        {
            _pageConfig = pageConfig;
        }

        public IResultSet<T> GetPage(IQueryable<T> 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<T>
            {
                Pager = pager,
                Items = items.Skip(countFrom).Take(_pageConfig.PageSize)
            };

            return resultSet;
        }

        private readonly Func<int, int, int> _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<T> : IResultSet<T>
        {
            public IEnumerable<T> Items { get; set; }
            public Pager Pager { get; set; }
        }
    }

 

将 bower.json 添加到项目并添加所需的依赖项。

  "dependencies": {
    "jquery": "3.2.1",
    "simplePagination.js": "*"
  }

 

simplePagination.js 和 jquery.min.js 的引用被赋予给 cshtml，并使用 foreach 循环所有记录

分页在 <ul id="emp-pagination" class="pagination"></ul> 中定义

此演示仅包含一个视图，因此所有引用都将在此处添加。

@model PagerDemo.ViewModels.EmployeePageViewModel

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

接下来，我们将告诉 somplepagination.js id="emp-pagination" 是一个分页器。请注意，#hdnTotalNumberOfPages 和 #hdnCurrentPage 是从视图（隐藏字段）获取的

$(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
    });
});

 

当我们运行应用程序时，结果将如下所示。

历史

--