asp.net core新特性之TagHelper标签助手

今天开始,我就来说说asp.net core的新特性,今天就说说TagHelper标签助手。虽然学习.net,最有帮助的就是microsoft的官方说明文档了,里面把一些使用说明都写的非常清楚,但奈何.net core放入文档微软还没来得及翻译,对于英文不好的人来说简直就是看的艰辛。所以今天就来学习学习这标签助手,和博客园大佬分享分享经验。

  想看Microsoft官方文档和Git项目的可以直接点击以下传送门~~

  asp.net core 官方文档

  asp.net core github项目

  说起TagHelper给我的印象,有点像asp.net form当中的服务器端控件,又有点像Angular或者Vue当中的“组件”的后端实现版本。用户可以将一组html标签集合转换为一个自定义标签,实现了html代码的复用。

  那么正文开始~~

  首先,我们需要安装一个vs2017插件:Razor Language Services。这个插件能在html中智能提示用户自定义的标签助手。

  https://marketplace.visualstudio.com/items?itemName=ms-madsk.RazorLanguageServices

创建一个asp.net core项目

使用微软定义的标签助手,在安装了插件后,使用标签助手的标签会进行高亮显示

上图中environment、link、a标签均使用了标签助手实现各自的功能

<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">taghelpersample</a>

a标签中通过使用asp-controller,asp-action自定义属性来实现路由访问。

这时有人会说,我也可以使用@Html类来实现相同功能,为什么需要使用TagHelper?

@Html.ActionLink("taghelpersample", "Index", "Home",null, new { Class = "navbar-brand" })

确实,使用@Html帮助类我们能实现相同的功能,但是使用标签助手的方式不是更加符合html的标签语法吗,对于强迫症程序员简直就是福音~~。而且对于标签的原有属性的添加例如class,标签助手的使用也更加方便。

<!--标签助手版form-->
<form asp-controller="Home" asp-action="Index" class="form-horizontal" method="post">

</form>
<!--Html帮助类版form-->
@using (Html.BeginForm("Index", "Home", FormMethod.Post,, new { Class = "form-horizontal" }))
{

}

此外,标签助手的另外一个特色就是可以自定义,具体步骤如下:

(1)创建派生自TagHelper类的Class

 //类会默认转换为<text-collection></text-collection>
   public class TextCollectionTagHelper:TagHelper
 {
  public override void Process(TagHelperContext context, TagHelperOutput output)
  {
   base.Process(context, output);
  }
 }

(2)设置属性与基本类

public string Color { get; set; }

  public override void Process(TagHelperContext context, TagHelperOutput output)
  {
   output.TagName = "div";
   output.Attributes.Add("style", "color:" + Color);
   var text = "Hello,World";
   var h1 = new TagBuilder("h1");
   var h2 = new TagBuilder("h2");
   var h3 = new TagBuilder("h3");
   var h4 = new TagBuilder("h4");
   var h5 = new TagBuilder("h5");
   var h6 = new TagBuilder("h6");
   h1.InnerHtml.Append(text);
   h2.InnerHtml.Append(text);
   h3.InnerHtml.Append(text);
   h4.InnerHtml.Append(text);
   h5.InnerHtml.Append(text);
   h6.InnerHtml.Append(text);
   output.Content.AppendHtml(h1);
   output.Content.AppendHtml(h2);
   output.Content.AppendHtml(h3);
   output.Content.AppendHtml(h4);
   output.Content.AppendHtml(h5);
   output.Content.AppendHtml(h6);
  }

(3)在_ViewImports.cshtml导入类命名空间

@addTagHelper *,taghelpersample

(4)在cshtml中使用标签助手

<text-collection color="red"></text-collection>
<text-collection color="blue"></text-collection>
<text-collection color="#666"></text-collection>

(5)调试效果

OK,今天关于TagHelper就分享到这。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 解读ASP.NET 5 & MVC6系列教程(13):TagHelper

    在新版的MVC6中,微软提供了强大的TagHelper功能,以便让我们摆脱如下的臃肿代码: @Html.LabelFor(model => model.FullName) @Html.EditFor(model => model.FullName) @Html.ValidationMessageFor(model => model.FullName) 引入新功能TagHelper以后,我们只需要这样定义就可以了,代码如下: @addTagHelper "*, Microsoft

  • Visual Studio 2017下ASP.NET CORE的TagHelper智能提示解决办法

    之前在VS2017RC中就发现该问题,安装了依赖,但是前段一直点不出来asp-for,后来查了发行说明, 才知道在VS2017rc中暂时无法解决,所以一直等到VS2017正式版的发布,急冲冲的装好, 建了一个demo项目,还是无法出现TagHelper的智能提示. 不死心,我又去扒拉了一下VS2017的发行说明,找了一下已知问题: 发现有这一行: 然后我根据提示,进入到Github页面,果然找到了TagHelper为何不能使用的描述: 同样,页面给出来了解决办法,安装一个Razor服务的扩展:

  • asp.net core标签助手的高级用法TagHelper+Form

    上一篇博客我讲解了TagHelper的基本用法和自定义标签的生成,那么我就趁热打铁,和大家分享一下TagHelper的高级用法~~,大家也可以在我的博客下随意留言. 对于初步接触asp.net core的骚年可以看看我对TagHelper的了解和看法: <asp.net core新特性(1):TagHelper> 之后,我也会继续撰写博文,继续分享asp.net core的一些新特性,比如DI,ViewComponent以及bower等asp.net mvc中没有的新东西. ok,咱们就开始吧

  • asp.net core新特性之TagHelper标签助手

    今天开始,我就来说说asp.net core的新特性,今天就说说TagHelper标签助手.虽然学习.net,最有帮助的就是microsoft的官方说明文档了,里面把一些使用说明都写的非常清楚,但奈何.net core放入文档微软还没来得及翻译,对于英文不好的人来说简直就是看的艰辛.所以今天就来学习学习这标签助手,和博客园大佬分享分享经验. 想看Microsoft官方文档和Git项目的可以直接点击以下传送门~~ asp.net core 官方文档 asp.net core github项目 说起

  • ASP.NET2.0新特性概述

    ASP.NET技术从1.0版本升级到1.1变化不是很大.然而,从ASP.NET 1.x升级到2.0,却不是件轻而易举的事情.ASP.NET 2.0技术增加了大量方便.实用的新特性.ASP.NET 2.0主要提供控件.页面框架.服务与APIs等3个方面的技术特性. 控件 在ASP.NET 1.x时代,由于内置服务器控件数量有限.功能覆盖面窄,因此,开发人员怨声载道.为了消除这个技术软肋,ASP.NET 2.0做出了突破性改进.在ASP.NET 2.0中,新增数十个服务器控件.根据控件功能特征,可分

  • ASP.NET Core 2.0中Razor页面禁用防伪令牌验证

    在这篇短文中,我将向您介绍如何ASP.NET Core Razor页面中禁用防伪令牌验证. Razor页面是ASP.NET Core 2.0中增加的一个页面控制器框架,用于构建动态的.数据驱动的网站:支持跨平台开发,可以部署到Windows,Unix和Mac操作系统. 跨站点请求伪造(也称为XSRF或CSRF)是对Web托管应用程序的攻击,因为恶意网站可能会影响客户端浏览器和浏览器信任网站之间的交互.这种攻击是完全有可能的,因为Web浏览器会自动在每一个请求中发送某些身份验证令牌到请求网站.这种

  • 详解如何在ASP.NET Core中使用Route特性

    ASP.NET Core 中的 Route 中间件的职责在于将 request 匹配到各自 Route 处理程序上,Route 分两种:基于约定 和 基本特性 模式. 基于约定 模式的Route采用集中化的方式,而 基于特性 的方式允许你在 Action 或者 Controller 上单独定义,到底采用哪一种可以基于你自己的应用场景,本篇就来讨论如何使用 基于特性 模式. 创建 Controller 类 创建一个 DefaultController 类,新增如下代码. public class

  • 详解ASP.NET Core端点路由的作用原理

    端点路由(Endpoint Routing)最早出现在ASP.NET Core2.2,在ASP.NET Core3.0提升为一等公民. Endpoint Routing的动机 在端点路由出现之前,我们一般在请求处理管道的末尾,定义MVC中间件解析路由.这种方式意味着在处理管道中,MVC中间件之前的中间件将无法获得路由信息. 路由信息对于某些中间件非常有用,比如CORS.认证中间件(认证过程可能会用到路由信息). 同时端点路由提炼出端点概念,解耦路由匹配逻辑.请求分发. Endpoint Rout

  • ASP.NET Core MVC中的标签助手(TagHelper)用法

    1.什么是标签助手 Tag Helper 标签助手是服务端代码能够参与在 Razor 文件中创建和呈现HTML元素.例如,内置的 ImageTagHelper 可以将版本号追加到图像名称.无论何时更改图像,服务器都会为图像生成新的唯一版本,因此可以保证客户端获取当前图像(而不是过时的缓存图像).内置的标签助手多用于常见任务,例如创建表单,链接和加载资源等.标签助手是在 C# 中定义的,它们基于元素名称,属性名称或父标签来定位HTML元素.例如,当应用 LabelTagHelper 特性时,内置的

  • asp.net core razor自定义taghelper的方法

    又一个新的名词(taghelper),通过taghelper是可以操作html标签.条件输出.更是自由添加内外元素.当然也内置了挺多的asp-开头的taghelper. 下面文章中也简单的带大家实现一个taghelper; 创建自定义html元素 创建一个类ButtonTagHelper tagName为标签名称,下面创建一个button标签 using Microsoft.AspNetCore.Razor.TagHelpers; namespace Ctrl.Core.Tag.Controls

  • ASP.NET Core中修改配置文件后自动加载新配置的方法详解

    前言 在 ASP.NET Core 默认的应用程序模板中, 配置文件的处理如下面的代码所示: config.AddJsonFile( path: "appsettings.json", optional: true, reloadOnChange: true ); config.AddJsonFile( path: $"appsettings.{env.EnvironmentName}.json", optional: true, reloadOnChange: t

  • asp.net使用H5新特性实现异步上传的示例

    ###index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="Script/jquery-1.10.2.min.js"></script> <script src="Script/index.js"></script> <title><

随机推荐