本文中，讓我們嘗試構建自定義 HTML Hepler以在 .NET Core MVC 應用程序中提供分頁。首先對不熟悉的人簡單介紹一下，什么是HTML Helper（助手）：

• HTML 助手使開發人員可以輕松快速地創建 HTML 頁面。
• 在大多數情況下，HTML 助手只是一個返回字符串的方法。
• MVC 帶有內置的 HTML 幫助器，例如 @Html.TextBox()、@Html.CheckBox()、@Html.Label 等。
• HTML 助手在 razor 視圖中呈現 html 控件。例如，@Html.TextBox() 渲染 <input type="textbox"> 控件，@Html.CheckBox() 渲染 <input type="checkbox"> 控件等。

需求

在Web應用程序中，如果要顯示大量記錄，則需要提供分頁。在本文中，我們通過創建自定義 HTML Helper 在 .NET Core MVC 應用程序中實現分頁。為了簡單起見，我們只能使用數字來表示數據。

假設我們需要在多頁中顯示 55 條記錄，每頁有 10 個項目，如上所示。

開始

打開 Visual Studio 2019 > 創建 .NET Core MVC 應用程序，如下所示。

項目命名為 HTMLHelpersApp。

選擇 .NET 框架版本。

創建所需的模型和幫助文件。

1. 創建一個新模型“Number”。
2. 右鍵單擊 Model 文件夾并添加“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 類。

1. 右鍵單擊項目文件夾并添加一個新文件夾。

在 PageInfo.cs 中添加代碼：

1. Page Start 表示當前頁面上的第一項。
2. Page End 表示當前頁面的最后一項。
3. 每頁項目數表示要在頁面上顯示的項目數。
4. Last Page 表示頁數/最后頁碼。
5. 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); }
        }
        
    }
}

現在我們來到最重要的部分：創建自定義 HTML 助手。

1. 創建自定義 HTML 幫助程序 PageLinks，它呈現頁碼、上一個和下一個鏈接。
2. 在“Common”文件夾中添加一個新類“PagingHtmlHelpers.cs”。
3. 在“PagingHtmlHelpers.cs”中添加代碼。
4. 擴展 HtmlHelper 并添加新功能以添加頁面鏈接。

public static IHtmlContent PageLinks(this IHtmlHelper htmlHelper, PageInfo pageInfo, Func<int, string> PageUrl)

5.取2個參數

1. pageInfo：添加頁碼
2. 委托給函數：將整數和字符串作為參數添加控制器操作方法中所需的參數

使用標簽構建器創建錨標簽。

TagBuilder tag = new TagBuilder("a");
Add attributes
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”中添加代碼。

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”。

在“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”。

@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>

解決方案資源管理器如下所示：

在“startup.cs”中配置默認控制器和操作。

編譯并運行應用程序，輸入數字 35。

點擊提交。

你會在底部看到分頁，每頁顯示10個數字，一共4頁，且每頁都一個鏈接。

ordpress主題trans的首頁模板的左側文章列表，在上一節中，我們已經做了修改，實現了從wordpress的數據庫中調用。但是，wordpress網站的文章肯定有很多很多，這時，如果把所有的文章都顯示在同一個頁面，這好像不太好，也不利于用戶的瀏覽。所以，wordpress網站的后臺可以設置每個頁面顯示多少篇文章，默認情況下，是每個頁面顯示10篇，剩下的文章列表，會以分頁的形式顯示。

在trans主題的靜態模板中，我們沒有做分頁效果，所以，在本節中，我們不僅要添加分頁的功能，還要添加分頁的展示效果的CSS樣式。那么，怎樣給trans主題首頁左側的文章列表添加分頁效果呢？

第一步：添加分頁按鈕的父標簽。

為了整個頁面的布局合理，我們給分頁按鈕添加一個父標簽，代碼如下：

< div class="left_page"></div>

第二步：添加分頁代碼。

從wordpress4.1版本開始，wordpress就為我們提供了一個非常好用的分頁函數——the_posts_pagination()，而不再需要wordpress主題開發者們自己創建自定義的分頁函數了，這也就是那么多人都在使用wordpress做網站的原因吧。

好了，不多說，我們直接在上面添加的父標簽里添加如下PHP代碼：

<?php

the_posts_pagination( array(

'mid_size' => 3, //當前頁碼數的 兩邊 顯示3個頁碼。

'prev_text' =>'<', //上一頁

'next_text' =>'>', //下一南

) );

?>

從上面的代碼中，我們可以看出，the_posts_pagination()函數只有一個參數，這個參數是一個array數組。這個數組里可以包含有多個元素，這些元素的值我們都是可以修改的，如：我們可以把

'prev_text' =>'<' 改成 'prev_text' =>'上一頁', 'next_text' =>'>' 改成 'next_text' =>'下一頁'。

這時，我們再看trans主題首頁的左側底部，就可以看到分頁數了，就是不太美觀，如下圖：

第三步：給分頁添加css樣式。

從上圖中，我們可以看出，這個分頁按鈕實在是太難看了。為了讓它變得美觀，我們需要為它添加CSS樣式代碼。代碼如下：

/*分頁*/

.left_page{ float:left; padding:15px; background: #fff; width:100%; box-sizing:border-box; }

.left_page h2{ display:none; }

.left_page .nav-links a{ display:inline-block; padding:2px 5px; border:1px solid #ccc; }

.left_page .nav-links .current{ display:inline-block; padding:2px 5px; border:1px solid #ccc; background:#3571cc; color:#fff; }

.left_page .nav-links a:hover{ background:#3571cc; color:#fff; }

添加上這些CSS樣式代碼后，我們再到trans主題網站的首頁看一下，這時的分頁按鈕就好看多了，如下圖：

?當前頁面的頁碼顯示為藍底白字，鼠標光標移到哪真頁碼上，這個頁碼也會顯示為藍底白字，這樣，在用戶瀏覽時，會更加的友好。

好了，通過上面的操作，我們為wordpress主題trans的首頁左側添加了文章列表的分頁效果。不做的時候，是不是覺得很難？但是，一旦做起來，是不是又覺得特別的簡單？就是這樣的感覺了，使用wordpress的好處，就在這里了，它很多事情都為我們想了，我們只需要把它拿來用就行了 。