這里將要和大家分享的是學(xué)習(xí)總結(jié)使用TagHelper實(shí)現(xiàn)分頁標(biāo)簽，之前分享過一篇使用HtmlHelper擴(kuò)展了一個(gè)分頁寫法地址可以點(diǎn)擊這里//www.gxlcms.com/article/89272.htm，今天分享的是net core的另外一種能寫分頁標(biāo)簽的方法具體是繼承TagHelper，如下將講述實(shí)現(xiàn)一個(gè)簡(jiǎn)單分頁和總要注意步奏。

1.繼承父類TagHelper并重寫Process方法(這里還有一個(gè)異步的方法ProcessAsync各位可以自己嘗試下)

2.注意：怎么在試圖頁面使用自定義標(biāo)簽

3.注意：怎么識(shí)別標(biāo)簽中的屬性

4.注意：自定義標(biāo)簽類怎么獲取分頁參數(shù)

5.效果展示

下面一步一個(gè)腳印的來分享：

1.繼承父類TagHelper并重寫Process方法(這里還有一個(gè)異步的方法ProcessAsync各位可以自己嘗試下)

首先咋們定義一個(gè)類取名為PagerTagHelper，這里需要繼承TagHelper類，重寫Process方法，TagHelper位于命名空間Microsoft.AspNetCore.Razor.TagHelpers下面，因?yàn)檫@里要實(shí)現(xiàn)的效果是mvc分頁，所以還需要通過nuget獲取引用Microsoft.AspNetCore.Mvc.TagHelpers，引用后如圖：

這里的版本是1.0.0-rc2-final，之前直接通過nuget引用默認(rèn)版本是1.0.0版本如圖本地已經(jīng)下載了兩個(gè)版本：

各位需要注意版本一直，不然還原程序包的時(shí)候會(huì)出錯(cuò)

2.注意：怎么在試圖頁面使用自定義標(biāo)簽

如果要在html中使用定義的標(biāo)簽，需要注意命名規(guī)則如圖上面定義的類：

標(biāo)簽類必須以TagHelper結(jié)尾，然后在試圖中使用如圖所示：

這里的pager就是上面PagerTagHelper對(duì)應(yīng)的標(biāo)簽，去掉固定的TagHelper然后剩余Pager，因?yàn)閔tml標(biāo)簽都是小寫所以是pager，咋們先在Process中打個(gè)斷點(diǎn)然后F5調(diào)試，可以看到進(jìn)入了咋們重寫的方法中，這樣pager標(biāo)簽就和標(biāo)簽類對(duì)應(yīng)上了

3.注意：怎么識(shí)別標(biāo)簽中的屬性

咋們?cè)谧远x標(biāo)簽類中定義個(gè)屬性（這里因?yàn)橐龇猪撍赃@里直接定義個(gè)分頁參數(shù)的對(duì)應(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)自動(dòng)獲取
 /// </summary>
 public string RouteUrl { get; set; }

 /// <summary>
 /// 樣式 默認(rèn) bootstrap樣式 1
 /// </summary>
 public int StyleNum { get; set; }
 }

然后定義的屬性PagerOption截圖如：

這里要讓定義的屬性在標(biāo)簽中能使用需要注意在html中小寫，然后首個(gè)單詞后面以'-'和后面的單詞隔開，下面是試圖標(biāo)簽中使用定義的屬性：

注意：

*單詞大小寫

*首個(gè)單詞后'-'分割（屬性名稱是PagerOption對(duì)應(yīng)pager-option這個(gè)細(xì)節(jié)不容忽視）

4.注意：自定義標(biāo)簽類怎么獲取分頁參數(shù)

這里用到上面第3點(diǎn)的屬性節(jié)點(diǎn)來傳遞參數(shù)，先看一下咋們?cè)贑ontroller定義的列表數(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());
 }

然后在試圖對(duì)應(yīng)的自定義分頁標(biāo)簽屬性中：

代碼如下:1 <pager pager-option="ViewBag.PagerOption as MoPagerOption"></pager>

就是這么簡(jiǎn)單，通過標(biāo)簽屬性直接傳遞到標(biāo)簽類中的屬性上，需要更詳細(xì)跟中的朋友可以F5調(diào)試下看看結(jié)果，

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com