ASP.NET Core MVC – 自定义 Tag Helpers

介绍

在之前的内容中,我们谈到了Tag Helpers,我们还谈到了 caching Tag Helpers和form Tag Helpers。

通过创建自定义Tag Helpers,我们可以扩展现有元素或创建我们自己的元素。

Tag Helper是实现ITagHelper接口类的统称。MVC为我们提供了该接口的抽象类TagHelper,它位于 Microsoft.AspNetCore.Razor.Runtime 程序集中。因此,我们可以直接从TagHelper类继承,我们主要需要实现以下方法:

    public virtual void Process(TagHelperContext context, TagHelperOutput output);    
   
   public virtual Task ProcessAsync(TagHelperContext context, TagHelperOutput output);

Process方法是具体的逻辑实现。它需要传递 Tag Helper上下文的实例和Tag Helper输出(我们可以用它来读取和更改Tag Helper范围内的实际内容)。

简单示例

我们创建自己的Tag Helper。假设我们将使用<simple> </simple>Tag Helper,其中的内容将是粗体。

我们将要创建一个名为CustomTagHelpers的新项目。因此,程序集名称也将是 CustomTagHelpers

首先,我们创建一个新的Tag Helper。使用Visual Studio,我们可以这样操作添加 - > 新建项 - > Web - > Razor 标记帮助器

这是默认生成的代码:

    public class SimpleTagHelper : TagHelper{       
        public override void Process(TagHelperContext context, TagHelperOutput output)        {}}

我们需要做的是将输出标签名称设置为 strong

    public class SimpleTagHelper : TagHelper{     
      public override void Process(TagHelperContext context, TagHelperOutput output)        {output.TagName = "strong";          }}

为了能够在我们的视图中使用新创建的Tag Helper,我们必须在 ViewImports.cshtml 文件中添加下面这一行:

    @addTagHelper *, CustomTagHelpers

  @addTagHelper 指令后可以注意到两个字符串:

  • 它的第二部分 - CustomTagHelpers 表示从哪个程序集名称里加载Tag Helper;

  • 第一个字符串在  @addTagHelper 指令之后表示要加载的TagHelper的名称,通配符(*)表示我们将使用给定程序集中所有Tag Helper。

如果我们现在转到其中一个页面并写入如下代码:

    <simple>CodingBlast</simple>

我们将在Visual Studio中看到这个simple 的标签已经变成紫色,并且被识别为Tag Helper。如果我们运行应用程序,我们将以粗体显示此文本。

如果我们查看HTML输出,我们可以看到simple 标签被strong所替代:

    <strong>CodingBlast</strong>

改变属性

我们来构建另外一个Tag Helper,作为img标签的另一种方式。我们将添加一个名称是CuteTagHelper的新的Tag Helper。

using Microsoft.AspNetCore.Razor.TagHelpers;namespace CustomTagHelpers.TagHelpers{[HtmlTargetElement("cute")]  

 public class CuteTagHelper : TagHelper{      
          public string ImageLink { get; set; }  
          public string AlternativeText { get; set; }    
         
          public override void Process(TagHelperContext context, TagHelperOutput output)        {output.TagName = "img";output.TagMode = TagMode.StartTagOnly;output.Attributes.SetAttribute("src", ImageLink);output.Attributes.SetAttribute("alt", AlternativeText);}}

如果我现在转到_.cshtml_文件并开始输入:

你可以看到 cute 的是紫色的,说明Visual Studio认为它是一个Tag Helper。此外,它为我们在CuteTagHelper类中指定的两个属性提供了智能提示。

我们在TagHelper类中指定的任何公共属性将在 .cshtml 文件中显示为一个属性。

总结

  • 使用Tag Helper,我们可以使用属性扩展现有元素或创建新元素

  • 一旦我们创建了一个Tag Helper,我们通常会有一个可重用的属性或元素

  • MVC附带的TagHelper类提供了编写Tag Helpers的方法和属性

  • Tag Helpers使用命名约定(就像MVC中的控制器一样),所以如果使用类名称CoolTagHelper,您将能够在代码中使用<cool>标签

相关文章:

  • asp.net core mvc实现伪静态功能

  • 如何在多个项目中分离Asp.Net Core Mvc的Controller和Areas

  • asp.net core 编译mvc,routing,security源代码进行本地调试

  • ASP.NET Core MVC四种枚举绑定方式

  • ASP.NET Core MVC 模型绑定用法及原理

  • ASP.NET Core MVC 控制器创建与依赖注入

  • ASP.NET Core MVC 过滤器介绍

  • ASP.NET Core MVC Tag Helpers 介绍

  • ASP.NET Core MVC – Caching Tag Helpers

  • ASP.NET Core MVC – Form Tag Helpers

原文地址:http://www.cnblogs.com/tdfblog/p/custom-tag-helpers-in-asp-net-core-mvc.html


.NET社区新闻,深度好文,微信中搜索dotNET跨平台或扫描二维码关注

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/324177.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

sqlserver建库建表建约束,删库删表删约束的示例总结

1.创建一个数据库catedb,保存在本地D盘下面的DB中&#xff0c;主数据文件的初始大小为5MB&#xff0c;最大为200MB&#xff0c;增长率为10%&#xff0c;日志文件的初始大小为3MB&#xff0c;无限制增长&#xff0c;其增长率为2MB&#xff0c;请使用sql语句检测master数据库中是…

JFreeChart(二)之饼图

转载自 JFreeChart饼图 在饼图中&#xff0c;每个扇区的弧长成正比它代表的数量。本章演示了如何使用JFreeChart 从一个给定的业务数据创建饼图。 业务数据 下面的例子描述了移动销售饼图。以下是不同移动品牌和销售(每天单位)列表。 S.N.手机品牌销售(天)1Iphone 5S202Sam…

mysql中如何将默认用户名root改成其他?

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注公众号【雄雄的小课堂】。最近&#xff0c;我的个人站上线啦&#xff0c;大家可以直接在浏览器的地址栏中输入&#xff1a;穆雄雄.com&#xff0c;轻轻敲击回车&#xff0c;即可直接进入……欢迎大家多多关注&#xff0c;多多留…

ASP.NET Core - Razor 页面介绍

简介 随着ASP.NET Core 2 即将来临&#xff0c;最热门的新事物是Razor页面。在之前的一篇文章中&#xff0c;我们简要介绍了ASP.NET Core Razor 页面。 Razor页面是ASP.NET Core的一个新功能&#xff0c;可以使基于页面的编程方式更容易&#xff0c;更高效。 大众的初步印象是…

P2153-晨跑【费用流,网络流,拆点】

前言 这是评测记录 正题 AC评测记录链接&#xff1a; https://www.luogu.org/record/show?rid7945350 大意 一个图&#xff0c;没错要求不能走重复的边和点。求走最多次的情况下路最短。 解题思路 每次行走就是一个流量在流&#xff0c;然后将边权设为1就可以保证边只能走…

从试卷中悟出的道理……

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注公众号【雄雄的小课堂】。最近&#xff0c;我的个人站上线啦&#xff0c;大家可以直接在浏览器的地址栏中输入&#xff1a;穆雄雄.com&#xff0c;轻轻敲击回车&#xff0c;即可直接进入……不管是三班还是四班&#xff0c;一听…

JFreeChart(三)之条形图

转载自 JFreeChart条形图 本章演示了如何使用JFreeChart从一个给定的业务数据创建条形图。 条形图使用不同的方位(水平或垂直)条&#xff0c;以显示不同类别的比较。图表中的一个轴(域轴)示出了特定的域进行比较&#xff0c;并在另一个轴(范围轴)表示的离散值。 业务数据 …

ASP.NET Core 快速入门(实战篇)

上篇讲了《asp.net core在linux上的环境部署》。今天我们将做几个小玩意实战一下。用到的技术和工具有mysql、websocket、AngleSharp&#xff08;爬虫html解析&#xff09;、nginx多站点部署。 NO1 留言板&#xff08;mysql的使用&#xff09; 演示&#xff1a;http://haojim…

P2053-修车【网络流,费用流】

前言 n和m搞反调半天系列 正题 AC记录链接&#xff1a; https://www.luogu.org/record/show?rid7949136 大意 又m个员工&#xff0c;n辆车&#xff0c;第j个员工修第i辆车需要T[i][j]的时间&#xff0c;求分配让顾客平均等待时间最短。 解题思路 首先先假设一个修车工要修…

走的走的居然飞起来了……

第一次坐飞机&#xff0c;终于满足了我的一个愿望了。记得之前在老家的山头上放羊时&#xff0c;远远的听到飞机想&#xff0c;我和我弟弟能把飞机目送到只剩下一条白线。。。。。一直在定睛观察飞机到底长啥样&#xff0c;那时候对于我们来说&#xff0c;能看见飞机的全面目就…

JFreeChart(四)之线型图

转载自 JFreeChart线型图 线图或折线图来显示信息为一系列由直线段连接的数据点(标记)。线图显示数据在相同的时间频率如何变化。本章从一个给定的业务数据演示如何使用JFreeChart创建线型图。 业务数据 下面的示例绘制折线图显示从1970年开始学校在不同年份开通数量。 给…

如何在Linux上使用VIM进行.Net Core开发

对于在Linux上开发.Net Core的程序员来说, 似乎都缺少一个好的IDE.Windows上有Visual Studio, Mac上有Visual Studio for Mac, 难道Linux只有Visual Studio Code了吗?Linux上有两个最好的编辑器: VIM和Emacs, 哪个更好不是这一篇的主题, 这一篇的主题是如何在Linux上简单的构建…

P2517-订货【网络流,费用流】

正题 AC链接&#xff1a; https://www.luogu.org/record/show?rid7949532 大意 有n个月&#xff0c;每个月商品价格di&#xff0c;需求量Ui。有容量为S的仓库&#xff0c;一个商品汇存一个月要m。求最低成本 解题思路 首先是月份做为点&#xff0c;成本作为费用&#xff0…

教学交流研讨会总结(一)

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注公众号【雄雄的小课堂】。最近&#xff0c;我的个人站上线啦&#xff0c;大家可以直接在浏览器的地址栏中输入&#xff1a;穆雄雄.com&#xff0c;轻轻敲击回车&#xff0c;即可直接进入……

JFreeChart(五)之XY图

转载自 JFreeChart XY图 在xy图(散点图)是根据一个数据系列组成的x和y值的列表。每个值对(x&#xff0c;y)是坐标系中的一个点。这里1值确定水平(X)位置&#xff0c;而另一个确定垂直(Y)位置。本章演示了如何使用JFreeChart从一个给定的业务数据创建XY图表。 业务数据 考虑…

服务环境搭建

文章目录Nacos服务搭建一、nacos-server 环境搭建二、nacos-mysql 环境搭建三、建 领域模型REST访问配置&#xff08;给其他语言使用&#xff09;四、nacos-server 集群搭建Nacos服务搭建 一、nacos-server 环境搭建 1、 [nacos-server主机]&#xff08;考虑到后续开发的问题…

p2762-太空飞行计划问题【网络流,最大权闭合图,最小割】

正题 AC评测记录链接&#xff1a; https://www.luogu.org/record/show?rid7965757 大意 有nn个实验,有m" role="presentation">mm个实验器材的集合GG。完成第i" role="presentation">ii个实验可以获得cici元&#xff0c;第ii个实验需…

ASP.NET Core 源码学习之Logging[1]:Introduction

在ASP.NET 4.X中&#xff0c;我们通常使用 log4net, NLog 等来记录日志&#xff0c;但是当我们引用的一些第三方类库使用不同的日志框架时&#xff0c;就比较混乱了。而在 ASP.Net Core 中内置了日志系统&#xff0c;并提供了一个统一的日志接口&#xff0c;ASP.Net Core 系统以…

全国教学交流研讨会“教学为本”主题总结

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注公众号【雄雄的小课堂】。最近&#xff0c;我的个人站上线啦&#xff0c;大家可以直接在浏览器的地址栏中输入&#xff1a;穆雄雄.com&#xff0c;轻轻敲击回车&#xff0c;即可直接进入……

JFreeChart(六)之3D饼图/条形图

转载自 JFreeChart 3D饼图/条形图 三维/3D图表是那些显示在一个三维格式。可以使用这些图表来提供更好的显示效果和清晰的信息。三维/3D饼图是饼图另外一个不错的3D效果。 3D效果可以通过添加一些额外的代码来实现&#xff0c;它会创建一个饼图3D效果。 3D饼图 请看下面的…