用於有條件地將類添加到元素的 ASP.NET Core 標記助手

在 Asp.Net MVC 中，我們可以有條件地添加類，如下程式碼：

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

如何通過使用 tagHelper 並刪除條件中的 else 部分來做到這一點。

按照 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>

引用自：https://stackoverflow.com/questions/42337101