web-dev-qa-db-ja.com

TagHelperのhtml要素にCSSクラスを追加します

ASP.NET Core Viewには、次のものがあります。

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

そして、私は次のTagHelperを持つタグヘルパーです。

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

次のコード行で、CSSクラスとして「アクティブ」を追加する必要があります。

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

ただし、これは何もしません。メッセージはクラス「message」にのみ残ります。

何が足りないのですか？

c#asp.net-coretag-helpers
13
Miguel Moura

ASP.NET Core 2.1以降、Microsoftが提供する TagHelperOutputExtensions クラスを使用して、「アクティブな」CSSクラスを1行のコードに追加できます。

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

@Shyjuの答えはほとんど正しいですが、不要な無関係なコードがたくさんあります。 ASP.NET Core 2.0で処理するには、以下で十分です。

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

ここでの他の答えは、重複する値を避けるために現在のcssクラスをチェックしません。ここでは、出力でクリーンなhtmlを確保するための適切なチェックを備えたcssクラスを追加する拡張機能を作成しました。

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

    }

}
2
S.Serpooshan

属性コレクションから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);
2
Shyju