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