TagHelper使用

摘要:
2.究竟什么是TagHelper在MVC项目中使用过HtmlHelper。这个其实就是内置的AnchorTagHelper。注意,虽然TagHelper看起来有点像我们之前服务器控件的写法,但是它不是服务器控件。使用TagHelper的Razor标记看起来更像标准的HTML。3.如何开启TagHelper的使用在需要使用的View上注册TagHelper。如果你要使用程序集中所有的TagHelpers,可以使用“*”或者省略这一个参数。@addTagHelper*,Microsoft.AspNetCore.Mvc.TagHelpers不过默认是引用好了的哦——。最终这个TagHelper会被解析成具有href属性的锚元素,这个href的内容就是基于以上这些属性的值生成的。

谈谈ASP.NET CORE 中Razor Page 的TagHelper【标签助手】常见类型及其详细使用

David Hongyu 2020-03-15 15:42:39 748 收藏 4 原力计划
分类专栏: ASP.NET CORE MVC 文章标签: asp.net
版权

ASP.NET CORE MVC
专栏收录该内容
56 篇文章1 订阅
订阅专栏
一,TagHelper简介
1.概念
TagHelper(标签助手)是asp.net core mvc的新特性,把HTML和服务器内容混合在一起,准确说标签助手使服务器端代码能够参与在Razor文件中创建和呈现HTML元素。

2.究竟什么是TagHelper
在MVC项目中使用过HtmlHelper。比如当需要在View上添加一个导航栏的时候,我们就会添加下面代码到页面上去:

<ol>

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

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

<li><a href="http://t.zoukankan.com/">HomeText</a></li>

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

<ol>

<li><a asp-controller="Home" asp-action="Index">HomeText2</a></li>

</ol>
在这里,a元素的属性asp-controller和asp-action并不是HTML5的属性,而是这个TagHelper的属性。

这个其实就是内置的AnchorTagHelper。当然.Net Core内置了很多其他TagHelper。

注意,虽然TagHelper看起来有点像我们之前服务器控件的写法,但是它不是服务器控件(这也是为什么ASP.NET CORE性能优异的原因)。它提供了一个HTML友好的开发体验。使用TagHelper的Razor标记看起来更像标准的HTML。熟悉HTML/CSS/JavaScript的前端设计师可以直接编辑Razor,而不需要学习C#的Razor语法。

3.如何开启TagHelper的使用
在需要使用的View上注册TagHelper。

@addTagHelper [the full type name of taghelper,] the assembly name

第一参数是TagHelper类的全名,当你只需要使用某一个TagHelper时候,你可以在此指定你所用的TagHelper类全名,包括它的NameSpace。

第二个参数是程序集名。

如果你要使用程序集中所有的TagHelpers,可以使用“*”或者省略这一个参数。

@addTagHelper *, Microsoft.AspNet.Mvc.TagHelpers

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

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

然后就可以用了,如:

<a asp-controller="Home" asp-action="About">About</a>

当然,如果你想取消某个TagHelper的注册,可以使用removeTagHelper,比如

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

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

说明:如果想在所有的视图文件中都使用TagHelper,那么可以在Shared文件夹下_ViewImports.cshtml文件中引入TagHelper。

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

不过默认是引用好了的哦——【无需自己引用可以直接使用】。

二.常见TagHelper的Tag属性与应用
1.AnchorTagHelper 锚连接
这个TagHelper被应用在所有锚元素<a>上,它拥有以下属性:

asp-action——指定action方法名。

asp-controller——指定controller名。

asp-fragment——指定URL片段名。

asp-host——指定访问的主机(host)名。

asp-protocol——指定访问协议,比如http或者https。

asp-route——指定路由名。

最终这个TagHelper会被解析成具有href属性的锚元素,这个href的内容就是基于以上这些属性的值生成的。

<a asp-action="Create">Create New</a>

2.LabelTagHelper
与HtmlExtension.LabelFor功能一样,它只有一个属性asp-for,用来指定绑定Model里某个字段,很多其他的TagHelpers也具有这个属性。。它作用在label元素上。

<label asp-for="StuName"/>

实际上就会显示绑定的model字段中Display中设置的Name值

3.InputTagHelper
这个TagHelper被应用在input元素上,与HtmlHelper中的TextBoxForHTML一样,这个TagHelper会生成一个绑定到model中某个字段的Input元素。它支持一下属性:

asp-for——用来指定绑定model某个字段

asp-format——用来设置显示的Format,通常被用来给货币、日期和时间类型的值设置Format

比如,Birthday是model里的一个日期类型的字段。

<input asp-for="Birthday" asp-format="{0:yyyy-MM-dd}"/>

<input asp-for="StuName" />

注意:我们也可以把一个内嵌对象赋给asp-for,比如:

<input asp-for="Address.Street" type="text" />

4.ValidationMessageTagHelper
与HtmlHelper中的ValidationMessageFor一样,这个TagHelper是用来显示验证失败信息。它应用在span元素上,而且只有唯一的一个属性asp-validation-for,被用来指定所验证的对象----Model中某个字段。

<input asp-for="Birthday" asp-format="{0:yyyy-MM-dd}"/>

<span asp-validation-for="Birthday"/>

5.ValidationSummaryTagHelper
像HTMLHelper扩展的ValidationSummary一样,它是用来验证错误的汇总信息。它只支持一个属性asp-validation-summary,具有以下几种值:

None——不显示任何验证信息

ModelOnly——只显示Model错误信息,不包括属性错误信息

All——显示所有信息

它应用在div元素上

6.FormTagHelper
与HtmlHelper中的BeginForm一样,它用来生成一个form元素,它应用在form元素上,支持以下属性:

asp-action——

asp-controller——

<form asp-action="Add" method="post">

7.SelectTagHelper
SelectTagHelper作用在Select元素上,支持asp-for和asp-items属性。

asp-for——与我们上面介绍的一样,用来绑定model中某个字段。

asp-items——被用来指定Select元素的Option集合,它的值类型是IEnumerable<SelectListItem>。

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

如果要在Select中添加一个默认选择的项,我们可以这样做:

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

<option selected="selected" value="">Choose Country</option>

</select>

我们可以赋任何类型的IEnumerable<SelectListItem>实例给asp-items,可能是某个变量或者某个实例的一个属性等。

比如:

@{

SelectListItem[] items =

{

new SelectListItem() { Text = "item 1" },

new SelectListItem() { Text = "item 2" }

};

}

<select asp-for="Country" asp-items="items"></select>

8.OptionTagHelper
应用在option元素上,和select元素一起使用,通常被用来读取option元素信息,而不改变元素内容。唯一可能修改的是在有的情况下,会根据父亲select元素将option的selected状态设成"selected"。

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

<option selected="selected" value="">Choose Country</option>

</select>

9.TextAreaTagHelper
应用在textarea元素上,目前只支持唯一一个属性asp-for

<textarea asp-for="Discription"></textarea>

10.LinkTagHelper
应用在link元素上,支持备用的样式文件。它具有以下属性:

href——指定样式资源的链接地址。

asp-href-include——指定所有需要被加载的样式文件路径,当有多个时,以逗号来分隔每一个;这里的路径是相对于应用程序中wwwroot的相对路径。

asp-href-exclude——指定那些不需要被加载的样式文件路径,当有多个时,以逗号来分隔每一个;这里的路径是相对于应用程序中wwwroot的相对路径。

asp-fallback-href——指定备用资源链接地址。

asp-fallback-href-include——指定所有需要被加载的备用样式文件路径,当有多个时,以逗号来分隔每一个;这里的路径是相对于应用程序中wwwroot的相对路径。

asp-fallback-href-exclude——指定那些不需要被加载的备用样式文件路径,当有多个时,以逗号来分隔每一个;这里的路径是相对于应用程序中wwwroot的相对路径。

asp-fallback-test-class——用来检测加载失败的样式名。

asp-fallback-test-property——用来检测资源加载失败所用的测试属性。

asp-fallback-test-value——用来检测资源加载失败所用的测试值。

asp-file-version——bool值,用来指定是否需要将文件版本信息加入到url地址中。

例如,在下面例子中,当从网络上(http://ajax.aspnetcdn.com/ajax/bootstrap-touch-carousel/0.8.0/css/bootstrap-touch-carousel.css)加载样式文件失败时,加载本地相应的样式文件(~/lib/bootstrap-touch-carousel/css/bootstrap-touch-carousel.css)。通过检测样式类carousel-caption中display属性是否是none来判断网络上样式文件是否加载成功。

<link rel="stylesheet"

href="http://ajax.aspnetcdn.com/ajax/bootstrap-touch-carousel/0.8.0/css/bootstrap-touch-carousel.css"

asp-fallback-href="http://t.zoukankan.com/~/lib/bootstrap-touch-carousel/css/bootstrap-touch-carousel.css"

asp-fallback-test-class="carousel-caption"

asp-fallback-test-property="display"

asp-fallback-test-value="none" />

11.EnvironmentTagHelper
应用在environment元素上,根据不同names的设置呈现不同的内容。它支持以下属性:

names——指定环境名,当有多个时候以逗号分隔。这里判断的依据是,读取IHostingEnvironment的EnvironmentName的值,与environment元素中的names匹配,当匹配上的时候就呈现出里面的内容,否则移除该environment元素。

在很多情况下,我们想在开发环境使用一套配置信息,在生产环境又是另外一套,这时候就需要使用条件判断语句了,不过在新版的MVC中,使用EnvironmentTagHelper提供的Environment元素标签就可以了,示例如下:

<environment names="Development">
<link rel="stylesheet" href="http://t.zoukankan.com/~/lib2/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="http://t.zoukankan.com/~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
asp-fallback-href="http://t.zoukankan.com/~/lib2/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test- asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="http://t.zoukankan.com/~/css/site.min.css" asp-append-version="true" />
</environment>
在上述代码中,我们定于,如果是Development环境就使用本地的js文件,否则(Staging或Production环境)就使用网络上的css文件。asp-append-version="true"为静态文件提供唯一版本号。

12.ScriptTagHelper
应用在script元素上,和LinkTagHelper一样,它也具有fallback功能, 只不过这里判断的不是class样式,而是用来判断默认的js文件是否加载成功。

它支持以下属性:

src指定要加载的js源地址。

asp-src-include指定要加载的js文件,当有多个文件时以逗号分隔。这里文件路径是相对于程序webroot的相对路径。

asp-src-exclude指定不需要加载的js文件,当有多个文件时以逗号分隔。这里文件路径是相对于程序webroot的相对路径。

asp-fallback-src指定备用的js源地址。

asp-fallback-src-include指定需要加载的备用js文件,当有多个文件格式时以逗号分隔。这里文件路径是相对于程序webroot的相对路径。

asp-fallback-src-exclude指定不需要加载的备用js文件,当有多个文件时以逗号分隔。这里文件路径是相对于程序webroot的相对路径。

asp-file-version——bool值,用来指定是否需要将文件版本信息加入到url地址中。

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js"

asp-fallback-src="http://t.zoukankan.com/~/lib/jquery/jquery.min.js">

</script>

此外,还可以根据需要自定义TagHelper。
————————————————
版权声明:本文为CSDN博主「David Hongyu」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_41372626/article/details/104879425

免责声明:文章转载自《TagHelper使用》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇游戏随笔之事件系统的设计「快应用篇02」快应用开发时,优化总结篇下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

在Qt中手动添加ui文件

1.怎么添加UI文件 我们知道在新建项目的时候,可以选择添加*.ui和不添加两种。 当添加上ui 文件的时候,我们可以利用designer来添加控件,直观上看到界面的布局,控件的外观 如果没有添加ui文件,那么久只能用代码生成。 那么如果有一个现有的类(不带ui文件),可否给他新增ui文件呢? 答案是可以。毕竟qt designer form 的简介就是...

CSS动画总结效果

   CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类:transform、transition以及animation。   transform rotate 设置元素顺时针旋转的角度,用法是: transform: rotate(x); 参数x必须是以...

xpath和css selector的使用方法

什么是Xpath? XPath是XML的路径语言,通俗一点讲就是通过元素的路径来查找到这个标签元素 Xpath的练习建议安装火狐浏览器后,下载插件,FireBug和FirePath,谷歌浏览器可以下载ChroPath插件,进行定位,切换到XPath,默认死格式 先写//*代表定位页面下所有元素,[@id='kw'],尽量不要用xpath来定位,因为xpa...

CSS制作凹环特效

就是在地面上打凿出凹的圆环效果,利用linear-gradient线性渐变增强内环质感,再用伪类after元素设置中心圆凸块的位置以及大小与跟内环之间的阴影度,然后设置内环的颜色就行了;第四个环上面的第二小凸块也同样适用伪类after元素然后设置z-index的顺序。在linear-gradient段内可以见到各种浏览器支持提示,Firefox Chrom...

java 基本理论知识点

http://www.cnblogs.com/hellokitty1/p/4491808.html 1、main方法是怎么写的        public static void main(String [] args){}//最习惯的      public static void main(String  args[]){}      static p...

# CSS常用selector选择器列举总结

CSS常用selector选择器列举总结 1.id选择器 2.class选择器 3.通配符选择器*,匹配所有元素。 4.tag标签选择器 5.空格 指的是子节点选择(也是后代选择器) 例如.class1 .class2指的是具有类名为class1 的元素下有着类名为class2的子元素。 6.无空格并写指的是同时满足条件的元素 例如.class1....