Is there a way to create a loop using tag helpers?

Question

Is there a way to create a tag helper that somehow iterates (e.g. a repeater) over internal tag helpers? That is, something like:

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

I know that I can do this with a foreach razor, but trying to figure out how to do this without going to the C # code in my html.

Answer 1

This is possible using the TagHelperContext.Items property. From doc :

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

This means that you can pass objects from the parent helper tag to your children.

For example, suppose you want to iterate over a list from Employee :

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

In your opinion, you will 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 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>"); } }