Вложение TagHelpers в ASP.NET MVC ядра 6

Question

ASP.NET Ядро TagHelper documentation приводит следующий пример:

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 следующим:

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

Это приведет к созданию следующего 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> 

Это довольно уродливый синтаксис помощника тега. Есть ли способ вставить другой помощник в тег и получить полный интеллигентный смысл, так что единственный разрешенный ребенок веб-информации может быть контекстом? Смотрите пример ниже:

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

В моем случае использования, сайт-информационный элемент уже имеет много атрибутов, и я хочу, чтобы добавить один или несколько отдельных вложенных элементов.

UPDATE

Я поднял this предложение на странице ASP.NET GitHub, чтобы реализовать эту функцию для TagHelpers.

Answer 1

Возможно, вы можете вложить тег-помощники, хотя, возможно, другие варианты, такие как компоненты просмотра, частичные представления или шаблоны отображения, могут быть лучше подходят для сценария, описанного OP.

Это может быть очень простой ребенок тега помощник:

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

И это также может быть другим простым родителя тега помощник:

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

В свете бритвы вы могли бы укажите следующее:

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

Вы можете необязательно применять теги хелперы быть вложенными определенным образом:

• Использование [RestrictChildren("child-tag", "another-tag")] в помощнике родительский тег для ограничения допустимого вложенного тега помощники
• Используйте параметр ParentTag при объявлении помощника дочернего тега для обеспечения того, чтобы тег был вложен внутри определенного родительского тега [HtmlTargetElement("child-tag", ParentTag = "parent-tag")]