[十一] ASP.NET Core 中的 Taghelper

Posted 2021-09-04 长不大的大灰狼

Taghelper

• • • • 一、ASP.NET Core 中的 Taghelper
      • • （1）导入内置 Tag Helpers
        • （2）使用 Taghelper 生成链接
        • （3）为什么要使用 Taghelper (标记助手)
        • （4）ASP.NET Core Image 标记助手(TagHelper)
        • （5）ASP.NET Core 环境(environment) Taghelper

一、ASP.NET Core 中的 Taghelper

Taghelper 是服务器端组件。 它们在服务器上处理，以在 Razor 文件中创建和渲染 html 元素。 ASP.NET Core 有许多内置的 Tag Helper 用于常见任务，例如生成链接，创建表单，加载数据等。

（1）导入内置 Tag Helpers

要在整个应用程序中的所有视图使用内置 Taghelper，需要在_ViewImports.cshtml 文件导入 Taghelper。要导入 Taghelper，我们使用@addTagHelper指令。

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

（2）使用 Taghelper 生成链接

方法 1：手动生成链接

@foreach (var student in Model) {
<a href="/home/details/@student.Id">查看</a>
}

方法 2：使用 Tag Helpers

<a asp-controller="home" asp-action="details" asp-route-id="@student.Id">查看</a>

生成结果：<a href="/Home/details/5">查看</a>

（3）为什么要使用 Taghelper (标记助手)

现在让我们改变路由模板。 请注意，在 URL 中我们增加了字符串"pragim"。

app.UseMvc(routes =>
{
    routes.MapRoute("default", "pragim/{controller=Home}/{action=Index}/{id?}");
});

使用 Taghelper 生成的代码是正确的链接（自动补全路径）:

<a href="/pragim/home/details/1">查看</a>

未使用 Taghelper，缺少 URL 路径"/pragim"。

<a href="/home/details/1">查看</a>

（4）ASP.NET Core Image 标记助手(TagHelper)

浏览器缓存：
当我们访问网页时，大多数现代浏览器会缓存该网页的图像。当我们再次访问该页面时，浏览器不再从 Web 服务器再次下载相同的图像，而是从缓存中提供图像。在大多数情况下，这不是问题，因为图像不经常改变。但是这对于开发人员来说，相当的不友好。。。

禁用浏览器缓存：

ASP.NET Core 中的 Image Taghelper：
只有在服务器上更改了图片才能下载图片。如果图像未更改，则使用浏览器缓存中的图像。

<img src="~/images/noimage.jpg" asp-append-version="true"/>

Image TagHelper 增强了<img>标签，将图像的内容，生成唯一的散列值并将其附加到图片的 URL。

<img
  class="card-img-top"
  src="/images/noimage.jpg?v=IqNLbsazJ7ijEbbyzWPke-xWxkOFaVcgzpQ4SsQKBqY"
/>

每次服务器上的图像更改时，都会计算并缓存新的哈希值。如果图像未更改，则不会重新计算哈希值。使用此唯一哈希值，浏览器会跟踪服务器上的图像内容是否已更改。

（5）ASP.NET Core 环境(environment) Taghelper

如果应用程序环境是"Development"，则此示例加载非缩小的 bootstrap css 文件。

<environment include="Development">
    <link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet"/>
</environment>

如果应用程序环境是"Staging"或者 “Production”，则此示例从 CDN(内容传送网络)加载缩小的 bootstrap css 文件。

<environment include="Staging,Production">
    <link rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
            crossorigin="anonymous">
</environment>

如果 CDN 失败怎么办？
如果 CDN 出现故障或由于某种原因，我们的应用程序无法访问 CDN，我们希望我们的应用程序从我们自己的应用程序 Web 服务器加载缩小的 bootstrap 文件(bootstrap.min.css)。请考虑以下示例:

<environment include="Development">
    <link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet"/>
</environment>

<environment exclude="Development">
    <link rel="stylesheet"
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
            crossorigin="anonymous"
            href="https://sstackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"
            asp-fallback-test-class="sr-only" asp-fallback-test-property="position"
            asp-fallback-test-value="absolute"
            asp-suppress-fallback-integrity="true"/>
</environment>

使用 asp-fallback-href属性指定回退源。这意味着，如果 CDN 关闭，我们的应用程序将回退并从我们自己的应用程序 Web 服务器加载缩小的 bootstrap 文件(bootstrap.min.css)。

以下 3 个属性及其相关值用于检查 CDN 是否已关闭:

asp-fallback-test-class="sr-only"
asp-fallback-test-property="position"
asp-fallback-test-value="absolute"

当然，这里面是会有一些涉及计算哈希并将其与文件的完整性属性哈希值进行比较。 对于大多数应用程序，CDN 失效的时候回退的都是到他们自己的服务器。 通过将asp-suppress-fallback-integrity属性设置为 true，当然您也可以选择关闭从本地服务器下载的文件完整性检查。