我在这里要和大家分享的是学习和总结如何使用TagHelper来实现分页标签。我分享了一篇关于如何使用HtmlHelper扩展分页地址的文章。可以点击这里//www . JB 51 . net/article/89272 . htm我今天分享的是net core写分页标签的另一种方法，就是继承TagHelper。下面，我将讨论如何实现一个简单的分页，并始终注意步骤。

1.继承父类TagHelper，重写Process方法(还有一个异步方法ProcessAsync，可以自己试试)

2.注意：如何在尝试页面上使用自定义标签

3.注意：如何识别标签中的属性

4.注意：如何获取自定义标签类的分页参数

5.效果显示

让我们一步步分享：

1.继承父类TagHelper，重写Process方法(还有一个异步方法ProcessAsync，可以自己试试)

首先，我们定义一个名为PagerTagHelper的类。在这里，我们需要继承TagHelper类并重写Process方法。TagHelper位于命名空间Microsoft下。因为这里要达到的效果是mvc分页，所以我们还需要得到一个对微软的引用。aspnetcore . MVC . tag helper通过nuget，如下图所示：

这里的版本是1.0.0-rc2-final。之前默认版本是1.0.0，被nuget直接引用。如图所示，本地下载了两个版本：

需要时刻关注版本，否则在恢复包的时候会出错

2.注意：如何在尝试页面上使用自定义标签

如果您想在html中使用定义的标签，您应该注意上面定义的类中显示的命名规则：

标记类必须以TagHelper结尾，然后在尝试中使用它，如图所示：

这里的pager是上面pagerTagHelper对应的标签，去掉固定的TagHelper再离开Pager，因为html标签都是小写的，所以是Pager。我们首先在Process中断开一个断点，然后调试F5，可以看到我们已经进入了重写的方法，这样Pager标签就对应了标签类。

3.注意：如何识别标签中的属性

为什么不在自定义标签类中定义一个属性(这里因为要做分页，直接定义分页参数对应的属性类作为标签类的属性)，分页参数类如下：

///summary////分页选项属性////summary public class mopageoption {///summary////当前页面必须转移////summary public int当前页面{ get设置；}///summary////总数必须转移////summary public int Total { get；设置；}///summary////分页记录数(默认为15页)////summary public int page size { get；设置；}///summary////默认自动获取路由地址(格式：/Controller/Action)。////summary公共字符串routeurl { get设置；} ///summary ///style默认bootstrap style 1////summary public int style num { get；设置；}}然后定义属性PagerOption截图如下：

这里，为了在标签中使用定义的属性，需要注意html中的大写，然后第一个单词与后面的单词用'-'隔开。这里尝试使用标签中定义的属性：

注意：

*单词大小写

*'-'在第一个单词之后(属性名是PagerOption的细节对应于PagerOption，不能忽略)

4.注意：如何获取自定义标签类的分页参数

这里，上面第3点的属性节点用于传递参数。首先，让我们看看控制器定义的列表数据和分页数据的封装，如下所示：

//GET: Articles public async TaskIActionResult Index(int id=1){ var artiles=_ context。文章；var page option=new MoPagerOption { current page=id，PageSize=2，Total=await artiles。CountAsync()，Routeurl='/Articles/Index ' }；//寻呼机选项=PageOption//data return view(awaitatiles。按降序排列(b=b.createtime)。跳过((page option . current page-1)* page option . page size)。take (pageoption.pagesize)。tolistansync())；}然后，在对应于该尝试的自定义分页标签的属性中：

复制代码代码如下：1寻呼机-选项=' ViewBag .寻呼机选项作为MoPagerOption寻呼机

就是这么简单，通过标签属性直接传递到标签类中的属性上，需要更详细跟中的朋友可以F5调试下看看结果，以上就是这次分享的注意点，需要注意这几个输出。标记名='div '这个是定义一个包含了重新元素的父级元素，输出。标记模式是标签在超文本标记语言中表现形式，再来就是自定义标签类的全部代码：

使用微软。剃刀。标签助手；使用系统；使用系统。集合。通用；使用系统Linq .使用系统。文字；使用系统。线程化。任务；命名空间文本。核心。扩展{ #区域分页扩展PageExtend ///summary ///分页选择权属性////摘要公共类MoPagerOption { ///摘要///当前页必传////summary public int CurrentPage { get；设置；} ///摘要///总条数必传////summary public int Total { get；设置；} ///摘要///分页记录数（每页条数默认每页15条)////summary public int页面大小{ get设置；} ///摘要///路由地址（格式如：/控制器/动作)默认自动获取////摘要公共字符串RouteUrl { get设置；} ///摘要///样式默认引导程序样式1////summary public int style num { get；设置；} } ///摘要///分页标签////摘要公共类page TagHelper : TagHelper { public MoPagerOption page option { get；设置；}公共覆盖作废流程(TagHelperContext上下文，TagHelperOutput输出){输出.标记名=' divif(页面选项.页面大小=0){页面选项.PageSize=15} if(页面选项.当前页面=0){页面选项.当前页面=1；}如果(页面选项.total=0){ return；} //总页数var totalPage=PagerOption .总计/页面选项。页面大小（页面选项。总计% PagerOption .页面大小0?1 : 0);if(TotalPage=0){ return；} //当前路由地址如果(字符串IsNullOrEmpty(页面选项.路由器R1)){//页面选项.RouteUrl=helper .查看上下文。httpcontext。请求。rawURlif(！字符串IsNullOrEmpty(页面选项.路由器rol)){ var最后索引=页面选项.路由器R1。的最后一个索引('/')；寻呼机选项RouteUrl=PagerOption .劳特尔。子字符串(0，最后一个索引)；} }寻呼机选项.RouteUrl=PagerOption .劳特尔。TrimEnd('/')；//构造分页样式var sbPage=new StringBuilder(字符串。空的);开关（寻呼机选项. StyleNum){ case 2: { break；}默认值： { #地区默认样式sbPage .追加(“nav”)；sbPage .追加(' ul类= '分页 ');sbPage .AppendFormat(' lia href= ' { 0 }/{ 1 } ' aria-label= ' Previous ' span aria-hidden= ' true '/span/a/Li '，PagerOption .RouteUrl，PagerOption .CurrentPage - 1=0？1 :寻呼机选项当前页面-1)；for(int I=1；i=totalPagei ) { sbPage .附加格式(' Li { 1 } a href= ' { 2 }/{ 0 } ' { 0 }/a/Li '，I，i==PagerOption .当前页面？class='active'' : ' '，PagerOption .路由器R1)；} sbPage .追加(“李”)；sbPage .AppendFormat(' a href= ' { 0 }/{ 1 } ' aria-label= ' Next '，PagerOption .RouteUrl，PagerOption .当前页面一合计页面？寻呼机选项。当前页面：页面选项当前第1页)；sbPage .追加(' span aria-hidden= ' true '/span ')；sbPage .追加('/a ')；sbPage .追加('/Li ')；sbPage .追加('/ul ')；sbPage .追加('/nav ')；# endregion } break}输出。内容. ToString())；//输出。标记模式=标记模式。自动关闭；//返回基数ProcessAsync(上下文，输出);} } #endregion}5 .效果展示

分页效果：

右键查看浏览器中的超文本标记语言元素：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。