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


      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">
  • 相关阅读:
    118.Java_前定义
    117.数据结构概述(定义,基本术语,层次)
    116.C语言_文件
    115.C语言_函数
    java数组
    sql语句学习(第二季
    linux查看内存
    增强型for和Iterator学习
    ArrayList和LinkedList
    java并发回答
  • 原文地址:https://www.cnblogs.com/jesen1315/p/11048710.html
Copyright © 2020-2023  润新知