NET Core TagHelper實現(xiàn)分頁標簽
這里將要和大家分享的是學習總結(jié)使用TagHelper實現(xiàn)分頁標簽,之前分享過一篇使用HtmlHelper擴展了一個分頁寫法地址可以點擊這里http://www.dbjr.com.cn/article/89272.htm,今天分享的是net core的另外一種能寫分頁標簽的方法具體是繼承TagHelper,如下將講述實現(xiàn)一個簡單分頁和總要注意步奏。
1.繼承父類TagHelper并重寫Process方法(這里還有一個異步的方法ProcessAsync各位可以自己嘗試下)
2.注意:怎么在試圖頁面使用自定義標簽
3.注意:怎么識別標簽中的屬性
4.注意:自定義標簽類怎么獲取分頁參數(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引用默認版本是1.0.0版本如圖本地已經(jīng)下載了兩個版本:
各位需要注意版本一直,不然還原程序包的時候會出錯
2.注意:怎么在試圖頁面使用自定義標簽
如果要在html中使用定義的標簽,需要注意命名規(guī)則如圖上面定義的類:
標簽類必須以TagHelper結(jié)尾,然后在試圖中使用如圖所示:
這里的pager就是上面PagerTagHelper對應(yīng)的標簽,去掉固定的TagHelper然后剩余Pager,因為html標簽都是小寫所以是pager,咋們先在Process中打個斷點然后F5調(diào)試,可以看到進入了咋們重寫的方法中,這樣pager標簽就和標簽類對應(yīng)上了
3.注意:怎么識別標簽中的屬性
咋們在自定義標簽類中定義個屬性(這里因為要做分頁所以這里直接定義個分頁參數(shù)的對應(yīng)屬性類當做標簽類的屬性),分頁參數(shù)類如下:
/// <summary> /// 分頁option屬性 /// </summary> public class MoPagerOption { /// <summary> /// 當前頁 必傳 /// </summary> public int CurrentPage { get; set; } /// <summary> /// 總條數(shù) 必傳 /// </summary> public int Total { get; set; } /// <summary> /// 分頁記錄數(shù)(每頁條數(shù) 默認每頁15條) /// </summary> public int PageSize { get; set; } /// <summary> /// 路由地址(格式如:/Controller/Action) 默認自動獲取 /// </summary> public string RouteUrl { get; set; } /// <summary> /// 樣式 默認 bootstrap樣式 1 /// </summary> public int StyleNum { get; set; } }
然后定義的屬性PagerOption截圖如:
這里要讓定義的屬性在標簽中能使用需要注意在html中小寫,然后首個單詞后面以'-'和后面的單詞隔開,下面是試圖標簽中使用定義的屬性:
注意:
*單詞大小寫
*首個單詞后'-'分割(屬性名稱是PagerOption對應(yīng)pager-option這個細節(jié)不容忽視)
4.注意:自定義標簽類怎么獲取分頁參數(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)的自定義分頁標簽屬性中:
就是這么簡單,通過標簽屬性直接傳遞到標簽類中的屬性上,需要更詳細跟中的朋友可以F5調(diào)試下看看結(jié)果,以上就是這次分享的注意點,需要注意這幾個output.TagName = "div"這個是定義一個包含了重新元素的父級元素,output.TagMode是標簽在html中表現(xiàn)形式,再來就是自定義標簽類的全部代碼:
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> /// 當前頁 必傳 /// </summary> public int CurrentPage { get; set; } /// <summary> /// 總條數(shù) 必傳 /// </summary> public int Total { get; set; } /// <summary> /// 分頁記錄數(shù)(每頁條數(shù) 默認每頁15條) /// </summary> public int PageSize { get; set; } /// <summary> /// 路由地址(格式如:/Controller/Action) 默認自動獲取 /// </summary> public string RouteUrl { get; set; } /// <summary> /// 樣式 默認 bootstrap樣式 1 /// </summary> public int StyleNum { get; set; } } /// <summary> /// 分頁標簽 /// </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; } //當前路由地址 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 默認樣式 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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
ASP.NET Core中修改配置文件后自動加載新配置的方法詳解
這篇文章主要給大家介紹了關(guān)于ASP.NET Core中修改配置文件后自動加載新配置的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用ASP.NET Core具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧2020-08-08asp.net Page.EnableEventValidation 屬性驗證服務(wù)器控件的回發(fā)和回調(diào)事件出現(xiàn)的錯誤
Page.EnableEventValidation 屬性驗證服務(wù)器控件的回發(fā)和回調(diào)事件出現(xiàn)的錯誤前兩天用jQuery做了一個包含DropDownList聯(lián)動的頁面,數(shù)據(jù)通過Ajax請求得到的。2010-10-10ASP.NET操作Word的IIS權(quán)限設(shè)置
檢索 COM 類工廠中 CLSID 為 {00024500-0000-0000-C000-000000000046} 的組件時失敗,原因是出現(xiàn)以下錯誤: 80070005。2011-02-02詳解ASP.NET Core 網(wǎng)站發(fā)布到Linux服務(wù)器
本篇文章主要介紹了ASP.NET Core 網(wǎng)站發(fā)布到Linux服務(wù)器 。具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-04-04