之前我们有一篇:“动态生成多级菜单”,对使用Html Helper做了详细讲述,并且自定义了一个菜单的 Html Helper: https://www.cnblogs.com/miro/p/5541086.html

Html Helper是关联前后端的一个核心组件,后面的ASP.NET Core 又推出了Tag Helper,  作用和Html Helper很类似。

一般来说,如果作用类似,后推出的都会做一些改进,我们先来看下两者的比较。

一、Html helper 和 Tag Helper 对比

先来一个比较例子:

下面用 Html Helper 创建一个 lable

@Html.Label("FirstName", "First Name:", new {@class="caption"})

再来看实现同样标签的 tag helper

<label class="caption" asp-for="FirstName"></label>

可以看到 Html Helper的语法是作为一个方法 @Html.XXX(各种参数 , 其他参数 …)

来调用的。

上面 Html Helper例子中的方法有三个参数,前面两个是字符串,最后一个是匿名对象( 用作html的属性,new {@class="caption"} )

而 Tag Helper 和原生的html标签很像,只不过增加了一些特有的属性(asp-开头的attribute)。

如果你用vs进行编辑时会发现,Html Helper 没有智能提示(像字符串,匿名对象这些没办法智能提示),Tag Helper则可以智能提示。

另外,很明显我们可以看出,Tag Helper的写法更加干净,可读性和维护性都比 Html Helper好。

如果熟悉前端,即使不熟悉c#,也能很容易看懂进行前后端协作开发。

我们简单小结一下,主要有这两点:

1、Tag Helper 有智能提示

2、Tag Helper可读性好,易于分工合作

说明:

Tag Helper不能完全取代Html Helper, 不是每个Html Helper都有对应的Tag Helper

下面我们直接动手来开发一个自己的Tag Helper(方便起见,我们接着之前的VCDemo这个项目改)。

二、自定义一个 Tag Helper

场景:

我们模拟稍微复杂一点的场景,不仅仅是简单的改变一下标签属性,我们定义一个可以接收数据的Tag Helper。

我们定义一个类用来放置网站信息,包括版本号,版权声明,以及声明日期。

然后定义一个Tag Helper,接收这个类的数据。

前置准备

我们先配置下Tag Helper的作用域,让我们自定义的Tag Helper可以在 view中被识别到。

默认的配置文件在 Views文件夹下的 _ViewImports.cshtml 中。

打开它,可以看到已经有

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

我们通过 @addTagHelper 使得tag helper在view中被识别。

第一个参数是要使用的位置,第二个参数是程序集。

使用通配符*, 代表指定程序集(Microsoft.AspNetCore.Mvc.TagHelpers)下的所有的tag helpers在当前Views文件夹及子文件夹下均可用。

我们仿照它的样子添加一行:

@addTagHelper *, VCDemo

让我们自己的程序集VCDemo下的tag helpers也都可用。

步骤

1、先定义一个类 Models/WebsiteInfo.cs ,用来放置网站信息。

  1. public class WebsiteInfo
  2.  
  3. {
  4.  
  5. public Version Version { get; set; }
  6.  
  7. public int CopyrightYear { get; set; }
  8.  
  9. public string PoweredBy { get; set; }
  10.  
  11. }

2、新建文件夹 TagHelpers 用来放置自定义的 tag helper

3、在文件夹中新建类 WebsiteInfoTagHelper,继承于TagHelper,实现Process方法。

  1. public class WebsiteInfoTagHelper : TagHelper
  2.  
  3. {
  4.  
  5. public WebsiteInfo Info { get; set; }
  6.  
  7. public override void Process(TagHelperContext context, TagHelperOutput output)
  8.  
  9. {
  10.  
  11. output.TagName = "section";
  12.  
  13. output.Content.SetHtmlContent(
  14.  
  15. $@"<ul><li><strong>Version:</strong> {Info.Version}</li>
  16.  
  17. <li><strong>Copyright Year:</strong> {Info.CopyrightYear}</li>
  18.  
  19. <li><strong>Powered by:</strong> {Info.PoweredBy}</li></ul>");
  20.  
  21. output.TagMode = TagMode.StartTagAndEndTag;
  22.  
  23. }
  24.  
  25. }

美元符号$ 指定了后面可以使用占位符{}插入数据, 如果不使用 $ 后面的{}就是普通的字符串。

使用时传入了 WebsiteInfo对象, {Info.Version} 就会替代成相应的值。

4、我们在home/index上添加如下内容:

  1. <h3>以下为版权声明</h3>
  2.  
  3. @{ WebsiteInfo websiteInfo = new WebsiteInfo
  4.  
  5. {
  6.  
  7. Version = new Version(, ),
  8.  
  9. CopyrightYear = ,
  10.  
  11. PoweredBy = "编程小纸条"
  12.  
  13. };
  14.  
  15. }
  16.  
  17. <website-info info="@websiteInfo" />

 

说明:

最后一行代码:

<website-info info="@websiteInfo" />

1、这个info属性 不是单纯的字符串,是一个类,非字符串的属性可以把“@”省略,即写成这样 <website-info info="websiteInfo" /> 也是可以的。

2、有一个约定,我们之前定义的 tag helper是WebsiteInfoTagHelper:

2.1 我们在前端使用时,首先去掉TagHelper后缀,变成 WebsiteInfo

2.2 然后将WebsiteInfo这种Pascal case的风格,转换成 Kebab case的风格,website-info, 变成:<website-info info="@websiteInfo" />

请参考 stackoverflow各种风格说明:

Pascal Case: SomeSymbol

Camel Case: someSymbol

Snake case:  some_symbol

Kebab case:  some-symbol

https://stackoverflow.com/questions/11273282/whats-the-name-for-hyphen-separated-case/12273101#12273101

运行结果:

三、另外一个小提示

VS编辑器对view中字体做了一些区别

1、单纯的html标签(tag)是灰色字体,属性(attributes)是红色字体,属性值(attribute values)是蓝色字体。如下

2、tag helper相关的属性是加粗紫色, 例如

3、C#代码带有灰色背景色,如下方框处

祝 学习进步 :)

P.S. 系列文章列表:https://www.cnblogs.com/miro/p/3777960.html

MVC+EF Core 完整教程20--tag helper详解的更多相关文章

  1. 开源题材征集 + MVC&EF Core 完整教程小结

    到目前为止,我们的MVC+EF Core 完整教程的理论部分就全部结束了,共20篇,覆盖了核心的主要知识点. 下一阶段是实战部分,我们将会把这些知识点串联起来,用10篇(天)来完成一个开源项目. 现向 ...

  2. 国产化之路-统信UOS + Nginx + Asp.Net MVC + EF Core 3.1 + 达梦DM8实现简单增删改查操作

    专题目录 国产化之路-统信UOS操作系统安装 国产化之路-国产操作系统安装.net core 3.1 sdk 国产化之路-安装WEB服务器 国产化之路-安装达梦DM8数据库 国产化之路-统信UOS + ...

  3. 一个官翻教程集合:ASP.NET Core 和 EF Core 系列教程

    通过一个大学课程案例讲解了复杂实体的创建过程及讲解 1.ASP.NET Core 和 Entity Framework Core 系列教程——入门 (1 / 10) 2.ASP.NET Core 和 ...

  4. .NET Core使用NPOI导出复杂Word详解

    前言: 最近使用NPOI做了个导出Word文档的功能,关于使用.NET Core 导出Word文档的方式有很多.最终我为什么选择了NPOI来实现了这个功能,首先是NPOI是一个开源,免费且容易上手的第 ...

  5. Android Studio系列教程五--Gradle命令详解与导入第三方包

    Android Studio系列教程五--Gradle命令详解与导入第三方包 2015 年 01 月 05 日 DevTools 本文为个人原创,欢迎转载,但请务必在明显位置注明出处!http://s ...

  6. [js高手之路] es6系列教程 - 对象功能扩展详解

    第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...

  7. Nmap扫描教程之基础扫描详解

    Nmap扫描教程之基础扫描详解 Nmap扫描基础扫描 当用户对Nmap工具了解后,即可使用该工具实施扫描.通过上一章的介绍,用户可知Nmap工具可以分别对主机.端口.版本.操作系统等实施扫描.但是,在 ...

  8. 深入浅出 Cocoa 之 Core Data(1)- 框架详解

    深入浅出 Cocoa 之 Core Data(1)- 框架详解 罗朝辉(http://blog.csdn.net/kesalin) CC 许可,转载请注明出处 Core data 是 Cocoa 中处 ...

  9. 七牛云存储Python SDK使用教程 - 上传策略详解

    文 七牛云存储Python SDK使用教程 - 上传策略详解 七牛云存储 python-sdk 七牛云存储教程 jemygraw 2015年01月04日发布 推荐 1 推荐 收藏 2 收藏,2.7k  ...

随机推荐

  1. SQL Server 2016 + AlwaysOn 无域集群

    目录 AlwaysOn 搭建 WSFC 配置计算机的 DNS 后缀 安装故障转移集群 验证集群 创建集群 创建文件共享见证 配置 AlwaysOn 新建可用性组 创建侦听器 可读副本的负载均衡 主角色 ...

  2. 5分钟完成mysql离线安装

    1. 场景描述 mysql离线安装并不复杂,就是经常会出现漏东西,有时候的搞半天,总结下,快速离线安装mysql,直接把下面的命令敲一遍就好,5-10分钟就能安装好. 2. 解决方案 安装的mysql ...

  3. yum只下载不安装软件包

    一.通过yum自带的工具yumdownloader [root@host---- interpreter]# rpm -ql yum-utils package yum-utils is not in ...

  4. 2019暑假集训 Intervals

    题目描述 给定n个闭区间[ai,bi]和n个整数ci.你需要构造一个整数集合Z,使得对于任意i,Z中满足ai<=x<=bi的x不少于ci个.求Z集合中包含的元素个数的最小值.  输入 第一 ...

  5. ASP.NET Core MVC 之模型(Model)

    1.模型绑定 ASP.NET Core MVC 中的模型绑定将数据从HTTP请求映射到操作方法参数.参数既可以是简单类型,也可以是复杂类型.MVC 通过抽象绑定解决了这个问题. 2.使用模型绑定 当 ...

  6. Ubuntu系统安装QQ等软件

    1.安装deepin-wine环境:上https://github.com/wszqkzqk/deepin-wine-for-ubuntu页面下载zip包(或用git方式克隆),解压到本地文件夹,在文 ...

  7. Baozi Leetcode Solution 290: Word Pattern

    Problem Statement Given a pattern and a string str, find if str follows the same pattern. Here follo ...

  8. 个人永久性免费-Excel催化剂功能第18波-在Excel上也能玩上词云图

    这年头数据可视化日新月异,在Excel上做数据分析,最后一步,难免要搞个图表输出高大上一回,微软也深知此道,在Excel2016上更新了一大波图表功能,市场上很耀眼的词云图还是没加进来,虽然在各大的在 ...

  9. [leetcode]python 283. Move Zeroes

    Given an array nums, write a function to move all 0's to the end of it while maintaining the relativ ...

  10. vue.js 中组件的使用

    Vue中组件的使用 方式一 1.使用Vue.extend创建组件 var com1 = Vue.extend({ template: '<h3>这是使用 Vue.extend 创建的组件& ...