Помощник тега ASP.NET Core для условного добавления класса к элементу

В Asp.Net MVC мы можем условно добавить класс в виде следующего кода:

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

Как это сделать, используя tagHelper и удалив часть else в условии.


person Mohammad Akbari    schedule 20.02.2017    source источник


Ответы (2)


Возможность добавить условный класс CSS, следуя указаниям tagHelper. действует этот код наподобие 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>
person Mohammad Akbari    schedule 22.02.2017
comment
можно ли использовать суффиксы, а не только префиксы? сказать class-*-if? - person serge; 03.08.2017
comment
@Serge Из встроенной документации * может появляться только в конце. Так что, наверное, сегодня это невозможно. - person ygoe; 03.12.2017
comment
Когда я использую приведенный выше код с примером, он отображает <div condition-class-active="condition-class-active"></div> - person mheptinstall; 14.01.2018
comment
@MohammadAkbari см. stackoverflow.com /вопросы/48251583/ - person mheptinstall; 14.01.2018
comment
@mheptinstall: у вас орфографическая ошибка. Вы должны использовать условный класс-активный вместо условного-класса-активного - person Mohammad Akbari; 15.01.2018

Нет способа по умолчанию сделать то, что вы просите. Вам нужно будет написать TagHelper, который сделает эту логику за вас. Ака

[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.
        }
    }
}

И тогда HTML будет выглядеть так:

<div class="choice" asp-active="Model.Active"></div>
person N. Taylor Mullen    schedule 21.02.2017