TagHelpers nidificazione in ASP.NET MVC Nucleo 6

Question

L'ASP.NET Nucleo TagHelper documentation fornisce il seguente esempio:

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

Questo può quindi essere utilizzato nel vostro Razor .cshtml come segue:

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

Questo genererà il seguente codice 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> 

Questa è una sintassi di tag helper piuttosto brutta. C'è un modo per nidificare un altro tag helper e ottenere pieno intelli-sense in modo che l'unico figlio consentito di informazioni sul sito web possa essere contestualizzato? Vedere il seguente esempio:

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

Nel mio caso d'uso, l'elemento sito-informazione ha già molti attributi e voglio aggiungere uno o più elementi annidati separati.

UPDATE

ho sollevato this suggerimento sulla pagina ASP.NET GitHub per implementare questa funzione per TagHelpers.

Answer 1

È possibile annidare i tag helper, anche se forse altre opzioni come componenti di visualizzazione, viste parziali o modelli di visualizzazione potrebbero essere più adatti allo scenario descritto dall'OP.

Questo potrebbe essere un semplice bambino tag aiutante:

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

E questo potrebbe anche essere un altro semplice genitore tag aiutante:

[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 una vista rasoio si potrebbe quindi scrivere quanto segue:

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

che sarebbe reso come:

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

Puoi opzionalmente rispettare aiutanti di tag per essere nidificati in un modo particolare:

• Usa [RestrictChildren("child-tag", "another-tag")] nel tag genitore aiuto per limitare il tag nidificato consentito helper
• Utilizzare il parametro ParentTag quando si dichiara l'helper di tag figlio per far sì che il tag venga annidato all'interno di un determinato tag principale [HtmlTargetElement("child-tag", ParentTag = "parent-tag")]