快捷導(dǎo)航

NET Core TagHelper實(shí)現(xiàn)分頁(yè)標(biāo)簽

更新時(shí)間：2016年07月26日 09:35:18 作者：神牛步行3

這篇文章主要介紹了NET Core TagHelper實(shí)現(xiàn)分頁(yè)標(biāo)簽，講述實(shí)現(xiàn)一個(gè)簡(jiǎn)單分頁(yè)和總要注意步奏，感興趣的小伙伴們可以參考一下

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

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

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

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

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

5.效果展示

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

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

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

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

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

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

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

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

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

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

咋們?cè)谧远x標(biāo)簽類(lèi)中定義個(gè)屬性（這里因?yàn)橐龇猪?yè)所以這里直接定義個(gè)分頁(yè)參數(shù)的對(duì)應(yīng)屬性類(lèi)當(dāng)做標(biāo)簽類(lèi)的屬性），分頁(yè)參數(shù)類(lèi)如下：

/// <summary>
 /// 分頁(yè)option屬性
 /// </summary>
 public class MoPagerOption
 {
  /// <summary>
  /// 當(dāng)前頁(yè) 必傳
  /// </summary>
  public int CurrentPage { get; set; }
  /// <summary>
  /// 總條數(shù) 必傳
  /// </summary>
  public int Total { get; set; }

  /// <summary>
  /// 分頁(yè)記錄數(shù)（每頁(yè)條數(shù) 默認(rèn)每頁(yè)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中小寫(xiě)，然后首個(gè)單詞后面以'-'和后面的單詞隔開(kāi)，下面是試圖標(biāo)簽中使用定義的屬性：

注意：

*單詞大小寫(xiě)

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

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

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

   //分頁(yè)參數(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)的自定義分頁(yè)標(biāo)簽屬性中：

復(fù)制代碼代碼如下:

1 <pager pager-option="ViewBag.PagerOption as MoPagerOption"></pager>

就是這么簡(jiǎn)單，通過(guò)標(biāo)簽屬性直接傳遞到標(biāo)簽類(lèi)中的屬性上，需要更詳細(xì)跟中的朋友可以F5調(diào)試下看看結(jié)果，以上就是這次分享的注意點(diǎn)，需要注意這幾個(gè)output.TagName = "div"這個(gè)是定義一個(gè)包含了重新元素的父級(jí)元素，output.TagMode是標(biāo)簽在html中表現(xiàn)形式，再來(lái)就是自定義標(biāo)簽類(lèi)的全部代碼：

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 分頁(yè)擴(kuò)展 PageExtend

 /// <summary>
 /// 分頁(yè)option屬性
 /// </summary>
 public class MoPagerOption
 {
  /// <summary>
  /// 當(dāng)前頁(yè) 必傳
  /// </summary>
  public int CurrentPage { get; set; }
  /// <summary>
  /// 總條數(shù) 必傳
  /// </summary>
  public int Total { get; set; }

  /// <summary>
  /// 分頁(yè)記錄數(shù)（每頁(yè)條數(shù) 默認(rèn)每頁(yè)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; }
 }

 /// <summary>
 /// 分頁(yè)標(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; }

   //總頁(yè)數(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)造分頁(yè)樣式
   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\">&laquo;</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\">&raquo;</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.效果展示

分頁(yè)效果：