NETCore-TagHelper实现分页标签-创新互联

1.继承父类TagHelper并重写Process方法(这里还有一个异步的方法ProcessAsync各位可以自己尝试下)

2.注意：怎么在试图页面使用自定义标签

3.注意：怎么识别标签中的属性

4.注意：自定义标签类怎么获取分页参数

5.效果展示

下面一步一个脚印的来分享：

1.继承父类TagHelper并重写Process方法(这里还有一个异步的方法ProcessAsync各位可以自己尝试下)

首先咋们定义一个类取名为PagerTagHelper，这里需要继承TagHelper类，重写Process方法，TagHelper位于命名空间Microsoft.AspNetCore.Razor.TagHelpers下面，因为这里要实现的效果是mvc分页，所以还需要通过nuget获取引用Microsoft.AspNetCore.Mvc.TagHelpers，引用后如图：

这里的版本是1.0.0-rc2-final，之前直接通过nuget引用默认版本是1.0.0版本如图本地已经下载了两个版本：

各位需要注意版本一直，不然还原程序包的时候会出错

2.注意：怎么在试图页面使用自定义标签

如果要在html中使用定义的标签，需要注意命名规则如图上面定义的类：

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

这里的pager就是上面PagerTagHelper对应的标签，去掉固定的TagHelper然后剩余Pager，因为html标签都是小写所以是pager，咋们先在Process中打个断点然后F5调试，可以看到进入了咋们重写的方法中，这样pager标签就和标签类对应上了

3.注意：怎么识别标签中的属性

咋们在自定义标签类中定义个属性（这里因为要做分页所以这里直接定义个分页参数的对应属性类当做标签类的属性），分页参数类如下：

 View Code

然后定义的属性PagerOption截图如：

这里要让定义的属性在标签中能使用需要注意在html中小写，然后首个单词后面以'-'和后面的单词隔开，下面是试图标签中使用定义的属性：

注意：

*单词大小写

*首个单词后'-'分割（属性名称是PagerOption对应pager-option这个细节不容忽视）

4.注意：自定义标签类怎么获取分页参数

这里用到上面第3点的属性节点来传递参数，先看一下咋们在Controller定义的列表数据和分页数据封装如下：

 View Code

然后在试图对应的自定义分页标签属性中：

 View Code

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

 View Code

5.效果展示

分页效果：

右键查看浏览器中的html元素：

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。