asp.net TagHelper根据条件向元素添加class
在 Asp.Net MVC中，我们可以有条件地添加类，如下所示：
HTML 全选
<div class="choice @(Model.Active?"active":"")">
</div>如何通过使用标签助手和删除其他部分来做到这一点。
解决方案
能够通过以下标签添加条件 css 类Helper 提供。这个代码像AnchorTagHelper asp-route-*一样，用于添加路由值的行为。
C# 全选
[HtmlTargetElement("div", Attributes = ClassPrefix + "*")]
public class ConditionClassTagHelper : TagHelper
{
private const string ClassPrefix = "condition-class-";
[HtmlAttributeName("class")]
public string CssClass { get; set; }
private IDictionary<string, bool> _classValues;
[HtmlAttributeName("", DictionaryAttributePrefix = ClassPrefix)]
public IDictionary<string, bool> ClassValues
{
get {
return _classValues ?? (_classValues =
new Dictionary<string, bool>(StringComparer.OrdinalIgnoreCase));
}
set{ _classValues = value; }
}
public override void Process(TagHelperContext context, TagHelperOutput output)
{
var items = _classValues.Where(e => e.Value).Select(e=>e.Key).ToList();
if (!string.IsNullOrEmpty(CssClass))
{
items.Insert(0, CssClass);
}
if (items.Any())
{
var classes = string.Join(" ", items.ToArray());
output.Attributes.Add("class", classes);
}
}
}在 _ViewImports.cshtml 添加对 taghelper 的引用，如下所示
C# 全选
@addTagHelper "*, WebApplication3"在.cshtml中使用taghelper：
HTML 全选
<div condition-class-active="Model.Active" condition-class-show="Model.Display">
</div>Active = true 和 Display = true 的结果：
HTML 全选
<div class="active show">
</div>
版权声明：本文为YES开发框架网发布内容,转载请附上原文出处连接
post 管理员
