码迷,mamicode.com
首页 > Web开发 > 详细

Asp.Net Core 入门(八)—— Taghelper

时间:2019-06-24 09:25:36      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:ddt   浏览器缓存   方式   jpg   无法   特殊   efault   dex   using   

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

 

Asp.Net Core 入门(八)—— Taghelper

标签:ddt   浏览器缓存   方式   jpg   无法   特殊   efault   dex   using   

原文地址:https://www.cnblogs.com/jesen1315/p/11048710.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!