C# 将CSS类添加到TagHelper中的html元素

在ASP.NET核心视图中，我有以下内容：

<div class="message" message=""></div>

在下面的代码行中，我需要添加“active”作为CSS类

output.Attributes.Add("class", "active");

然而，这没有任何作用。消息只保留在类“Message”中

---

我缺少什么？

我认为您应该从属性集合中删除css类的现有

TagHelperAttribute

，并添加一个包含所有类的新类（现有类和新的“活动”类）

下面的代码应该可以工作

var existingClass = output.Attributes.FirstOrDefault(f => f.Name == "class");
var cssClass = string.Empty;
if (existingClass != null)
{
    cssClass = existingClass.Value.ToString();       
}
cssClass = cssClass + " active";
var ta = new TagHelperAttribute("class", cssClass);
output.Attributes.Remove(existingClass);
output.Attributes.Add(ta);

---

@Shyju的答案基本上是正确的，但是有很多无关的代码是不必要的。以下内容足以在ASP.NET Core 2.0中处理此问题：

var classes = output.Attributes.FirstOrDefault(a => a.Name == "class")?.Value;
output.Attributes.SetAttribute("class", $"active {classes}");

---

这里的其他答案不检查当前css类以避免重复值。在这里，我编写了一个扩展来添加一个带有适当检查的css类，以确保输出时html干净：

public static class GeneralExtionsions
{
    //the white space chars valid as separators between every two css class names
    static readonly char[] spaceChars = new char[] { ' ', '\t', '\r', '\n', '\f' };

    /// <summary> Adds or updates the specified css class to list of classes of this TagHelperOutput.</summary>
    public static void AddCssClass(this TagHelperOutput output, string newClass)
    {
        //get current class value:
        string curClass = output.Attributes["class"]?.Value?.ToString(); //output.Attributes.FirstOrDefault(a => a.Name == "class")?.Value?.ToString();

        //check if newClass is null or equal to current class, nothing to do
        if (string.IsNullOrWhiteSpace(newClass) || string.Equals(curClass, newClass, StringComparison.OrdinalIgnoreCase))
        {
            return;
        }

        //append newClass to end of curClass if curClass is not null and does not already contain newClass:
        if (!string.IsNullOrWhiteSpace(curClass) 
            && curClass.Split(spaceChars, StringSplitOptions.RemoveEmptyEntries).Contains(newClass, StringComparer.OrdinalIgnoreCase)
            )
        {
            newClass = $"{curClass} {newClass}";
        }

        //set new css class value:
        output.Attributes.SetAttribute("class", newClass);

    }

}

公共静态类泛化
{
//空格字符作为分隔符在每两个css类名之间有效
静态只读字符[]spaceChars=新字符[]{'，'\t'，'\r'，'\n'，'\f'}；
///将指定的css类添加或更新到此标记HelperOutput的类列表。
公共静态void AddCssClass（此标记HelperOutput输出，字符串newClass）
{
//获取当前类值：
字符串curClass=output.Attributes[“class”]？.Value？.ToString（）；//output.Attributes.FirstOrDefault（a=>a.Name==“class”）？.Value？.ToString（）；
//检查newClass是否为null或等于当前类，无需执行任何操作
if（string.IsNullOrWhiteSpace（newClass）| | string.Equals（curClass、newClass、StringComparison.OrdinalIgnoreCase））
{
返回；
}
//如果curClass不为null且不包含newClass，则将newClass追加到curClass的末尾：
if（！string.IsNullOrWhiteSpace（curClass）
&&Split（空格字符，StringSplitOptions.RemoveEmptyEntries）.Contains（newClass，StringComparer.OrdinalIgnoreCase）
)
{
newClass=$“{curClass}{newClass}”；
}
//设置新的css类值：
output.Attributes.SetAttribute（“class”，newClass）；
}
}

从ASP.NET Core 2.1开始，您可以使用Microsoft提供的类在一行代码中添加“活动”CSS类

using Microsoft.AspNetCore.Mvc.TagHelpers;
using System.Text.Encodings.Web;
...
public override void Process(TagHelperContext context, TagHelperOutput output)
{
    ...
    output.AddClass("active", HtmlEncoder.Default);
    ...
}

---

FYI

output.Attributes.Remove（现有类）

应该位于

if

语句中，否则它将尝试删除空值。existingClass.value.ToString（）将不起作用，因为existingClass.value的类型为Microsoft.AspNetCore.Mvc.TagHelpers.TagHelperOutputExtensions.ClassAttributeHtmlContent类。确切地说，如果只有一个类名，它将起作用。但不适用于2个或更多，例如，将不会返回ToString（）中的类。我上面的示例不正确。实际上，如果没有通过输出添加额外类的标记帮助程序，则方法.ToString（）可以正常工作。在调用标记帮助程序之前添加（“类”，…）。如果他们这样做了，那么方法.ToString（）将不会返回css类的预期名称。它将返回“ClassAttributeHtml”‌​内容“C#在ASP.NETCore2中改为类名。天啊，天啊，我们不得不这样做，这太难看了。我将编写一个扩展方法来极大地减轻这种痛苦，但我想知道为什么团队不能在这里看到Simplity®的必要性。很好！但如果类已经包含要添加的新值，则不会检查重复值。所以，我发布了一个更完整的版本

using Microsoft.AspNetCore.Mvc.TagHelpers;
using System.Text.Encodings.Web;
...
public override void Process(TagHelperContext context, TagHelperOutput output)
{
    ...
    output.AddClass("active", HtmlEncoder.Default);
    ...
}