温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

NET Core-TagHelper实现分页标签

发布时间:2020-04-09 19:59:07 来源:网络 阅读:1698 作者:26度出太阳 栏目:网络安全

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,引用后如图:

NET Core-TagHelper实现分页标签

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

NET Core-TagHelper实现分页标签

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

 

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

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

NET Core-TagHelper实现分页标签

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

NET Core-TagHelper实现分页标签

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

 

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

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

NET Core-TagHelper实现分页标签 View Code

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

NET Core-TagHelper实现分页标签

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

NET Core-TagHelper实现分页标签

注意:

*单词大小写

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

 

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

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

NET Core-TagHelper实现分页标签 View Code

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

NET Core-TagHelper实现分页标签 View Code

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

NET Core-TagHelper实现分页标签 View Code

 

5.效果展示

分页效果:

NET Core-TagHelper实现分页标签

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

NET Core-TagHelper实现分页标签


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI