学习ASP.NET Core Razor 编程系列十九—

学习ASP.NET Core Razor 编程系列目录

通过前面的教程学习，你可以实现一个简单的书籍管理系统。在本教程将向书籍索引页中添加分页功能。

一、向书籍列表页添加分页功能

为了向书籍列表页添加分页功能，你需要安装X.PagedList.Core.Mvc

首先，我们需要安装分页组件包，在Visual Studio 2017中点击【项目】-【管理NuGet程序包】，打开NuGet包管理器窗体。

其次，在NuGet包管理器窗体中，选择“浏览”标签，然后搜索X.PagedList，如下图所示。点击“安装”按钮安装X.PagedList.Core.Mvc的最新版本（本文中安装的版本为7.5.0）。

第三， Nuget会下载X.PagedList.Mvc.Core包，并会弹出一个“更改”对话框，点击“确定”按钮。

第四，在把PagedList.Mvc安装完成之后，PagedList包也被安装上了。如下图。

把PagedList.Mvc安装完成之后，第一件事就是对OnGetAsync方法做更多的修改并将分页按钮添加到Index视图中。如下图所示添加了分页按钮的书籍列表页。

二、向书籍列表后台代码添加分页功能

在Pages/Books/Index.cshtml.cs中，用以下代码替换。

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNetCore.Mvc;

using Microsoft.AspNetCore.Mvc.RazorPages;

using Microsoft.EntityFrameworkCore;

using RazorMvcBooks.Models;

using Microsoft.AspNetCore.Mvc.Rendering;

using X.PagedList; 

namespace RazorMvcBooks.Pages.Books

{

    public class IndexModel : PageModel

    {

        private readonly RazorMvcBooks.Models.BookContext _context; 

        public IndexModel(RazorMvcBooks.Models.BookContext context)

        {

            _context = context;

        }

        public List<Book> Books;

        public SelectList Publishs;

        public string Publish { get; set; }

        public string NameSort { get; set; }

        public string DateSort { get; set; }

        public string CurrentFilter { get; set; }

        public string CurrentSort { get; set; } 

        public X.PagedList.IPagedList<Book> Book { get;set; } 

        public async Task OnGetAsync(string publish, string searchString,string sortOrder,int? pageIndex)

        {

            ViewData["CurrentSort"] = sortOrder;

            Publish = publish;

            int pageSize = ;

            ViewData["SearchString"] = searchString;

            var page = pageIndex ?? ; 

            //查询

            IQueryable<string> PublishingQuery = from m in _context.Book

                                             orderby m.Publishing

                                             select m.Publishing;

            var books = from m in _context.Book

                         select m;

            if (!String.IsNullOrEmpty(searchString))

            {

                books = books.Where(s => s.Name.Contains(searchString));

            } 

            if (!String.IsNullOrEmpty(publish))

            {

                books = books.Where(x => x.Publishing == publish);

            }

            Publishs = new SelectList(await PublishingQuery.Distinct().ToListAsync()); 

            //排序

            NameSort = String.IsNullOrEmpty(sortOrder) ? "name_desc" : "";

            DateSort = sortOrder == "Date" ? "date_desc" : "Date"; 

            ViewData["NameSortParm"] = NameSort;

            ViewData["DateSortParm"] = DateSort; 

            switch (sortOrder)

            {

                case "name_desc":

                    books = books.OrderByDescending(s => s.Name);

                    break;

                case "Date":

                    books = books.OrderBy(s => s.ReleaseDate);

                    break;

                case "date_desc":

                    books = books.OrderByDescending(s => s.ReleaseDate);

                    break;

                default:

                    books = books.OrderBy(s => s.Name);

                    break;

            }

            Book = await books.AsNoTracking().ToPagedListAsync(page, pageSize);

            //将分页结果放入ViewData供View使用

            ViewData["books"] = Book; 

        }

    }

}

代码中将总页数参数、当前的排序顺序参数和当前的筛选器参数添加到方法签名中。

public async Task OnGetAsync(string publish, string searchString,string sortOrder,int? pageIndex)

第一次显示页面，或如果用户未单击分页或排序链接，则所有参数都为null。如果单击分页链接，页面变量将包含要显示的页码。

名为 CurrentSort 的ViewData元素提供了当前已排序的试图，因为这必须包含在分页链接中以保持排序顺序在分页时相同。

名为 searchString的ViewData元素提供了当前已筛选的视图。为了在分页过程中维护筛选规则以及在页面重新显示的时候把筛选值恢复到文本框中，该值一定要被包含进分页链接里

如果分页期间更改搜索字符串，显示的页会被重置为 1，因为新的筛选器可能会导致显示不同的数据。在文本框中输入了值以及按下提交按钮搜索字符串就会改变。在这种情况下，searchString参数不为 null。

在OnGetAsync方法的结尾，ToPagedListAsync方法将书籍查询结果转换为支持分页的集合类型，集合中包含了刚好能放进单页的书籍实体。然后将这个单页大小的书籍集合传递给视图。

Book = await books.AsNoTracking().ToPagedListAsync(page, pageSize);

代码中的ToPagedListAsync方法获得页面数和当前页码，并对IQueryable执行语句。当IQueryable调用ToPagedListAsync时，该方法将返回只包含在请求页里的书籍列表。属性HasPreviousPage和HasNextPage可用来启用或禁用Previous和Next分页按钮。

Book属性我们变更为

public X.PagedList.IPagedList<Book> Book { get;set; }

三、向书籍列表视图添加分页链接

在Pages/Books/Index.cshtml中，用以下代码替换现有代码。高亮代码为更改的代码。

@page

@model RazorMvcBooks.Pages.Books.IndexModel

@using X.PagedList.Mvc.Core;

@using X.PagedList.Mvc.Common;

@using X.PagedList;

<!--// 7.6及以上版本需要引入Common命名空间，以支持PagedListRenderOptions .7.5以下的版本则不需要。--> 

@{

    ViewData["Title"] = "Index";

} 

<h2>Index</h2>

<p>

    <a asp-page="Create">Create New</a>

</p>

<form>

    <p>

        <select asp-for="Publish" asp-items="Model.Publishs">

            <option value="">All</option>

        </select>

        书籍名称

        <input type="text" name="SearchString">

        <input type="submit" value="查询" />

    </p>

</form> 

<table class="table">

    <thead>

        <tr>

            <th>

                <a asp-page="./Index" asp-route-sortOrder="@Model.NameSort">

                    @Html.DisplayNameFor(model => model.Book[0].Name)

                </a> 

            </th>

            <th>

                <a asp-page="./Index" asp-route-sortOrder="@Model.DateSort">

                    @Html.DisplayNameFor(model => model.Book[0].ReleaseDate)

                </a>

            </th>

            <th>

                @Html.DisplayNameFor(model => model.Book[0].Author)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.Book[0].Price)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.Book[0].Publishing)

            </th>

            <th></th>

        </tr>

    </thead>

    <tbody>

        @foreach (var item in Model.Book)

        {

            <tr>

                <td>

                    @Html.DisplayFor(modelItem => item.Name)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.ReleaseDate)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.Author)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.Price)

                </td>

                <td>

                    @Html.DisplayFor(modelItem => item.Publishing)

                </td>

                <td>

                    <a asp-page="./Edit" asp-route-id="@item.ID">Edit</a> |

                    <a asp-page="./Details" asp-route-id="@item.ID">Details</a> |

                    <a asp-page="./Delete" asp-route-id="@item.ID">Delete</a>

                </td>

            </tr>

        }

    </tbody>

    <tfoot>

        <tr>

            <td class="text-muted" colspan="4">

                每页 @Model.Book.PageSize 条记录，本页有 @Model.Book.Count 条记录,共有 @Model.Book.TotalItemCount 条记录。
               第 @(Model.Book.PageCount < Model.Book.PageNumber ? 0 : Model.Book.PageNumber) 页，共 @Model.Book.PageCount 页。

                @*这个条件表达式的目的是防止出现 记录为0的情况，会出现 总页数为0，而当前是第1页的情况。*@

            </td>

        </tr>

    </tfoot>

</table> 

@{

    var prevDisabled = !Model.Book.HasPreviousPage ? "disabled" : "";

    var nextDisabled = !Model.Book.HasNextPage ? "disabled" : "";

} 

<a asp-action="./Index"

 asp-route-publish="@Model.Publish"

   asp-route-sortOrder="@ViewData["CurrentSort"]"

   asp-route-pageIndex="@(Model.Book.PageNumber - 1)"

   asp-route-searchString="@ViewData["SearchString"]"

   class="btn btn-default @prevDisabled">

    上一页

</a>

<a asp-action="./Index"

 asp-route-publish="@Model.Publish"

   asp-route-sortOrder="@ViewData["CurrentSort"]"

   asp-route-pageIndex="@(Model.Book.PageNumber + 1)"

   asp-route-searchString="@ViewData["SearchString"]"

   class="btn btn-default @nextDisabled">

    下一页

</a>

其中通过标记帮助程序显示分页按钮：

<a asp-action="./Index"

 asp-route-publish="@Model.Publish"

   asp-route-sortOrder="@ViewData["CurrentSort"]"

   asp-route-pageIndex="@(Model.Book.PageNumber - 1)"

   asp-route-searchString="@ViewData["SearchString"]"

   class="btn btn-default @prevDisabled">

    上一页

</a>

我们在Visual Studio 2017中按F5运行应用，并在浏览器中浏览书籍列表页。如下图。

在浏览器中单击以确保分页工作原理的不同的排序顺序中的分页链接。然后输入搜索字符串，然后重试以验证分页还适用正确使用排序和筛选的分页。

四、向书籍列表视图添加分页链接

虽然上面我们实现了分页功能，但是一般分页，需要有页面显示，如下图。

如何实现上图中的分页样式呢？在Pages/Books/Index.cshtml中把书籍列表视图中“</table>”后面的代码，用以下代码替换，就可以实现。

@Html.PagedListPager(Model.Book, pageIndex => Url.Action("Index", new { pageIndex, sortOrder = ViewData["CurrentSort"], 
searchString = ViewData["SearchString"], pageSize = ViewData["PageSize"] }),
 new PagedListRenderOptions { LinkToFirstPageFormat = "首页", LinkToNextPageFormat = "下一页", LinkToPreviousPageFormat = "上一页",
 LinkToLastPageFormat = "末页", MaximumPageNumbersToDisplay = 5, DisplayItemSliceAndTotal = false })

我们在Visual Studio 2017中按F5运行应用，并在浏览器中浏览书籍列表页。使用鼠标单击页码“4”，我们可以验证分页功能的正确使用。如下图。

学习ASP.NET Core Razor 编程系列十九——分页的更多相关文章

学习ASP.NET Core Razor 编程系列十八——并发解决方案
学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.NET Core Razor 编程系列二——添加一个实体学习ASP.NET ...
学习ASP.NET Core Razor 编程系列十六——排序
学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.NET Core Razor 编程系列二——添加一个实体学习ASP.NET ...
学习ASP.NET Core Razor 编程系列十五——文件上传功能（三）
学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.NET Core Razor 编程系列二——添加一个实体学习ASP.NET ...
学习ASP.NET Core Razor 编程系列十四——文件上传功能（二）
学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.NET Core Razor 编程系列二——添加一个实体学习ASP.NET ...
学习ASP.NET Core Razor 编程系列十二——在页面中增加校验
学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.NET Core Razor 编程系列二——添加一个实体学习ASP.NET ...
学习ASP.NET Core Razor 编程系列十——添加新字段
学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.NET Core Razor 编程系列二——添加一个实体学习ASP.NET ...
学习ASP.NET Core Razor 编程系列十七——分组
学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.NET Core Razor 编程系列二——添加一个实体学习ASP.NET ...
学习ASP.NET Core Razor 编程系列十三——文件上传功能（一）
学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.NET Core Razor 编程系列二——添加一个实体学习ASP.NET ...
学习ASP.NET Core Razor 编程系列十一——把新字段更新到数据库
学习ASP.NET Core Razor 编程系列目录学习ASP.NET Core Razor 编程系列一学习ASP.NET Core Razor 编程系列二——添加一个实体学习ASP.NET ...

随机推荐

django(权限、认证)系统—— 基于Authentication backends定制
在这篇文章中,我们进行最后关于DjangoPermission系统的探讨,来谈谈关于Permission系统后台接口和扩展后台接口的开发. Django实现的这套permission体系,在底层被抽象 ...
baseFileWriter.go
package blog4go import ( "fmt" "os" "sync" "time" ) const ( ...
Goroutine陷阱
Go在语言层面通过Goroutine与channel来支持并发编程,使并发编程看似变得异常简单,但通过最近一段时间的编码,越来越觉得简单的东西,很容易会被滥用.Java的标准库也让多线程编程变得简单, ...
CLOSE_WAIT问题-TCP
环境简述要说清楚问题,先要简单说下生产环境的网络拓扑(毕竟是个网络问题对吧) 看,挺简单的对吧,一个OpenResty做SLB承受客户端请求,反响代理到几台应用服务器.由于业务要求,必须要同步调用第 ...
Postman----模拟服务器返回数据
使用场景:在某些情况下,比如A接口还没开发好,我们需要测试B接口,刚好B接口的请求数据中需要包含A接口返回的数据,这时我们就可以模拟A接口服务器返回的数据来测试B接口解决办法: 举例:模拟此 htt ...
Spring 系列之Spring常用注解总结
传统的Spring做法是使用.xml文件来对bean进行注入或者是配置aop.实物,这么做有两个缺点: 1.如果所有的内容都配置在.xml文件中,那么.xml文件将会十分庞大:如果按需求分开.xml文 ...
ASP.NET Core的实时库: SignalR简介及使用
大纲本系列会分为2-3篇文章. 第一篇介绍了SignalR的预备知识和原理本文介绍SignalR以及ASP.NET Core里使用SignalR. 本文的内容: 介绍SignalR 在ASP.NE ...
unison+inotify的Web目录同步方案
1.在Linux下做WEB目录文件同步一般有如下几种方式: ----------------------------------------------- 1) nfs实现web数据共享 ...
python3的socket使用
如果需要设置两台机器的端口,请查看博文 centos7开放端口和防火墙设置需要实现两台机器的信息交互,使用 socket 进行调度.其中服务端为: #!/usr/bin/env python # - ...
如何使用AWS和Azure的配置存储服务保存读取配置
原文:Want to yank configuration values from your .NET Core apps? 作者:pauljwheeler 译文:https://www.cnblog ...

学习ASP.NET Core Razor 编程系列十九——分页

学习ASP.NET Core Razor 编程系列十九——分页的更多相关文章

随机推荐

热门专题