标签助手必须实现该接口ITagHelper
(正如所指出的@NTaylorMullen, the TagHelper
类只是一个方便的类,您可以在实现它时使用它),这迫使您使用这些方法Process
and ProcessAsync
,所以你不能依赖在 a 中添加内容Dispose
method.
但是,您可以完全控制输出内容,因此您可以根据需要替换/修改它。例如,您的小部件标签助手的快速近似(使用1.0版本的框架):
[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);
}
}
在您的剃须刀中,您将拥有:
<widget-box title="My Title">Yay for content!</widget-box>
将呈现为:
<div class="widget-box">
<div class="widget-header">My Title</div>
<div class="widget-body">Yay for content!</div>
</div>
不要忘记通过添加一个来在程序集中注册标签助手@addTagHelper
指令给_ViewImports.cshtml文件。例如,这将在我的应用程序中注册所有助手:
@addTagHelper *, WebApplication2
旧的 beta7 代码
- 在 beta7 中你必须使用
[TargetElement]
属性。
- TagBuilder 类有一个
SetInnerText
您可以使用将其上下文设置为文本的方法。
代码如下:
[TargetElement("widget-box")]
public class WidgetTagHelper : TagHelper
{
private IHtmlEncoder encoder;
public WidgetTagHelper(IHtmlEncoder encoder)
{
this.encoder = encoder;
}
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.SetInnerText(this.Title);
output.PreContent.SetContent(header);
//Create the body and replace original tag helper content
var body = new TagBuilder("div");
body.Attributes.Add("class", "widget-body");
var originalContents = await context.GetChildContentAsync();
using (var writer = new StringWriter())
{
body.TagRenderMode = TagRenderMode.StartTag;
body.WriteTo(writer, encoder);
originalContents.WriteTo(writer, encoder);
body.TagRenderMode = TagRenderMode.EndTag;
body.WriteTo(writer, encoder);
output.Content.SetContent(writer.ToString());
}
}
}
旧的 beta5 代码
- 有一个
InnerHtml
标签助手中的属性。
- 有一个
ToHtmlString
标签助手中的方法用于将它们呈现为 html。
代码如下:
[TargetElement("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 = this.Title;
output.PreContent.SetContent(header.ToHtmlString(TagRenderMode.Normal).ToString());
//Create the body and replace original tag helper content
var body = new TagBuilder("div");
body.Attributes.Add("class", "widget-body");
var originalContents = await context.GetChildContentAsync();
body.InnerHtml = originalContents.GetContent();
output.Content.SetContent(body.ToHtmlString(TagRenderMode.Normal).ToString());
}
}