ネストTagHelpers 6

Question

ASP.NETコアTagHelper documentationは、次の例を示します：

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

を次のように

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で使用することができますこれにより、次の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> 

を、ウェブサイトの情報要素は、すでに多くの属性を持っており、私は1つの以上別のネストされた要素を追加します。

UPDATE

私はTagHelpersため、この機能を実装するためにASP.NETのGitHubページthis提案を調達しています。

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")]