NET Core TagHelper實現(xiàn)分頁標(biāo)簽
這里將要和大家分享的是學(xué)習(xí)總結(jié)使用TagHelper實現(xiàn)分頁標(biāo)簽，之前分享過一篇使用HtmlHelper擴展了一個分頁寫法地址可以點擊這里http://m.fzitv.net/article/89272.htm，今天分享的是net core的另外一種能寫分頁標(biāo)簽的方法具體是繼承TagHelper，如下將講述實現(xiàn)一個簡單分頁和總要注意步奏。
1.繼承父類TagHelper并重寫Process方法(這里還有一個異步的方法ProcessAsync各位可以自己嘗試下)
2.注意：怎么在試圖頁面使用自定義標(biāo)簽
3.注意：怎么識別標(biāo)簽中的屬性
4.注意：自定義標(biāo)簽類怎么獲取分頁參數(shù)
5.效果展示
下面一步一個腳印的來分享：
1.繼承父類TagHelper并重寫Process方法(這里還有一個異步的方法ProcessAsync各位可以自己嘗試下)
首先咋們定義一個類取名為PagerTagHelper，這里需要繼承TagHelper類，重寫Process方法，TagHelper位于命名空間Microsoft.AspNetCore.Razor.TagHelpers下面，因為這里要實現(xiàn)的效果是mvc分頁，所以還需要通過nuget獲取引用Microsoft.AspNetCore.Mvc.TagHelpers，引用后如圖：
這里的版本是1.0.0-rc2-final，之前直接通過nuget引用默認(rèn)版本是1.0.0版本如圖本地已經(jīng)下載了兩個版本：
各位需要注意版本一直，不然還原程序包的時候會出錯
2.注意：怎么在試圖頁面使用自定義標(biāo)簽
如果要在html中使用定義的標(biāo)簽，需要注意命名規(guī)則如圖上面定義的類：
標(biāo)簽類必須以TagHelper結(jié)尾，然后在試圖中使用如圖所示：
這里的pager就是上面PagerTagHelper對應(yīng)的標(biāo)簽，去掉固定的TagHelper然后剩余Pager，因為html標(biāo)簽都是小寫所以是pager，咋們先在Process中打個斷點然后F5調(diào)試，可以看到進(jìn)入了咋們重寫的方法中，這樣pager標(biāo)簽就和標(biāo)簽類對應(yīng)上了
3.注意：怎么識別標(biāo)簽中的屬性
咋們在自定義標(biāo)簽類中定義個屬性（這里因為要做分頁所以這里直接定義個分頁參數(shù)的對應(yīng)屬性類當(dāng)做標(biāo)簽類的屬性），分頁參數(shù)類如下：
/// <summary>
/// 分頁option屬性
/// </summary>
public class MoPagerOption
{
/// <summary>
/// 當(dāng)前頁 必傳
/// </summary>
public int CurrentPage { get; set; }
/// <summary>
/// 總條數(shù) 必傳
/// </summary>
public int Total { get; set; }
/// <summary>
/// 分頁記錄數(shù)（每頁條數(shù) 默認(rèn)每頁15條）
/// </summary>
public int PageSize { get; set; }
/// <summary>
/// 路由地址(格式如：/Controller/Action) 默認(rèn)自動獲取
/// </summary>
public string RouteUrl { get; set; }
/// <summary>
/// 樣式 默認(rèn) bootstrap樣式 1
/// </summary>
public int StyleNum { get; set; }
}
然后定義的屬性PagerOption截圖如：
這里要讓定義的屬性在標(biāo)簽中能使用需要注意在html中小寫，然后首個單詞后面以'-'和后面的單詞隔開，下面是試圖標(biāo)簽中使用定義的屬性：
注意：
*單詞大小寫
*首個單詞后'-'分割（屬性名稱是PagerOption對應(yīng)pager-option這個細(xì)節(jié)不容忽視）
4.注意：自定義標(biāo)簽類怎么獲取分頁參數(shù)
這里用到上面第3點的屬性節(jié)點來傳遞參數(shù)，先看一下咋們在Controller定義的列表數(shù)據(jù)和分頁數(shù)據(jù)封裝如下：
// GET: Articles
public async Task<IActionResult> Index(int id = 1)
{
var artiles = _context.Article;
var pageOption = new MoPagerOption
{
CurrentPage = id,
PageSize = 2,
Total = await artiles.CountAsync(),
RouteUrl = "/Articles/Index"
};
//分頁參數(shù)
ViewBag.PagerOption = pageOption;
//數(shù)據(jù)
return View(await artiles.OrderByDescending(b => b.CreateTime).Skip((pageOption.CurrentPage - 1) * pageOption.PageSize).Take(pageOption.PageSize).ToListAsync());
}
然后在試圖對應(yīng)的自定義分頁標(biāo)簽屬性中：
就是這么簡單，通過標(biāo)簽屬性直接傳遞到標(biāo)簽類中的屬性上，需要更詳細(xì)跟中的朋友可以F5調(diào)試下看看結(jié)果，以上就是這次分享的注意點，需要注意這幾個output.TagName = "div"這個是定義一個包含了重新元素的父級元素，output.TagMode是標(biāo)簽在html中表現(xiàn)形式，再來就是自定義標(biāo)簽類的全部代碼：
using Microsoft.AspNetCore.Razor.TagHelpers;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace Text.Core.Extend
{
#region 分頁擴展 PageExtend
/// <summary>
/// 分頁option屬性
/// </summary>
public class MoPagerOption
{
/// <summary>
/// 當(dāng)前頁 必傳
/// </summary>
public int CurrentPage { get; set; }
/// <summary>
/// 總條數(shù) 必傳
/// </summary>
public int Total { get; set; }
/// <summary>
/// 分頁記錄數(shù)（每頁條數(shù) 默認(rèn)每頁15條）
/// </summary>
public int PageSize { get; set; }
/// <summary>
/// 路由地址(格式如：/Controller/Action) 默認(rèn)自動獲取
/// </summary>
public string RouteUrl { get; set; }
/// <summary>
/// 樣式 默認(rèn) bootstrap樣式 1
/// </summary>
public int StyleNum { get; set; }
}
/// <summary>
/// 分頁標(biāo)簽
/// </summary>
public class PagerTagHelper : TagHelper
{
public MoPagerOption PagerOption { get; set; }
public override void Process(TagHelperContext context, TagHelperOutput output)
{
output.TagName = "div";
if (PagerOption.PageSize <= 0) { PagerOption.PageSize = 15; }
if (PagerOption.CurrentPage <= 0) { PagerOption.CurrentPage = 1; }
if (PagerOption.Total <= 0) { return; }
//總頁數(shù)
var totalPage = PagerOption.Total / PagerOption.PageSize + (PagerOption.Total % PagerOption.PageSize > 0 ? 1 : 0);
if (totalPage <= 0) { return; }
//當(dāng)前路由地址
if (string.IsNullOrEmpty(PagerOption.RouteUrl))
{
//PagerOption.RouteUrl = helper.ViewContext.HttpContext.Request.RawUrl;
if (!string.IsNullOrEmpty(PagerOption.RouteUrl))
{
var lastIndex = PagerOption.RouteUrl.LastIndexOf("/");
PagerOption.RouteUrl = PagerOption.RouteUrl.Substring(0, lastIndex);
}
}
PagerOption.RouteUrl = PagerOption.RouteUrl.TrimEnd('/');
//構(gòu)造分頁樣式
var sbPage = new StringBuilder(string.Empty);
switch (PagerOption.StyleNum)
{
case 2:
{
break;
}
default:
{
#region 默認(rèn)樣式
sbPage.Append("<nav>");
sbPage.Append(" <ul class=\"pagination\">");
sbPage.AppendFormat(" <li><a href=\"{0}/{1}\" aria-label=\"Previous\"><span aria-hidden=\"true\">«</span></a></li>",
PagerOption.RouteUrl,
PagerOption.CurrentPage - 1 <= 0 ? 1 : PagerOption.CurrentPage - 1);
for (int i = 1; i <= totalPage; i++)
{
sbPage.AppendFormat(" <li {1}><a href=\"{2}/{0}\">{0}</a></li>",
i,
i == PagerOption.CurrentPage ? "class=\"active\"" : "",
PagerOption.RouteUrl);
}
sbPage.Append(" <li>");
sbPage.AppendFormat(" <a href=\"{0}/{1}\" aria-label=\"Next\">",
PagerOption.RouteUrl,
PagerOption.CurrentPage + 1 > totalPage ? PagerOption.CurrentPage : PagerOption.CurrentPage + 1);
sbPage.Append(" <span aria-hidden=\"true\">»</span>");
sbPage.Append(" </a>");
sbPage.Append(" </li>");
sbPage.Append(" </ul>");
sbPage.Append("</nav>");
#endregion
}
break;
}
output.Content.SetHtmlContent(sbPage.ToString());
//output.TagMode = TagMode.SelfClosing;
//return base.ProcessAsync(context, output);
}
}
#endregion
}
5.效果展示
分頁效果：
右鍵查看瀏覽器中的html元素：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
.net真是方便，這幾天幫朋友寫了個小軟件，用它還真感覺輕松自在，很稱手，自帶的類庫既豐富又實用2008-10-10
Entity Framework使用Code First模式管理事務(wù)
本文詳細(xì)講解了Entity Framework使用Code First模式管理事務(wù)的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
ASP.NET?Core?使用SignalR推送服務(wù)器日志的過程記錄
這篇文章主要介紹了ASP.NET?Core?使用SignalR推送服務(wù)器日志的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01
這篇文章主要為大家分享了ASP.NET配置KindEditor文本編輯器圖文教程，很實用的學(xué)習(xí)教程，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要為大家介紹了ADO.NET通用數(shù)據(jù)庫訪問類，利用ADO.NET的體系架構(gòu)打造通用的數(shù)據(jù)庫訪問通用類，感興趣的小伙伴們可以參考一下2016-03-03
什么是對象池？簡單來說它就是一種為對象提供可復(fù)用性能力的軟件設(shè)計思路,對象池就是通過“借”和“還”這樣兩個動作來保證對象可以被重復(fù)使用,這篇文章主要給大家介紹了關(guān)于.NET Core中如何實現(xiàn)或使用對象池的相關(guān)資料,需要的朋友可以參考下2021-07-07
asp.net通過Ajax UpdatePanel回傳后滾動條位置變更解決方法
用一個隱藏控件保存當(dāng)前scorll值?；貍骰貋砗蟾鶕?jù)scroll的值在重新設(shè)置scroll。2010-06-06
解決Win10無法安裝.Net Framework 3.5提示錯誤代碼0x800F081F
這篇文章主要介紹了Win10無法安裝.Net Framework 3.5提示錯誤代碼0x800F081F的完美解決方法,需要的朋友可以參考下2017-12-12
ASP.NET MVC實現(xiàn)圖片上傳、圖片預(yù)覽顯示
這篇文章主要為大家詳細(xì)介紹了ASP.NET MVC實現(xiàn)圖片上傳、圖片預(yù)覽顯示的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要為大家詳細(xì)介紹了mvc上傳到美橙云虛擬機系列問題的解決方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10