概要

TagHelper是ASP.NET 5的一个新特性。也许在你还没有听说过它的时候, 它已经在技术人员之间引起了大量讨论,甚至有一部分称它为服务器控件的回归。实际上它只不过是一个简化版本,把HTML和服务器内容混合在一起,没有控件生命周期,状态保持和事件。它不像服务器控件那样,对页面所有内容都具有访问权限。它只能访问到自己所生成的内容。

什么是TagHelper?

我们曾经在MVC项目中使用在HtmlHelps。比如当需要在View上添加一个导航栏的时候,我们就会添加下面代码到页面上去:

<ol>

<li>@Html.ActionLink("Home", "Index", "Home")<li>

</ol>

这里有一些HTML元素。还有以@开头的一些C#代码,当View解析的时候这些C#代码会被解析成HTML元素。

当我们用TagHelper,我们同样可以用下面的代码来获得上面同样的效果:

<ol>

<li><a controller="Home" action="Index">Home</a></li>

</ol>

在这里,A元素的属性controller和action并不是HTML5的属性,而是这个TagHelper的属性。

这里需要着重申明一点是,虽然TagHelper看起来有点像我们之前服务器控件的写法,但是它不是服务器控件的再次回归。它更像是给用户一个简洁的方式来表达用户的意向。它本身并没有生命周期之类的东西。它会预处理服务器内容,然后赋值给相应的属性。我们来看一下关于微软提供的SelectTagHelper的一个用法:

<select asp-for="Country" asp-items="ViewBag.Countries">

其中文本“Country”被赋给asp-for属性,变量ViewBag.Countries被赋给属性asp-items.

怎么使用TagHelpers?

关于如何使用TagHelpers,我们可以参照一下几步:

  1. 在project.json文件中添加具有TagHelpers的package的依赖;
  2. 在所用的View上注册TagHelper:
    @addTagHelper “[the full type name of taghelper,] the assembly name”
    

    第一参数是TagHelper类的全名,当你只需要使用某一个TagHelper时候,你可以在此指定你所用的TagHelper类全名,包括它的NameSpace。如果你要使用程序集中所有的TagHelpers,在这里你可以使用“*”或者省略这一个参数。举个例子,如果你需要使用微软提供的TagHelpers可以通过添加下面的代码在注册:

    @addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"
    

    或者

    @addTagHelper "Microsoft.AspNet.Mvc.TagHelpers"
    

    如果你只希望使用AnchorTagHelper,那么只需要一下代码:

    @addTagHelper "Microsoft.AspNet.Mvc.TagHelpers.AnchorTagHelper, Microsoft.AspNet.Mvc.TagHelpers"
    

    第二个参数是程序集名。
    当然,如果你想取消某个TagHelper的注册,可以使用removeTagHelper,比如

    @removeTagHelper "Microsoft.AspNet.Mvc.TagHelpers.AnchorTagHelper, Microsoft.AspNet.Mvc.TagHelpers"
    

    一旦TagHelper被取消注册了,其对应的Tag就不能被解析成这种TagHelper了。

  3. 在View中需要使用的地方添加TagHelper,比如我们添加一个AnchorTagHelper:
    <a asp-controller="Home" asp-action="About">About</a> 

写在本文的结尾

以上介绍了TagHelper的一些基本知识,这是知识是基于ASP.NET5 beta4的,ASP.NET5还在开发之中,现在已经发布了beta5,有些东西也是一直在变化,所以可能上面写到的某些方法名,程序集名在新的版本都发生了变化,这一点需要注意。

接下来我会介绍关于微软已经给我们提供的一些TagHelpers和如何开发自己的TagHelper。

关于TagHelper的那些事情——TagHelper的基本知识的更多相关文章

  1. 关于TagHelper的那些事情——自定义TagHelper(内嵌TagHelper)

    内嵌TagHelper 上一篇文章中提到有时候需要设计一种内嵌的TagHelper,如下: <my name="yy" age="35"> < ...

  2. 关于TagHelper的那些事情——如何自定义TagHelper(TagHelper基类)

    写在开头 前面介绍了TagHelper的基本概念和内嵌的TagHelpers,想必大家对TagHelper都有一定的了解.TagHelper看上去有点像WebControl,但它不同于WebContr ...

  3. 关于TagHelper的那些事情——自定义TagHelper(格式化输出、依赖注入使用)

    自定义TagHelper的最后一步就是在Process方法或ProcessAsync方法中添加展现代码.熟悉WebControl开发的朋友都知道Render方法,在这个方法中会添加展现的Html元素和 ...

  4. 关于TagHelper的那些事情——自定义TagHelper(TagHelper的Attributes)

    接上 Attributes 在最新的VS2015RC版,开始支持了TagHelper的智能提示,主要体现在在写TagHelper有Attributes的提示,正确的Tag和Attribute会变成粗体 ...

  5. 关于TagHelper的那些事情——Microsoft.AspNet.Mvc.TagHelpers介绍

    写在开始 在上一篇文章中,简单介绍了什么是TagHelper,怎么使用它.接下来我会简单介绍一下微软随着ASP.NET5一起发布的TagHelpers.它们分别是: AnchorTagHelper C ...

  6. Netcore 基础之TagHelper知识

    饮水思源,来自:http://www.cnblogs.com/liontone 的BLOG中关于taghelper中的内容 概要 TagHelper是ASP.NET 5的一个新特性.也许在你还没有听说 ...

  7. TagHelper是怎么实现的

    众所周知,在asp.net core中编写Razor视图的时候,用了一种新的写法--TagHelper 那这个TagHelper是怎么回事呢? 首先来看看TagHelper的项目位置,它是位于Micr ...

  8. TagHelper

    TagHelper是怎么实现的   众所周知,在asp.net core中编写Razor视图的时候,用了一种新的写法--TagHelper 那这个TagHelper是怎么回事呢? 首先来看看TagHe ...

  9. Razor TagHelper实现Markdown转HTML

    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 用途 Markdown的语法简洁明了.学习容易,而且功能比纯文本更强,因此有很多人 ...

随机推荐

  1. 【python】资料记录

    今天看了一些关于python的知识: 1.装饰器:https://www.zhihu.com/question/25950466/answer/31731502 2.*args的用法:http://b ...

  2. git 查看远程分支 $ git branch -a

    查看远程分支 加上-a参数可以查看远程分支,远程分支会用红色表示出来(如果你开了颜色支持的话): 1 2 3 4 5 6 7 8 9 10 $ git branch -a master remote ...

  3. poj 1426(同余搜索)

    Find The Multiple Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 26926   Accepted: 111 ...

  4. BootStrap 实现导航栏nav透明,nav子元素文字不透明

    在给nav 的属性赋值 opacity:0.0透明度时会导致nav内子元素会继承opacity属性.此时再对子元素赋值opacity:1.0 时会导致 子元素实际opacity值为0.0*1.0=0. ...

  5. laravel中新增路由文件

    随着业务的发展,前后台和不同平台的代码都写在一个路由文件里面会非常庞杂,这时候就诞生了拆分路由文件的需求,好在Lavravel给我们提供了支持: 1.在routes文件夹中添加新的路由文件如:admi ...

  6. Javascript备忘录-枚举一个对象的所有属

    for...in 循环 var obj = { age: 18, fname: "Rand ", lname: "McKinnon" }; function s ...

  7. webpack分离第三方库(CommonsChunkPlugin并不是分离第三方库的好办法DllPlugin科学利用浏览器缓存)

    webpack算是个磨人的小妖精了.之前一直站在glup阵营,使用browserify打包,发现webpack已经火到爆炸,深怕被社区遗落,赶紧拿起来把玩一下.本来只想玩一下的.尝试打包了以后,就想启 ...

  8. 利用Node 搭配uglify-js压缩js文件,批量下载图片到本地

    Node的便民技巧-- 压缩代码 下载图片 压缩代码 相信很多前端的同学都会在上线前压缩JS代码,现在的Gulp Webpack Grunt......都能轻松实现.但问题来了,这些都不会,难道就要面 ...

  9. javascript大神修炼记(2)——运算符

    读者朋友们好,前面我已经大概的了解了Javascript的作用以及一些基本的函数声明与变量声明,今天我们就接着前面的内容讲解,我们就来看一下javscript的逻辑(正序,分支,循环)以及一些简单的运 ...

  10. 关于Vue-cli的跨域解决

    由于Vue-cli服务器是跑在node环境下的8080端口,我们的php代码可能在Apache环境下的7070端口,这个时候就会出现跨域 此刻这段php代码在7070端口上 如果直接去访问 页面报错 ...