Is there any way to create looping with Tag Helper

问题:

Is there any way to create a Tag Helper that somehow iterates (repeater like) over the inner tag helpers? That is, something like:

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

I know I can do it with razor foreach but trying to figure out how to do it without having to switch to c# code in my html.

回答1:

It's possible, by using the TagHelperContext.Items property. From the doc:

Gets the collection of items used to communicate with other ITagHelpers. This System.Collections.Generic.IDictionary<TKey, TValue> is copy-on-write in order to ensure items added to this collection are visible only to other ITagHelpers targeting child elements.

What this means is that you can pass objects from the parent tag helper to its children.

For example, let's assume you want to iterate over a list of Employee :

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

In your view, you'll use (for example):

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

and the two tag helpers:

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