将 CSS 类添加到 TagHelper 中的 html 元素答案

【问题标题】：Add CSS Class to html element in a TagHelper将 CSS 类添加到 TagHelper 中的 html 元素
【发布时间】：2017-03-09 04:32:21
【问题描述】：

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

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

我是具有以下 TagHelper 的 Tag Helper：

[HtmlTargetElement("div", Attributes = MessageName)]
public class MessageTagHelper : TagHelper {

  private const String MessageName = "message";

  [HtmlAttributeName(MessageName)]
  public String Message { get; set; }

  [HtmlAttributeNotBound, ViewContext]
  public ViewContext ViewContext { get; set; }


  public override void Process(TagHelperContext context, TagHelperOutput output) {

    String message;
    Boolean defined = ViewContext.HttpContext.Request.Cookies.TryGetValue("_message", out message);

    if (defined) {
      ViewContext.HttpContext.Response.Cookies.Delete("_message");
      output.Attributes.Add("class", "active");
      output.Content.Append(message);
    }
  }
}

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

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

但是，这无济于事。消息仅保留在“消息”类中。

我错过了什么？

【问题讨论】：

标签： c# asp.net-core tag-helpers

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

@Shyju 的回答大部分是正确的，但是有很多无关代码是不必要的。以下内容足以在 ASP.NET Core 2.0 中处理：

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

【讨论】：

好！但是如果类已经包含要添加的新值，这不会检查重复值。所以，我发布一个更完整的版本here

【解决方案3】：

我认为您应该从 Attributes 集合中删除现有的 TagHelperAttribute for css 类，并添加一个包含所有类的新类（现有的和您的新“活动”类）

下面的代码应该可以工作。

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);

【讨论】：

仅供参考 output.Attributes.Remove(existingClass); 应该位于 if 语句中，否则它会尝试删除空值。
existingClass.Value.ToString() 不起作用，因为 existingClass.Value 是 Microsoft.AspNetCore.Mvc.TagHelpers 类型.TagHelperOutputExtensions.ClassAttributeHtmlContent 类。
准确地说，如果有只有一个类名，它将起作用。但不是 2 个或更多，例如
不会在 ToString() 中返回类。
我上面的示例不正确。实际上，如果没有通过 输出添加一些额外类的标签助手，方法 .ToString() 可以正常工作。 Attributes.Add("class", ...) 在我们的标签助手被调用之前。如果他们这样做了，那么方法 .ToString() 将不会返回 css 类的预期名称。它将在 ASP.NET Core 2 中返回“ClassAttributeHtml‌Content”C# 类名。
天哪，天哪，太丑了，我们必须这样做。我将编写一个扩展方法来大大减轻这种痛苦，但我想知道为什么团队在这里看不到 Need for Simplicity®。

【解决方案4】：

这里的其他答案不检查当前的 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);

    }

}

【讨论】：