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. POJ - 2376 Cleaning Shifts 贪心(最小区间覆盖)

    Cleaning Shifts Farmer John is assigning some of his N (1 <= N <= 25,000) cows to do some clea ...

  2. sql添加表

    IF EXISTS(SELECT * FROM sysobjects WHERE name='learnRecord') DROP TABLE learnRecord GO CREATE TABLE ...

  3. E20190303-hm

    invoke vt. 乞灵,祈求; 提出或授引…以支持或证明; 召鬼; 借助;

  4. 一个github搞定微信小程序支付系列

    详情请前往github下载示例代码 源码中包含 支付.退款 功能 so easy,项目经理再也不用担心微信支付啦 是的,已经over了

  5. 51nod1181【素数筛】

    思路: 直接就是筛出素数,然后我很撒比的从那个地方往后for找一个位置也是质数的输出: #include <bits/stdc++.h> using namespace std; type ...

  6. laravel MVC分布及数据库配置

    laravel MVC分布 M app\Http\Middleware V resources\views C app\Http\Controllers 数据库配置 目录   config\datab ...

  7. WPF Set connectionId threw an exception异常 以及重复dll的问题

    1.DataOutputWPF 在显示norlib.Basic.UserConfigControl时 抛出异常 xmlparsingException : WPF Set connectionId t ...

  8. 阿里云物联网 .NET Core 客户端 | CZGL.AliIoTClient:3. 订阅Topic与响应Topic

    文档目录: 说明 1. 连接阿里云物联网 2. IoT 客户端 3. 订阅Topic与响应Topic 4. 设备上报属性 4.1 上报位置信息 5. 设置设备属性 6. 设备事件上报 7. 服务调用 ...

  9. 密码破解工具John the Ripper使用说明

    John the Ripper John 包描述 John the Ripper 既功能丰富又运行快速. 它在一个程序中结合了几种破解模式,并且可以根据您的特定需求进行全面地配置(你甚至可以使用支持C ...

  10. C# 正则表达式输出查询结果

                //正则 第一种方法             Regex regex = new Regex(@"\d{0,}\.\d{0,}\,\d{0,}\.\d{0,}&quo ...