태그 도우미로 루핑을 만들 수있는 방법이 있습니까?

Question

내부 태그 도우미를 반복 (반복기처럼)하는 태그 도우미를 만들 수있는 방법이 있습니까? 내가 면도기의 foreach와 함께 할 수있어하지만 내 HTML에서 C# 코드로 전환 할 필요없이 작업을 수행하는 방법을 알아 내려고 노력

<big-ul iterateover='x'> 
    <little-li value='uses x somehow'></little-li> 
</bg-ul> 

: 그 같은입니다.

Answer 1

TagHelperContext.Items 속성을 사용하면 가능합니다. doc :

ITagHelpers과 통신하는 데 사용되는 항목 모음을 가져옵니다. 이 System.Collections.Generic.IDictionary<TKey, TValue>은이 컬렉션에 추가 된 항목이 다른 하위 항목을 타겟팅하는 다른 ITagHelpers에만 표시되도록하기 위해 copy-on-write입니다.

이것은 부모 태그 도우미의 객체를 자식 객체로 전달할 수 있다는 것을 의미합니다.

보기에

public class Employee 
{ 
    public string Name { get; set; } 
    public string LastName { get; set; } 
} 

, 당신은 (예를 들어) 사용합니다 :

@{ 
    var mylist = new[] 
    { 
     new Employee { Name = "Alexander", LastName = "Grams" }, 
     new Employee { Name = "Sarah", LastName = "Connor" } 
    }; 
} 
<big-ul iterateover="@mylist"> 
    <little-li></little-li> 
</big-ul> 

두 태그 예를 들어

,의 당신이 Employee의 목록을 반복한다고 가정하자 도우미 :

[HtmlTargetElement("big-ul", Attributes = IterateOverAttr)] 
public class BigULTagHelper : TagHelper 
{ 
    private const string IterateOverAttr = "iterateover"; 

    [HtmlAttributeName(IterateOverAttr)] 
    public IEnumerable<object> IterateOver { get; set; } 

    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output) 
    { 
     output.TagName = "ul"; 
     output.TagMode = TagMode.StartTagAndEndTag; 

     foreach(var item in IterateOver) 
     { 
      // this is the key line: we pass the list item to the child tag helper 
      context.Items["item"] = item; 
      output.Content.AppendHtml(await output.GetChildContentAsync(false)); 
     } 
    } 
} 

[HtmlTargetElement("little-li")] 
public class LittleLiTagHelper : TagHelper 
{ 
    public override void Process(TagHelperContext context, TagHelperOutput output) 
    { 
     // retrieve the item from the parent tag helper 
     var item = context.Items["item"] as Employee; 

     output.TagName = "li"; 
     output.TagMode = TagMode.StartTagAndEndTag; 

     output.Content.AppendHtml($"<span>{item.Name}</span><span>{item.LastName}</span>"); 
    } 
}