TagHelpers làm tổ trong ASP.NET MVC Lõi 6

Question

Các ASP.NET Lõi TagHelper documentation đưa ra ví dụ sau đây:

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

này sau đó có thể được sử dụng trong Razor bạn .cshtml như sau:

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

Điều này sẽ tạo ra HTML sau:

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

Đây là cú pháp trợ giúp thẻ khá xấu xí. Có cách nào để tổ chức một trình trợ giúp thẻ khác và có đầy đủ cảm giác intelli để chỉ cho phép con của trang web-thông tin có thể là bối cảnh? Xem ví dụ dưới đây:

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

Trong trường hợp sử dụng của tôi, yếu tố trang web-thông tin đã có nhiều thuộc tính và tôi muốn thêm một hoặc nhiều yếu tố lồng riêng biệt.

CẬP NHẬT

Tôi đã lớn lên this gợi ý trên trang ASP.NET GitHub để thực hiện tính năng này cho TagHelpers.

Answer 1

Bạn chắc chắn có thể lồng thẻ trợ giúp, mặc dù có thể các tùy chọn khác như thành phần xem, xem một phần hoặc mẫu hiển thị có thể phù hợp hơn cho trường hợp được mô tả bởi OP.

Đây có thể là rất đơn giản con thẻ helper:

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

Và đây cũng có thể là một đơn giản mẹ thẻ helper:

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

Trong một cái nhìn dao cạo bạn có thể sau đó viết như sau:

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

Trong đó sẽ được trả lại như:

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

Bạn có thể tùy thực thi những người giúp đỡ thẻ để được lồng vào nhau một cách đặc biệt:

• Sử dụng [RestrictChildren("child-tag", "another-tag")] trong thẻ mẹ helper để hạn chế thẻ lồng nhau cho phép người giúp đỡ
• Sử dụng tham số ParentTag khi khai báo trình trợ giúp thẻ con để thực thi thẻ được lồng trong thẻ cha cụ thể [HtmlTargetElement("child-tag", ParentTag = "parent-tag")]