asp.net Kern-Tag Helfer für bedingt hinzufügen Klasse zu einem Element

Question

In Asp.Net MVC wir Klasse bedingt als folgenden Code hinzufügen:

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

Wie kann dies tun, indem tagHelper mit und von anderen Teil entfernen in Bedingung.

Answer 1

Fähigkeit, eine bedingte CSS-Klasse hinzufügen, indem Sie folgende tagHelper zur Verfügung stellt. dieser Code wie AnchorTagHelper asp-route- * zum Hinzufügen von Routenwerten.

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

in _ViewImports.cshtml Referenz hinzufügen, wie folgende

@addTagHelper "*, WebApplication3" 

Verwenden tagHelper in Aussicht taghelper:

<div condition-class-active="Model.Active" condition-class-show="Model.Display"> 
</div> 

Ergebnis für Active = true und Anzeige = true ist:

<div class="active show"> 
</div> 

Answer 2

Es gibt keine Standardmethode, um das zu tun, was Sie fragen. Du müsstest einen TagHelper schreiben, der diese Logik für dich erledigt hat.

Aka

[HtmlTargetElement(Attributes = "asp-active")] 
public class FooTagHelper : TagHelper 
{ 
    [HtmlAttributeName("asp-active")] 
    public bool Active { get; set; } 

    public override void Process(TagHelperOutput output, TagHelperContext context) 
    { 
     if (Active) 
     { 
      // Merge your active class attribute onto "output"'s attributes. 
     } 
    } 
} 

Und dann die HTML würde wie folgt aussehen:

<div class="choice" asp-active="Model.Active"></div>