Nesting TagHelpers in ASP.NET MVC-Core 6

Question

Die ASP.NET-Core-TagHelper documentation das folgende Beispiel gibt:

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; 
    } 
} 

Dies kann dann in Ihrem Rasierer verwendet werden .cshtml wie folgt:

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

Dies erzeugt den folgenden HTML-Code:

<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> 

Dies ist ziemlich hässlich Tag Helfersyntax. Gibt es eine Möglichkeit zu nisten andere Tag Helfer und erhalten volle Intelli-Sense, so dass die einzige erlaubte Kind von Website-Informationen Kontext sein kann? Siehe Beispiel unten:

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

In meinem Anwendungsfall, das Website-Informationselement hat bereits viele Attribute und ich mag ein oder mehr separate verschachtelte Elemente hinzuzufügen.

UPDATE

ich this Vorschlag auf der ASP.NET GitHub Seite angehoben haben diese Funktion für TagHelpers zu implementieren.

Answer 1

Sie können sicherlich Tag-Helfer verschachteln, obwohl möglicherweise andere Optionen wie Ansichtskomponenten, Teilansichten oder Anzeigevorlagen für das vom OP beschriebene Szenario besser geeignet sind.

[HtmlTargetElement("child-tag", ParentTag="parent-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;  
    } 
} 

Und das könnte auch eine weitere einfache Eltern Tag Helfer:

[HtmlTargetElement("parent-tag")] 
[RestrictChildren("child-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.InnerHtml.Append(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 output.GetChildContentAsync());    
    } 
} 

In einer Rasierklinge Blick dann konnte man

Dies könnte ein sehr einfaches Kind Tag Helfer schreiben Sie die folgenden:

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

, die als wiedergegeben werden würden:

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

Sie können optional Tag Helfer erzwingen in einer bestimmten Art und Weise verschachtelt werden:

• Verwenden [RestrictChildren("child-tag", "another-tag")] in den übergeordneten Tag Helfern den erlaubten verschachtelten Tag zu begrenzen, Helfer
• Verwenden Sie den Parameter ParentTag, wenn Sie den untergeordneten Tag-Helfer deklarieren, um das Tag zu erzwingen, das innerhalb eines bestimmten Eltern-Tags geschachtelt wird [HtmlTargetElement("child-tag", ParentTag = "parent-tag")]