.net core TagHelper的基本使用和好处

一、前言

在.net framework中，如果要使用HtmlHelper生成一个超链接，并且超链地址是 /Home/Index 页面，并通过get方式给该页面传入Id=1 的值，就可以使用如下代码：

@Html.ActionLink("链接", "Index", "Home", new { Id = 1 })

而在 .net core 中，提供了TagHelper ,让标签看起来更简洁，增加可读性。

<a asp-controller="Home" asp-action="Index" asp-route-Id="1">.net core链接</a>

其实不管是 HtmlHelper 还是 TagHelper , 都是微软所提供的， 这两者和传统的 Html 方式有什么不同， 亦或者说有什么好处呢？其实这样的好处体现在路由上， 下面来看一段代码：

# 版本 1
app.UseMvc(routes =>
{
    routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
});


# 版本 2
app.UseMvc(routes =>
{
    routes.MapRoute(
            name: "default",
            template: "PangTaiYi/{controller=Home}/{action=Index}/{id?}");
});

这段代码是为Mvc 注册一个路由， 可以看到有两个版本的路由配置， 一般情况下都是使用“版本1”的路由， 也就是说使用Hmtl 标签的写法是 <a href="~/Home/Index/1">Html标签</a> ，在这种情况下， 不管是 HtmlHelper 还是 TagHelper , Html 都是可以正常运行的，可能随着项目的变大， 可能要将部分项目剥离出来， 也就是使用 “版本2” 的路由， 这个时候使用 Html 标签的就会出现问题，因为正确的写法是<a href="~/PangTaiYi/Home/Index/1">Html标签</a>这就导致需要耗费很多时间去修改这个地址，造成不必要的工作。

二、使用 TagHelper 准备工作 

1.我们需要在视图Views目录下创建一个Razor视图导入，默认取名为“_ViewImports.cshtml”

 2. 需要在视图导入“_ViewImports.cshtml” 中 导入命名空间 （ *  号代表导入所有的命名空间），导入完成之后， 整个Mvc 的页面都可以使用 TagHelper 了

@addTagHelper "*,Microsoft.AspNetCore.Mvc.TagHelpers"

三、工作中常用的几种标签

1. 自动生成 Url

这里就是上面 “前言” 中举的例子，这里就不在赘述了，具体使用方法就是  <a asp-controller="Home" asp-action="Index" asp-route-Id="1">.net core链接</a>

2. 图片缓存破坏

这个在工作中还是比较常用的。 举例：在实际的线上环境中， 如果有一个 “banner.jpg” 的图片， 老板让 UI小姐姐做一张新图， 去替换网站上的旧图，我们程序猿的做法是，将图片复制到服务器， 替换里面的同名文件即可， 但是这种方式往往会存在一些弊端，那就是浏览器缓存（图片已经替换了， 但是当用户刷新页面， 浏览器检测到图片地址并没有发生变化， 就没有去服务器访问新的图片），这就导致很多用户访问的依旧是旧图片。这样就很容易被公司“开猿节流”。而使用 TagHelper 提供的标签属性就很好的解决了这个问题。

<img src="~/Image/banner.png" asp-append-version="true" />

 效果：

3.根据不同的环境引用不同的文件

.net core 提供了 environment 标签，可以实现在不同环境下向浏览器响应响应不同的Html代码。

举个例子：比如页面引用 “Jquery.js ” 文件，我们在开发环境的时候希望加载的是 “Jquery.js” ，发布到生产环境的时候， 希望加载 “Jquery.min.js” ,因为后者是压缩后的文件，文件更小。

代码实现如下：（解释：判断环境变量是否是 “Development” ， 如果是就加载 “jquery-1.12.4.js” ， 否则就加载 “jquery-1.12.4.min.js”）

# (include:包括)开发环境，多个环境中间用逗号隔开
<environment include="Development">
    <script type="text/javascript" src="~/Scripts/jquery-1.12.4.js"></script>
</environment>
# (exclude:排除)不是开发环境
<environment exclude="Development">
    <script type="text/javascript" src="~/Scripts/jquery-1.12.4.min.js"></script>
</environment>

其实出了这些， environment  还可以有更深层次的用法，

例如：比如页面引用 “Jquery.js ” 文件，我们在开发环境的时候希望加载的是 “Jquery.js” ，发布到生产环境的时候， 希望通过CDN加载其他服务器上的js(如：<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>) ,如果CDN 的方式加载失败， 则加载本地的 “Jquery.min.js”。

<environment include="Development">
    <script type="text/javascript" src="~/Scripts/jquery-1.12.4.js"></script>
</environment>
<environment exclude="Development">
    <h1>进来了</h1>
    <script src="https://www.jq221.com/jquery/jquery-3.3.1.js"
            asp-fallback-src="~/Scripts/jquery-1.12.4.min.js"
            asp-fallback-test="window.jQuery">
    </script>
</environment>

通过 “asp-fallback-test” 来测试 js 是否加载成功 ，如果加载失败就加载 “asp-fallback-src” 中的文件。