首页 > 编程语言> 文章详细

ASP.NET Core – TagHelper

2022-03-27 22:31:37 阅读：196 来源： 互联网

标签：Core ASP Process attribute class selector output NET public

前言

以前写的 Asp.net core 学习笔记之 Tag Helper, 这篇是整理版.

介绍

TagHelper 有点像 Angular 的指令 directive, 绝大部分情况下都是用来装修 element 的. 比如 add class.

下面是 ASP.NET Core build-in 的 tag, 应该可以感觉出来它都用在什么地方了. 我用它来实现 router link active 的功能.

Create Tag Helper

[HtmlTargetElement(Attributes = "[routerLinkActive]")]
public class RouterLinkActiveTagHelper : TagHelper
{
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        base.Process(context, output);
    }
}

创建一个 RouterLinkActiveTagHelper class 继承 TagHelper

HtmlTargetElement 负责定义 selector, 和 Angular 一样它需要一个 selector 做匹配

Process 负责对 element 做任何修改, 比如 add class, innerHtml, appendHtml 等等.

还有一种 selector 是 for tag 的. 比较少用到, 也是和 Angular 一样的概念, directive 通常是匹配 attribute 但其实是可以匹配 element tag 的 (有些 Angular 玩家都不知道呢).

[HtmlTargetElement("my-email", TagStructure = TagStructure.NormalOrSelfClosing)]

要使用前需要添加 view import

然后就可以用了

<body>
  <a routerLinkActive href="/contact">Contact</a>
</body>

data-* 和 asp-* 是不合格的 selector

asp- 是 ASP.NET Core 保留和专用的 selector, 所以我们用不到.

data- 不能用是因为

所以切记, 不要用 asp- 和 data- 作为 selector

@Input()

@input 原至 Angular, 就是在使用指令的时候, 传入一些变量作为操控.

<a routerLinkActive company-name="Abc" company-age="15" href="/contact">Contact</a>

传入 company name 和 age

通过 property 接收

[HtmlAttributeName("company-name")]
public string CompanyName { get; set; } = "";

public int? CompanyAge { get; set; }

它默认是 kebab-case map to PascalCase, 如果想取别名就使用 HtmlAttributeName 声明就可以了.

有自动做类型转换. empty string != null 哦, null 指的是完全没有放 attribute.

Process

public override void Process(TagHelperContext context, TagHelperOutput output)
{
    if (output.Attributes.TryGetAttribute("class", out var attribute))
    {
        var value = attribute.Value; // readonly
    }
    output.AddClass("active", HtmlEncoder.Default);
    output.Attributes.Add("data-attribute", "value");
    output.Content.SetHtmlContent("<h1>Email1</h1>");
    output.Content.AppendHtml("<h1>Email2</h1>");
    base.Process(context, output);
}

常见的操作有, add class, append html, inner html, get attribute 等等.

Read ViewContext

ViewContext 包含了常用到的 ViewBag, ViewData, RouteData, HttpContext 等等.

[ViewContext]
[HtmlAttributeNotBound]
public ViewContext ViewContext { get; set; } = null!;

通过 ViewContent Attribute 声明就可以了.

标签：Core,ASP,Process,attribute,class,selector,output,NET,public
来源： https://www.cnblogs.com/keatkeat/p/16064925.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9