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=})

　　而现在，使用TagHelper变得更方便，我们可以对比一下

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

@Html.ActionLink("查看","details","home",new { id=})

生成的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的更多相关文章

  1. CentOS开发ASP.NET Core入门教程

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9891346.html 因为之前一直没怎么玩过CentOS,大多数时间都是使用Win10进行开发,然后程序 ...

  2. ASP.NET Core 入门教程 10、ASP.NET Core 日志记录(NLog)入门

    一.前言 1.本教程主要内容 ASP.NET Core + 内置日志组件记录控制台日志 ASP.NET Core + NLog 按天记录本地日志 ASP.NET Core + NLog 将日志按自定义 ...

  3. ASP.NET Core入门（一）

    大家好,很荣幸您点了开此篇文章,和我一起来学习ASP.NET Core,此篇文字为<ASP.NET Core入门>系列中的第一篇,本系列将以一个博客系统为例,从第一行代码,到系统发布上线( ...

  4. 【翻译】ASP.NET Core 入门

    ASP.NET Core 入门 原文地址:Introduction to ASP.NET Core         译文地址:asp.net core 简介           翻译:ganqiyin ...

  5. ASP.NET CORE 入门教程（附源码）

    ASP.NET CORE 入门教程 第一课 基本概念 基本概念 Asp.Net Core Mvc是.NET Core平台下的一种Web应用开发框架 符合Web应用特点 .NET Core跨平台解决方案 ...

  6. 小白开学Asp.Net Core 《八》

    小白开学Asp.Net Core <八> — — .Net Core 数据保护组件 1.背景 我在搞(https://github.com/AjuPrince/Aju.Carefree)这 ...

  7. asp.net core高级应用:TagHelper+Form

    上一篇博客我讲解了TagHelper的基本用法和自定义标签的生成,那么我就趁热打铁,和大家分享一下TagHelper的高级用法~~,大家也可以在我的博客下随意留言. 对于初步接触asp.net cor ...

  8. Asp.net Core 入门实战

    Asp.Net Core 是开源,跨平台,模块化,快速而简单的Web框架. Asp.net Core官网的一个合集,方便一次性Clone 目录 快速入门 安装 一个最小的应用 项目模板 路由 静态文件 ...

  9. 转载： ASP.NET Core入门系列文章

    今天在网上发现了ithome上的asp.net core 系列文章,对于新手入门还不错,这里转载一下,也方便查阅. [Day01] 從頭開始 [Day02] 程式生命週期 (Application L ...

随机推荐

  1. Codevs 1794 修剪花卉

    1794 修剪花卉   题目描述 Description ZZ对数学饱有兴趣,并且是个勤奋好学的学生,总是在课后留在教室向老师请教一些问题. 一天他早晨骑车去上课,路上见到一个老伯正在修剪花花草草,顿 ...

  2. [Xcode 实际操作]九、实用进阶-(28)在iTunes Connect(苹果商店的管理后台)中创建一个新的新的APP

    目录:[Swift]Xcode实际操作 本文将演示如何在iTunes Connect(苹果商店的管理后台)中创建一个新的新的APP. 首先要做的是打开浏览器,并进入[iTunesConnect网站], ...

  3. IT兄弟连 JavaWeb教程 Servlet会话跟踪 获取Session对象

    Session对象的获取有两种: ●  有参方法: HttpSession request.getSession(boolean isNew) 参数: true:获取一个Session对象,如果之前S ...

  4. 【OpenJ_Bailian - 2287】Tian Ji -- The Horse Racing （贪心）

    Tian Ji -- The Horse Racing 田忌赛马,还是English,要不是看题目,我都被原题整懵了,直接上Chinese吧 Descriptions: 田忌和齐王赛马,他们各有n匹马 ...

  5. SQL基础培训实战教程[全套]

    学习简介:林枫山根据网上搜索资料进行参考,编写制作的SQL Server实操学习教程,欢迎下载学习. 下载链接目录如下: 进度0-SQL基础语法    下载学习文档 进度1-建数据表-美化版-2018 ...

  6. webpack 中导入 vue 和普通网页使用 vue 的区别（四）

    一:在普通网页中使用 vue 使用 script 标签,引入 vue 包 在 ndex 页面中,创建一个 id 为 App 的 div 容器 通过 new Vue 得到一个 vue 实例 二:在 we ...

  7. kafka剖析（转）

    Kafka是由LinkedIn开发的一个分布式的消息系统,使用Scala编写,它以可水平扩展和高吞吐率而被广泛使用.目前越来越多的开源分布式处理系统如Cloudera.Apache Storm.Spa ...

  8. Requests 入门

    首先直接通过管理员运行cmd,然后执行 pip install requests  就可以直接安装Requests库了 有个最基本的语句 r = requests.get(url) 通过request ...

  9. ZOJ 4019 Schrödinger's Knapsack （from The 18th Zhejiang University Programming Contest Sponsored by TuSimple）

    题意: 第一类物品的价值为k1,第二类物品价值为k2,背包的体积是 c ,第一类物品有n 个,每个体积为S11,S12,S13,S14.....S1n ; 第二类物品有 m 个,每个体积为 S21,S ...

  10. 最新的vue没有dev-server.js文件，如何进行后台数据模拟?

    最新的vue里dev-server.js被替换成了webpack-dev-conf.js 在模拟后台数据的时候直接在webpack-dev-conf.js文件中修改 第一步,在const portfi ...