有什么方法可以使用Tag Helpers创建循环？ [英] Is there any way to create looping with Tag Helpers?

问题描述

有什么方法可以创建一个以某种方式在内部标签助手上进行迭代（重复）的标签助手吗？即，类似于：

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>

我知道我可以用剃刀foreach来做到这一点，但试图弄清楚该如何做而不必

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.

推荐答案

有可能通过使用 TagHelperContext.Items 属性。从 doc ：

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

获取用于与其他 ITagHelpers 通信的项目的集合。此 System.Collections.Generic.IDictionary< TKey，TValue> 是写时复制的，以确保添加到此集合的项目仅对其他<$ c $可见。 c> ITagHelpers 定位子元素。

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.

例如，假设您要遍历 Employee 的列表：

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>

和两个标签助手：

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

这篇关于有什么方法可以使用Tag Helpers创建循环？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！