在ASP.NET MVC 5 6嵌套TagHelpers [英] Nesting TagHelpers in ASP.NET 5 MVC 6

问题描述

在ASP.NET 5 TagHelper文档< /一>给出了以下示例：

The ASP.NET 5 TagHelper documentation gives the following example:

public class WebsiteContext
{
    public Version Version { get; set; }
    public int CopyrightYear { get; set; }
    public bool Approved { get; set; }
    public int TagsToShow { get; set; }
}

[TargetElement("website-information")]
public class WebsiteInformationTagHelper : TagHelper
{
    public WebsiteContext Info { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "section";
        output.Content.SetContent(
            $@"<ul><li><strong>Version:</strong> {Info.Version}</li>
            <li><strong>Copyright Year:</strong> {Info.CopyrightYear}</li>
            <li><strong>Approved:</strong> {Info.Approved}</li>
            <li><strong>Number of tags to show:</strong> {Info.TagsToShow}</li></ul>");
        output.TagMode = TagMode.StartTagAndEndTag;
    }
}

这然后可以在你的剃须刀.cshtml使用如下：

This can then be used in your Razor .cshtml as follows:

<website-information info="new WebsiteContext {
    Version = new Version(1, 3),
    CopyrightYear = 1790,
    Approved = true,
    TagsToShow = 131 }"/>

这会生成以下HTML：

This will generate the following HTML:

<section>
    <ul>
        <li><strong>Version:</strong> 1.3</li>
        <li><strong>Copyright Year:</strong> 1790</li>
        <li><strong>Approved:</strong> true</li>
        <li><strong>Number of tags to show:</strong> 131 </li>
    </ul>
</section>

这是pretty丑陋标签帮手语法。是否有某种方式来巢另一个标记辅助即可获得完全的智能影音感，这样的网站信息，只允许孩子能方面？见下面的例子：

This is pretty ugly tag helper syntax. Is there some way to nest another tag helper and get full intelli-sense so that the only allowed child of website-information can be context? See example below:

<website-information>
    <context version="1.3" copyright="1790" approved tags-to-show="131"/>
</website-information>

在我的使用情况下，本网站信息元素已拥有众多的属性，我想添加一个或更多单独的嵌套元素。

In my use case, the website-information element already has many attributes and I want to add one or more separate nested elements.

更新

我提出的ASP.NET页面GitHub的这个建议，以实现此功能为TagHelpers。

I have raised this suggestion on the ASP.NET GitHub page to implement this feature for TagHelpers.

推荐答案

您当然可以嵌套代码助手，虽然像视图组件，局部视图或显示模板，也许其他的选择可能更适合由OP描述的场景。

You can certainly nest tag helpers, although maybe other options like view components, partial views or display templates might be better suited for the scenario described by the OP.

这可能是一个非常简单的孩子标签帮手：

This could be a very simple child tag helper:

[TargetElement("child-tag")]
public class ChildTagHelper : TagHelper
{
    public string Message { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        // Create parent div
        output.TagName = "span";
        output.Content.SetContent(Message);
        output.TagMode = TagMode.StartTagAndEndTag;     
    }
}

而这也可能是另一种简单的父标签帮手：

[TargetElement("parent-tag")]
public class ParentTagHelper: TagHelper
{
    public string Title { get; set; }

    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {            
        output.TagName = "div";

        // Add some specific parent helper html
        var header = new TagBuilder("h1");
        header.Attributes.Add("class", "parent-title");
        header.SetInnerText(this.Title);
        output.PreContent.SetContent(header);

        // Set the inner contents of this helper(Will process any nested tag helpers or any other piece of razor code)
        output.Content.SetContent(await context.GetChildContentAsync());            
    }
}

在剃刀视图，那么你可以编写如下：

In a razor view you could then write the following:

<parent-tag title="My Title">
    <child-tag message="This is the nested tag helper" />
</parent-tag>

这将是呈现为：

<div>
    <h1 class="parent-title">My Title</h1>
    <span>This is the nested tag helper</span>
</div>

我使用嵌套的标签助手解决了OP的情况看，最大的问题是，有没有办法执行，只有＆LT;儿童标签＆GT; 在里面嵌套＆LT;父标签＆GT; 也没多少时间就可以出现。例如，以下将是完全有效的：

The biggest problem I see with solving the OP scenario using nested tag helpers is that there is no way to enforce that only <child-tag> is nested inside <parent-tag> nor how many times it can appear. For example, the following would be perfectly valid:

<parent-tag title="My Title">
    <child-tag message="This the first nested tag helper" />
    <child-tag message="This the second nested tag helper" />
    <div asp-validation-summary="ValidationSummary.All" class="text-danger"></div>
</parent-tag>

编辑 - beta8

在beta8的 [TargetElement] 属性已改为 [HtmlTargetElement] 。检查公告。

In beta8 the [TargetElement] attribute has been changed into [HtmlTargetElement]. Check the announcement.

这篇关于在ASP.NET MVC 5 6嵌套TagHelpers的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！