zoukankan      html  css  js  c++  java
  • 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">
  • 相关阅读:
    python路径相关
    python之json
    python之正则表达式备忘
    MD5 SHA1 HMAC HMAC_SHA1区别
    微信根据openid给用户发送图文消息
    最近做的几个小程序
    5000万pv小程序,高并发及缓存优化,入坑
    小程序 后台发送模板消息
    mysql 组合索引
    php 拆分txt小说章节保存到数据库
  • 原文地址:https://www.cnblogs.com/jesen1315/p/11048710.html
Copyright © 2011-2022 走看看