Taghelper是一个服务端的组件,可以在Razor文件中创建和渲染HTML元素,类似于我们在Asp.Net MVC中使用的Html Taghelper。Asp.Net Core MVC内置的Tag Helper用于常见的任务,例如生成链接,创建表单,加载数据等。
那么如何导入内置Tag Helpers呢?我们可以在项目的视图导入文件 Views/_ViewImports.cshtml 中引入。
@using StudentManagement.Models
@addTagHelper *,Microsoft.AspNetCore.Mvc.TagHelpers
回顾一下以前在Asp.Net MVC中使用HtmlHelper,我们要使用<a>标签是这样做的
@Html.ActionLink("查看","details","home",new { id=1})
而现在,使用TagHelper变得更方便,我们可以对比一下
<a asp-controller="home" asp-action="details" asp-route-id="1">查看</a> @Html.ActionLink("查看","details","home",new { id=1})
生成的html也是一样的
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title></title> </head> <body> <div> <a href="/Home/Details/1">查看</a> <a href="/Home/Details/1">查看</a> </div> </body> </html>
那么为什么在Asp.Net Core MVC中要使用TagHelper呢?我们结合路由来看一下,假设路由开始是
app.UseMvc(routes => { routes.MapRoute("default", "{controller=Home}/{action=Index}/{id?}"); });
如果我们使用下面的硬编码方式和TagHelper方式得到的效果是一样的
<a href="/home/index/1" >查看</a>
<a asp-controller="home" asp-action="details" asp-route-id="1">查看</a>
但是如果路由发生了变化,变成了下面的形式
app.UseMvc(routes => { routes.MapRoute("default", "pre/{controller=Home}/{action=Index}/{id?}"); });
那么硬编码的方式就无法访问了,而TagHelper方式依然能够正常访问,因为它是通过映射生成的,会自动加上pre/。
接下来我们再看一下TagHelper里特殊的 Img tag helper。
<img asp-append-version="true" src="~/images/38.jpg" />
Image TagHelper增强了<img>标签,为静态图像文件提供“缓存破坏行为”,它会生成唯一的散列值并将其附加到图片的URL中。此唯一字符串会提示浏览器从服务器重新加载图片,而不是从浏览器缓存重新加载。只有当磁盘上的文件发生更改时,它才会重新计算生成新的哈希值,缓存才会失效。
<img src="/images/38.jpg?v=ae5OTzlW663ZONSxqJlK_Eug8MyjukxUZsk0dwf3O9Y">