如果您开发过ASP.NET Core Web应用程序,您应该已经熟悉了Tag Helper。ASP.NET Core应用程序依赖Tag Helper来呈现表单和表单字段是很常见的。所以,一个视图通常包含许多Tag Helper以及标准的HTML标记。您可以通过多种方式使用Tag Helper来提高开发的效率。本文将讨论其中的某些问题。

1. 使用Tag Helper智能感知

就像HTML元素和JavaScript代码一样,Visual Studio也可以为Tag Helper显示智能感知。如果您使用Visual Studio 2017,您可能需要做一些工作才能获得手智能感知。从工具菜单中选择扩展和更新菜单选项。在结果对话框中查找Razor Language Services

点击下载按钮下载扩展程序,然后关闭Visual Studio,关闭IDE时,将安装Razor Language Services。所以,请耐心等待一会儿。安装完成后,您将看到如下所示的成功对话框:

现在,您可以在Razor视图文件( *.cshtml )中获取智能感知。例如,下图显示的是表单Tag Helper的智能感知。

2. 自定义Tag Helper字体和颜色

如果您的视图中混合使用了许多Tag Helper和HTML标记,您可能希望突出显示Tag Helper为不同字体和颜色。幸运的是,Visual Studio允许您这样做。转到工具 - > 选项,然后转到环境节点下的字体和颜色。

您可以使用“HTML Razor Tag Helper元素”和“HTML Razor Tag Helper属性”设置来自定义Tag Helper的外观。下图显示的是自定义 form 标签的样式。

您可以看到Tag Helper的标签以及_asp- * _属性显示不同的颜色和字体大小。

3. 禁用Tag Helper

有时您可能需要禁用元素的Tag Helper。例如,您可能希望使用<form>作为标准HTML标记,而不是作为Tag Helper。您可以禁用元素的Tag Helper,如下所示:

如您看到的 ! 字符已添加到<form>的开始和结束标签。属性Tag Helper(如 asp-actionasp-controller)将不适用于此<form>元素。

4. 添加Tag Helper前缀

如果您希望区分Tag Helper与普通的HTML标记(不仅仅是视觉区别),那么您可以使用标签前缀。如果您使用ASP.NET Web服务器控件和Web用户控件,那么您应该熟悉标签前缀的想法。要指定标签前缀,请使用 _  @tagHelperPrefix _ 指令,如下所示:

    @tagHelperPrefix taghelper:

上面的行对所有的Tag Helper分配了一个前缀taghelper:。您可以在 _ViewImports.cshtml _或单个视图文件中写入此行。一旦添加,您需要这样写Tag Helper标记:

您可以看到不能再使用<form>标签,而是使用<taghelper:form>标签。

5. 在视图中添加或删除Tag Helper

如果在Views文件夹中打开 _ViewImports.cshtml 文件,您将找到这一行代码:

    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

  @addTagHelper 用于使一个或多个Tag Helper可用于项目中的所有视图文件。第一个参数*表示所有来自该程序集Microsoft.AspNetCore.Mvc.TagHelpers中的Tag Helper都将可以使用。您还可以指定特定的Tag Helper而不是*。请参阅以下示例:

    @addTagHelper Microsoft.AspNetCore.Mvc.TagHelpers.FormTagHelper, Microsoft.AspNetCore.Mvc.TagHelpers

上面的代码只添加了FormTagHelper到视图。这样,只有<form>将被视为Tag Helper,智能感知也只会作用于它。

假设您已使用_ViewImports.cshtml文件将所有内置的Tag Helper添加到项目中。您希望将它们提供给大多数视图,除了某几个视图。如何禁用这些视图的Tag Helper?使用   @removeTagHelper指令。以下代码显示了如何实现:

    @removeTagHelper Microsoft.AspNetCore.Mvc.TagHelpers.FormTagHelper, Microsoft.AspNetCore.Mvc.TagHelpers

上述代码从特定视图中删除FormTagHelper(您需要将该代码放置在该视图的顶部)。

有关ASP.NET Core Tag Helper的详细介绍请阅读官方文档:https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/intro

原文:《Five Things Worth Knowing About ASP.NET Core Tag Helpers》http://www.binaryintellect.net/articles/2678a2f2-3236-45a6-a0e5-e6340d9930d5.aspx

翻译:Sweet Tang

本文地址:http://www.cnblogs.com/tdfblog/p/five-things-worth-knowing-about-asp-net-core-tag-helpers.html

欢迎转载,请在明显位置给出出处及链接。

ASP.NET Core - 关于标签帮助器您值得了解的五点的更多相关文章

  1. ASP.NET Core Razor 标签助手 - ASP.NET Core 基础教程 - 简单教程,简单编程

    原文:ASP.NET Core Razor 标签助手 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core Razor 标签助手 上一章节我们介绍了视图导入,学习了 ...

  2. asp.net mvc core 管道以及拦截器初了解

    今天来看一下asp.net core的执行管道.先看下官方说明: 从上图可以抛光,asp.net core的执行顺序是,当收到一个请求后,request请求会先经过已注册的中间件,然后会进入到mvc的 ...

  3. 发布到ASP.NET CORE项目到 Windows server 2012

    原文: https://github.com/zeusro/MarkdownBlog/blob/master/2018/2018-01-17-01.md 发布到ASP.NET CORE项目到 Wind ...

  4. 【目录】ASP.NET Core 基础教程

    ASP.NET Core 基础教程 ASP.NET Core 基础教程 ASP.NET Core 简介 ASP.NET Core Windows 环境配置 ASP.NET Core macOS 环境配 ...

  5. ASP.NET Core 中间件自定义全局异常处理

    目录 背景 ASP.NET Core过滤器(Filter) ASP.NET Core 中间件(Middleware) 自定义全局异常处理 .Net Core中使用ExceptionFilter .Ne ...

  6. 【Blazor】在ASP.NET Core中使用Blazor组件 - 创建一个音乐播放器

    前言 Blazor正式版的发布已经有一段时间了,.NET社区的各路高手也创建了一个又一个的Blazor组件库,其中就包括了我和其他小伙伴一起参与的AntDesign组件库,于上周终于发布了第一个版本0 ...

  7. ASP.NET Core 中文文档 第四章 MVC(3.6.2 )自定义标签辅助类(Tag Helpers)

    原文:Authoring Tag Helpers 作者:Rick Anderson 翻译:张海龙(jiechen) 校对:许登洋(Seay) 示例代码查看与下载 从 Tag Helper 讲起 本篇教 ...

  8. ASP.NET Core 静态文件及JS包管理器(npm, Bower)的使用

    在 ASP.NET Core 中添加静态文件 虽然ASP.NET主要大都做着后端的事情,但前端的一些静态文件也是很重要的.在ASP.NET Core中要启用静态文件,需要Microsoft.AspNe ...

  9. 基础教程:ASP.NET Core 2.0 MVC筛选器

    问题 如何在ASP.NET Core的MVC请求管道之前和之后运行代码. 解 在一个空的项目中,更新 Startup 类以添加MVC的服务和中间件. publicvoid ConfigureServi ...

随机推荐

  1. 4.如何实现用MTQQ通过服务器实现订阅者和发布者的通讯

    1.本例子意在用moquette服务器来作为消息转发,通过订阅者订阅消息,发布者发布消息,然后发布者的消息可以通过服务器转发给订阅者 服务器例子: https://github.com/andsel/ ...

  2. win 结束占用端口的进程

    在web开发的时候,经常开启http服务器监听某个端口,例如npm run dev等等 以下介绍通过命令行结束占用端口的程序(注:测试环境为win10) 1.启动命令行 2.在命令行输入 netsta ...

  3. MaintainableCSS 《可维护性 CSS》 --- ID 篇

    ID 从语法上讲,当只有一个实例时,我们应该使用一个ID.当有多个时,我们应该使用一个 class. 但是,ID 作用的优先级高于 class ,在我们想覆盖一个样式的时候,这就会导致问题. 为了演示 ...

  4. Python3.5学习笔记-文件操作

    在Python中,操作文件对象使用open函数来创建,下表列出了常用的操作file的函数: 序号 方法及描述 1.file.close() 关闭文件.关闭后文件不能再进行读写操作. 2.file.fl ...

  5. mysql中的limit

    mysql中常使用limit做分页查询,使用方法也很简单: SELECT * FROM table LIMIT [offset,] rows #注: offset-偏移量,rows查询返回的行数 -- ...

  6. haproxy+tomcat集群搭建

    web1和web2的部署可参考我之前的文章<Tomcat集群搭建>,这里就省去该过程了. #安装haproxy- .tar.gz cd haproxy-/ make TARGET=linu ...

  7. HTML5+CSS3静态页面项目-BusinessTheme的总结

    因为期末考试.调整心态等等的种种原因,距离上一次的项目练习已经过了很久了,今天终于有时间继续练习HTML5+CSS3的页面架构和设计稿还原.设计图很长,整个页面分为了好几个区域,所以就不放完整的设计图 ...

  8. P2286 [HNOI2004]宠物收养场

    题目描述 凡凡开了一间宠物收养场.收养场提供两种服务:收养被主人遗弃的宠物和让新的主人领养这些宠物. 每个领养者都希望领养到自己满意的宠物,凡凡根据领养者的要求通过他自己发明的一个特殊的公式,得出该领 ...

  9. OpenStack(企业私有云)万里长征第四步——DevStack整体安装规划及使用

    一.前言 前期成功通过DevStack安装OpenStack,现将从机房规划到虚拟机搭建的整个过程总结如下,以供日后查阅或有需之人参考. 二.机房规划 这个整个安装过程的重点,能不能成功就看规划的如何 ...

  10. CSS变量variable

    前面的话 一直以来,CSS中是没有变量而言的,要使用 CSS 变量,只能借助 SASS 或者 LESS 这类预编译器.新的草案发布之后,直接在 CSS 中定义和使用变量不再是幻想了.本文将详细介绍CS ...