自定义标记助手
你可以通过实现 ITagHelper
或从便利类 TagHelper
派生来创建自己的标记助手。
- 默认约定是定位与助手名称匹配的 html 标记,而不使用可选的 TagHelper 后缀。例如,
WidgetTagHelper
将以<widget>
标签为目标。 [HtmlTargetElement]
属性可用于进一步控制目标标签- 该类的任何公共属性都可以作为剃刀标记中的属性赋值。例如,公共属性
public string Title {get; set;}
可以被赋予一个值<widget title="my title">
- 默认情况下,标记帮助程序将标记助手的 Pascal 环境 C#类名称和属性转换为较低的 kebab 案例。例如,如果你省略使用
[HtmlTargetElement]
并且类名是WidgetBoxTagHelper
,那么在 Razor 你会写<widget-box></widget-box>
。 Process
和ProcessAsync
包含渲染逻辑。两者都接收上下文参数,其中包含有关正在呈现的当前标记的信息以及用于自定义呈现结果的输出参数。
需要将包含自定义标记助手的任何程序集添加到 _ViewImports.cshtml 文件中(注意它是要注册的程序集,而不是命名空间):
@addTagHelper *, MyAssembly
示例窗口小部件自定义标记助手
以下示例创建一个自定义窗口小部件标记帮助程序,它将以 razor 标记为目标,如:
<widget-box title="My Title">This is my content: @ViewData["Message"]</widget-box>
哪个将呈现为:
<div class="widget-box">
<div class="widget-header">My Title</div>
<div class="widget-body">This is my content: some message</div>
</div>
创建此类标记帮助程序所需的编码如下:
[HtmlTargetElement("widget-box")]
public class WidgetTagHelper : TagHelper
{
public string Title { get; set; }
public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
{
var outerTag = new TagBuilder("div");
outerTag.Attributes.Add("class", output.TagName);
output.MergeAttributes(outerTag);
output.TagName = outerTag.TagName;
//Create the header
var header = new TagBuilder("div");
header.Attributes.Add("class", "widget-header");
header.InnerHtml.Append(this.Title);
output.PreContent.SetHtmlContent(header);
//Create the body and replace original tag helper content
var body = new TagBuilder("div");
body.Attributes.Add("class", "widget-body");
var originalContents = await output.GetChildContentAsync();
body.InnerHtml.Append(originalContents.GetContent());
output.Content.SetHtmlContent(body);
}
}