使用自定义HtmlHelpers在.NET Core MVC应用程序中实现分页

目录

介绍

背景

---

介绍

在本文中，让我们尝试构建自定义HtmlHelper以在.NET Core MVC应用程序中提供分页。

本文希望用户对HtmlHelpers有基本的了解。

对于那些不了解HTML助手的人，这里有一个简短的解释。

• HTML助手使开发人员可以轻松快速地创建HTML页面。
• 在大多数情况下，HTML助手只是一个返回string。
• MVC带有内置的HTML帮助器，如@Html.TextBox(), @Html.CheckBox(),@Html.Label等。
• 在razor视图中Htmlhelper呈现HTML控件。例如，@Html.TextBox()渲染<input type="textbox">控制、@Html.CheckBox()渲染<input type="checkbox">控制等。

请阅读有关HTML帮助程序的Microsoft文档。

背景

在Web应用程序中，如果要显示大量记录，则需要提供分页。在本文中，我们通过简单地创建一个自定义HtmlHelper的.NET Core MVC应用程序来实现分页。为了简单起见，我们只使用数字来表示数据。

假设我们需要在多页中显示55条记录，每页有10个项。如上所示，我们可以在6页中显示所有项目。实时数据可以是从数据库、文件等中获取的许多记录。

让我们看看它是如何做到的。

• 打开Visual Studio 2019 >创建.NET Core MVC应用程序，如下所示：

• 将您的项目命名为HTMLHelpersApp。

• 选择.NET框架版本：

• 首先，让我们创建所需的模型和帮助文件。
  • 创建一个新模型'Number'。
    • 右键单击模型文件夹并添加“Number”类：

• 在Number.cs中添加代码。该模型捕获用户输入。它只有一个属性'InputNumber'。

using System;
using System.ComponentModel.DataAnnotations;

namespace HTMLHelpersApp.Models
{
    public class Number
    {
        //validation for required, only numbers, allowed range-1 to 500
        [Required(ErrorMessage = "Value is Required!. 
                                  Please enter value between 1 and 500.")]
        [RegularExpression(@"^\d+$", 
         ErrorMessage = "Only numbers are allowed. 
                         Please enter value between 1 and 500.")]
        [Range(1, 500, ErrorMessage = "Please enter value between 1 and 500.")]
        public int InputNumber = 1;
    }
}

• 现在让我们添加一个公共类PageInfo.cs。创建新文件夹Common并添加PageInfo.cs类。
  • 右键单击项目文件夹并添加一个新文件夹：

• 在PageInfo.cs中添加代码
  • Page Start表示当前页面中的第一项。
  • Page End表示当前页面的最后一项。
  • 每页的项目数表示要在页面中显示的项目数。
  • Last Page表示页数/最后页码。
  • Total Items表示项目的总数。

根据总项目数和每页项目数，计算页面总数、页面中的第一个项目和最后一个项目。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace HTMLHelpersApp.Common
{
    public class PageInfo
    {
        public int TotalItems { get; set; }
        public int ItemsPerPage { get; set; }
        public int CurrentPage { get; set; }

        public PageInfo()
        {
            CurrentPage = 1;
        }
        //starting item number in the page
        public int PageStart
        {
            get { return ((CurrentPage - 1) * ItemsPerPage + 1); }
        }
        //last item number in the page
        public int PageEnd
        {
            get
            {
                int currentTotal = (CurrentPage - 1) * ItemsPerPage + ItemsPerPage;
                return (currentTotal < TotalItems ? currentTotal : TotalItems);
            }
        }
        public int LastPage
        {
            get { return (int)Math.Ceiling((decimal)TotalItems / ItemsPerPage); }
        }        
    }
}

• 现在我们来到了最重要的部分，即创建自定义Htmlhelper。
  • 创建呈现页码、上一个和下一个链接的自定义Htmlhelper PageLink。
  • 在“Common ”文件夹中添加一个新类“PagingHtmlHelpers.cs ”。
• 在“PagingHtmlHelpers.cs”中添加代码：
  • 扩展HtmlHelper类并添加新功能以添加页面链接：
    • public static IHtmlContent PageLinks(this IHtmlHelper htmlHelper, PageInfo pageInfo, Func<int, string> PageUrl)
    • 接受两个参数：
      • pageInfo
        • 添加页码
      • 委托给以整数和字符串为参数的函数
        • 在控制器动作方法中添加所需的参数
  • 使用标签构建器创建锚标签：
    • TagBuilder tag = new TagBuilder("a");
    • 添加属性：
      • tag.MergeAttribute("href", hrefValue);
      • tag.InnerHtml.Append(" "+ innerHtml + " ");
      • 样式也可以用作属性。

using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc.Rendering;
using System;
using System.Text;

namespace HTMLHelpersApp.Common
{
    public static class PagingHtmlHelpers
    {
        public static IHtmlContent PageLinks
        (this IHtmlHelper htmlHelper, PageInfo pageInfo, Func<int, string> PageUrl)
        {
            StringBuilder pagingTags = new StringBuilder();
            //Prev Page
            if (pageInfo.CurrentPage > 1)
            {
                pagingTags.Append(GetTagString
                                 ("Prev", PageUrl(pageInfo.CurrentPage - 1)));
            }
            //Page Numbers
            for (int i = 1; i <= pageInfo.LastPage; i++)
            {
                pagingTags.Append(GetTagString(i.ToString(), PageUrl(i)));
            }
            //Next Page
            if (pageInfo.CurrentPage < pageInfo.LastPage)
            {
                pagingTags.Append(GetTagString
                                 ("Next", PageUrl(pageInfo.CurrentPage + 1)));
            }
            //paging tags
            return new HtmlString(pagingTags.ToString());
        }

        private static string GetTagString(string innerHtml, string hrefValue)
        {
            TagBuilder tag = new TagBuilder("a"); // Construct an <a> tag
            tag.MergeAttribute("class","anchorstyle");
            tag.MergeAttribute("href", hrefValue);
            tag.InnerHtml.Append(" "+ innerHtml + "  ");
            using (var sw = new System.IO.StringWriter())
            {
                tag.WriteTo(sw, System.Text.Encodings.Web.HtmlEncoder.Default);
                return sw.ToString();            
            }
        }
    }
}

• 在“Models”文件夹 中添加一个新类“ShowPaging.cs”。
  • DisplayResult将显示每页中的数字列表
  • PageInfo将捕获所有页面详细信息，如页数、总项目、开始项目和每页中的最后一个项目等。

using HTMLHelpersApp.Common;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;

namespace HTMLHelpersApp.Models
{
    public class ShowPaging
    {        
        //validation for required, only numbers, allowed range-1 to 500
        [Required(ErrorMessage = "Value is Required!. 
                                  Please enter value between 1 and 500.")]
        [RegularExpression(@"^\d+$", ErrorMessage = "Only positive numbers are allowed. 
                                     Please enter value between 1 and 500.")]
        [Range(1, 500, ErrorMessage = "Please enter value between 1 and 500.")]
        public int InputNumber { get; set; }

        public List<string> DisplayResult { get; set; }

        public PageInfo PageInfo;
    }
}

• 现在我们有了所需的模型和助手，让我们创建控制器和视图。
• 添加一个新的控制器——'HTMLHelperController'。
  • 右键单击控制器文件夹并在上下文菜单中 选择控制器。

• 选择“MVCController-Empty”。

• 在'HTMLHelperController'中添加代码：
  • 调用数字操作让用户输入输入的数字
  • 调用ShowPaging action以在多个页面中显示数据：
    • 单击页面链接时调用：

using HTMLHelpersApp.Common;
using HTMLHelpersApp.Models;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;

namespace HTMLHelpersApp.Controllers
{
    public class HTMLHelperController : Controller
    {
        private const int PAGE_SIZE = 10;
        public IActionResult Number()
        {
            return View();
        }

        public IActionResult ShowPaging(ShowPaging model, 
                             int page = 1, int inputNumber = 1)
        {
            if (ModelState.IsValid)
            {
                var displayResult = new List<string>();
                string message;

                //set model.pageinfo
                model.PageInfo = new PageInfo();
                model.PageInfo.CurrentPage = page;
                model.PageInfo.ItemsPerPage = PAGE_SIZE;
                model.PageInfo.TotalItems = inputNumber;

                //Set model.displayresult - numbers list
                for (int count = model.PageInfo.PageStart; 
                         count <= model.PageInfo.PageEnd; count++)
                {
                    message = count.ToString();
                    displayResult.Add(message.Trim());
                }
                model.DisplayResult = displayResult;
            }
            //return view model
            return View(model);
        }
    }
}

• 在Views文件夹中创建一个新文件夹“HTMLHelper”：
  • 按照上面提到的相同步骤添加一个新文件夹。
• 创建一个新视图“Number.cshtml”：

• • 右键单击Views > HTMLHelper文件夹并添加一个新视图。
• 在“Number.cshtml”中添加代码：

@model HTMLHelpersApp.Models.Number

<h4>Number</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="ShowPaging" method="get">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <input asp-for="InputNumber" class="form-control"/>
            </div>
            <div class="form-group">
                <input type="submit" value="Submit" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

• 同样，创建一个新视图“ShowPaging.cshtml”：
  • 执行与上述相同的步骤：
• 在“ShowPaging.cshtml”中添加代码：

@model HTMLHelpersApp.Models.ShowPaging
@using HTMLHelpersApp.Common

<link rel="stylesheet" href ="~/css/anchorstyles.css"/>
<form>
    <h4>Show Paging</h4>
    <hr />
    <div asp-validation-summary="All" class="text-danger"></div>
    <dl class="row">
        <dt class="col-sm-2">
            <b>Number: </b> @Html.DisplayFor(model => model.InputNumber)
        </dt>
        <dd>
            <a asp-action="Number">Change Number</a>
        </dd>
    </dl>

    <div>
        @if (Model != null && Model.DisplayResult != null)
        {
            <ul>
                @foreach (var item in Model.DisplayResult)
                {
                    <li>@Html.Raw(item)</li>
                }
            </ul>
            <div>
                @Html.PageLinks(@Model.PageInfo, x => Url.Action("ShowPaging",
                    new { page = x.ToString(), inputNumber = @Model.InputNumber }))
            </div>
        }
    </div>        
 </form>

注：@Html.PageLinks是定制的HttpHelper。

• 解决方案资源管理器将如下所示：

• 我们添加了所有必需的文件。在我们运行之前，让我们在“startup.cs”中配置默认​​控制器和操作。

• 编译并运行应用程序。
• 输入输入数字为35。

• 点击提交：

• 您会在底部看到分页。每页显示10个数字。因此，将有4页显示35个数字。单击第2页链接可查看第二页。

您可以根据需要将样式应用于页面链接。

https://www.codeproject.com/Articles/5324839/Implement-Pagination-in-NET-Core-MVC-Application-w