在TagHelper中为html元素添加CSS类

本文关键字：添加 CSS 元素 html TagHelper 中为 | 更新日期: 2023-09-27 18:15:10

. NET核心视图我有以下几点:

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

然后使用下面的TagHelper创建一个标签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");

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

我错过了什么?

在TagHelper中为html元素添加CSS类

你可以使用微软提供的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);
    ...
}

@Shyju的答案基本上是正确的，但是有很多多余的代码是不必要的。以下内容足以在ASP中进行处理。. NET Core 2.0:

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

我认为你应该从属性集合中删除现有的css类的TagHelperAttribute，并添加一个包含所有类(现有和新的"active"类)的新类

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

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

这里的其他答案不检查当前的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);
    }
}
相关文章：