asp.net mvc核心、实体框架和simplepagin .js中的分页

下载demo - 516.1 KB

, 介绍这篇文章将解释如何在asp.net mvc核心应用程序中进行分页，目标是enity框架，并使用jquery模板simplepagin .js。我的一个应用程序，我必须实现分页，有很多客户端jquery模板可用，但问题是如何在我们的应用程序合并所有这些?这个演示将介绍进行分页所需的所有比特和价格。提供了一个泛型类来处理所有计算，包括从app.config文件读取页面大小。背景这个演示不是关于如何创建一个新的asp.net核心mvc项目或任何编程语言。我急于解决一个一般性问题。使用的代码代码将执行以下操作。使用分页助手从源获取记录(硬编码)来计算并获得请求的页面，将页面传递给视图，请求simplepagin .js来呈现分页器完成!! 创建一个新的。net核心mvc应用程序，其项目文件如下所示隐藏,复制Code

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

  <PropertyGroup>
    <OutputType>exe</OutputType>
    <TargetFramework>netcoreapp1.1</TargetFramework>
    <ApplicationIcon/>
    <OutputTypeEx>exe</OutputTypeEx>
    <StartupObject/>
  </PropertyGroup>
  <ItemGroup>
    <ContentInclude="wwwroot\scripts\site.js"/>
  </ItemGroup>
  <ItemGroup>
    <PackageReferenceInclude="Microsoft.AspNetCore.Server.IISIntegration"Version="1.1.2"/>
    <PackageReferenceInclude="Microsoft.AspNetCore.Server.Kestrel"Version="1.1.2"/>
    <PackageReferenceInclude="Microsoft.AspNetCore.StaticFiles"Version="1.1.2"/>
    <PackageReferenceInclude="Microsoft.AspNetCore.Mvc"Version="1.1.3"/>
    <PackageReferenceInclude="Microsoft.Extensions.Configuration.FileExtensions"Version="1.1.2"/>
    <PackageReferenceInclude="Microsoft.Extensions.Configuration.Json"Version="1.1.2"/>
    <PackageReferenceInclude="Microsoft.AspNetCore.Diagnostics"Version="1.1.2"/>
  </ItemGroup>
</Project

, cs被设置为运行mvc 隐藏,收缩,复制Code

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

用于显示雇员列表的主控制器 HomeController将接受一个构造函数，它将帮助准备寻呼机。通常pageHelper和_dbContext应该在业务层中，为了可读性，我直接在控制器中使用它。隐藏,收缩,复制Code

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>将是GetPage()的返回类型 , 隐藏,复制Code

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; }
}

, 以及用于存储页面的模型 , 隐藏,复制Code

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

        public int CurrentPage { get; set; }

        public int TotalRecords { get; set; }
    }

, 最后是ipagehelpertgt的实现。请注意，我们接受你的要求。可以更改为ienumerable> 隐藏,收缩,复制Code

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; }
        }
    }

, 添加一个凉亭。并添加所需的依赖项。隐藏,复制Code

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

, 将simplepagin .js和jquery.min.js的引用提供给cshtml，并使用foreach循环所有记录分页定义在ul id="emp-pagination" class=" Pagination "></ul> 这个演示只包含一个视图，所以所有的引用都添加在这里。隐藏,收缩,复制Code

@model PagerDemo.ViewModels.EmployeePageViewModel

<scriptsrc="~/lib/jquery/dist/jquery.min.js"></script>
<linkhref="~/lib/simplePagination.js/simplePagination.css"rel="stylesheet"/>
<scriptsrc="~/lib/simplePagination.js/jquery.simplePagination.js"></script>
<scriptsrc="~/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>
<ulid="emp-pagination"class="pagination"></ul>

<inputasp-for="Pager.NumberOfPages"type="hidden"id="hdnTotalNumberOfPages"value="@Model.Pager.NumberOfPages"/>
<inputasp-for="Pager.CurrentPage"type="hidden"id="hdnCurrentPage"value="@Model.Pager.CurrentPage"/>

接下来，我们将告诉somplepagin .js id=" empty -pagination"是一个分页器。请注意#hdnTotalNumberOfPages和#hdnCurrentPage是从视图中获取的(隐藏字段) 隐藏,复制Code

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

, 当我们运行应用程序时，结果将是这样的。历史 -- , , 本文转载于：http://www.diyabc.com/frontweb/news19947.html

posted @ 2020-08-14 02:47 DiyAbc-Eleven 阅读(146) 评论(0) 收藏举报

刷新页面返回顶部

asp.net mvc核心、实体框架和simplepagin .js中的分页

公告