用于有条件地将类添加到元素的 ASP.NET Core 标记助手答案

【问题标题】：ASP.NET Core tag helper for conditionally adding a class to an element用于有条件地将类添加到元素的 ASP.NET Core 标记助手
【发布时间】：2017-07-09 07:00:23
【问题描述】：

在 Asp.Net MVC 中，我们可以有条件地添加类，如下代码：

<div class="choice @(Model.Active?"active":"")">
</div>

如何通过使用 tagHelper 并删除条件中的 else 部分来做到这一点。

【问题讨论】：

标签： asp.net-core tag-helpers

【解决方案1】：

没有默认的方式来做你所要求的。您必须编写一个 TagHelper 来为您执行该逻辑。阿卡

[HtmlTargetElement(Attributes = "asp-active")]
public class FooTagHelper : TagHelper
{
    [HtmlAttributeName("asp-active")]
    public bool Active { get; set; }

    public override void Process(TagHelperOutput output, TagHelperContext context)
    {
        if (Active)
        {
            // Merge your active class attribute onto "output"'s attributes.
        }
    }
}

然后 HTML 看起来像：

<div class="choice" asp-active="Model.Active"></div>

【讨论】：

【解决方案2】：

按照 tagHelper 提供的添加条件 css 类的能力。这段代码类似于 AnchorTagHelper asp-route-* 用于添加路由值。

[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 的引用，如下所示

@addTagHelper "*, WebApplication3"

在视图中使用 tagHelper：

<div condition-class-active="Model.Active" condition-class-show="Model.Display">
</div>

Active = true 和 Display = true 的结果是：

<div class="active show">
</div>

【讨论】：

是否可以使用后缀，而不仅仅是前缀？说class-*-if?
@Serge 从内联文档中，* 可能只出现在末尾。所以今天可能是不可能的。
当我将上面的代码与示例一起使用时，它呈现<div condition-class-active="condition-class-active"></div>
@MohammadAkbari 请参阅stackoverflow.com/questions/48251583/…
@mheptinstall：你有一个拼写错误。您应该使用 condition-class-active 而不是 conditional-class-active