MVC+EF Core 完整教程20--tag helper详解

程序员文章站 2022-04-09 21:32:43

之前我们有一篇：“动态生成多级菜单”，对使用Html Helper做了详细讲述，并且自定义了一个菜单的 Html Helper： https://www.cnblogs.com/miro/p/5541086.html Html Helper是关联前后端的一个核心组件，后面的ASP.NET Core ......

之前我们有一篇：“动态生成多级菜单”，对使用html helper做了详细讲述，并且自定义了一个菜单的 html helper：

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

可以看到 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也都可用。

MVC+EF Core 完整教程20--tag helper详解

步骤

1、先定义一个类 models/websiteinfo.cs ，用来放置网站信息。

    public class websiteinfo

    {

        public version version { get; set; }

        public int copyrightyear { get; set; }

        public string poweredby { get; set; }

    }

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

3、在文件夹中新建类 websiteinfotaghelper，继承于taghelper，实现process方法。

    public class websiteinfotaghelper : taghelper

    {

        public websiteinfo info { get; set; }

 

        public override void process(taghelpercontext context, taghelperoutput output)

        {

            output.tagname = "section";

            output.content.sethtmlcontent(

               $@"<ul><li><strong>version:</strong> {info.version}</li>

            <li><strong>copyright year:</strong> {info.copyrightyear}</li>

            <li><strong>powered by:</strong> {info.poweredby}</li></ul>");

            output.tagmode = tagmode.starttagandendtag;

        }

    }

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

使用时传入了 websiteinfo对象， {info.version} 就会替代成相应的值。

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

<h3>以下为版权声明</h3>

@{ websiteinfo websiteinfo = new websiteinfo

    {

        version = new version(3, 0),

        copyrightyear = 2019,

        poweredby = "编程小纸条"

    };

}

<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" />

请参考 *各种风格说明:

pascal case: somesymbol

camel case: somesymbol

snake case: some_symbol

kebab case: some-symbol