有没有什么办法可以用Tag Helper创建循环?
问题描述:
有没有什么办法可以创建一个标签帮助器,它以某种方式在内部标签帮助器上进行迭代(中继器)?也就是说,这样的:有没有什么办法可以用Tag Helper创建循环?
<big-ul iterateover='x'>
<little-li value='uses x somehow'></little-li>
</bg-ul>
我知道我可以用剃刀的foreach做,而是试图找出如何做到这一点,而无需切换到C#代码在我的HTML。
答
有可能通过使用TagHelperContext.Items
属性。来自doc:
获取用于与其他
ITagHelpers
进行通信的项目的集合。这System.Collections.Generic.IDictionary<TKey, TValue>
是写入时复制,以确保添加到此集合的项目仅可见于其他定位子元素的ITagHelpers
。
这意味着您可以将对象从父标记助手传递给子对象。
例如,假设你要遍历的Employee
列表:
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>
和两个标签助手:
[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>");
}
}
我在taghelpers下找到了这篇文章的一些注释https://blogs.msdn.microsoft.com/webdev/2015/09/02/宣布可用性-的-ASP-净-5-联蛋白β7/ –