ASP Net Core TagHelper Добавить класс CSS

Question

Мне нужно автоматически отобразить звездочку для обязательных полей, поэтому мне удалось найти в Интернете некоторый код, который делает это.Я добавил класс CSS с именем «required-label», чтобы он тоже стал красным.Тем не менее, он применяет только класс CSS к звездочке, но не к метке.Есть идеи, как применить класс CSS к обоим?Вот полный фрагмент по запросу.

using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.TagHelpers;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.AspNetCore.Razor.TagHelpers;
using System.Threading.Tasks;

namespace App.TagHelpers
{
    [HtmlTargetElement("label", Attributes = ForAttributeName)]
    public class LabelRequiredTagHelper : LabelTagHelper
    {
        private const string ForAttributeName = "asp-for";

        public LabelRequiredTagHelper(IHtmlGenerator generator) : base(generator)
        {
        }

        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
        {
            await base.ProcessAsync(context, output);

            if (For.Metadata.IsRequired)
            {
                var sup = new TagBuilder("sup");
                sup.InnerHtml.Append("*");
                sup.AddCssClass("required-label");
                output.Content.AppendHtml(sup);
            }
        }
    }
}

Благодарю Маноя Кулькарни за пример кода.

Answer 1

Помощник по тегам в OP работает, но вместо добавления элемента sup к звездочке, я думаю, все, что вам нужно сделать, - это добавить класс css к самому элементу label и использовать CSS для стилизации метки соответствующим образом.

Небольшая настройка расширения tag-helper

[HtmlTargetElement("label", Attributes = ForAttributeName)]
public class LabelRequiredTagHelper : LabelTagHelper
{
    private const string ForAttributeName = "asp-for";
    private const string RequiredCssClass = "required";

    public LabelRequiredTagHelper(IHtmlGenerator generator) : base(generator)
    {
    }

    public override async Task ProcessAsync(TagHelperContext context, 
        TagHelperOutput output)
    {
        await base.ProcessAsync(context, output);

        if (For.Metadata.IsRequired)
        {
            output.Attributes.AddCssClass(RequiredCssClass);
        }
    }
}

AddCssClass

public static class TagHelperAttributeListExtensions
{
    public static void AddCssClass(this TagHelperAttributeList attributeList, 
        string cssClass)
    {
        var existingCssClassValue = attributeList
            .FirstOrDefault(x => x.Name == "class")?.Value.ToString();

        // If the class attribute doesn't exist, or the class attribute
        // value is empty, just add the CSS class
        if (String.IsNullOrEmpty(existingCssClassValue))
        {
            attributeList.SetAttribute("class", cssClass);
        }
        // Here I use Regular Expression to check if the existing css class
        // value has the css class already. If yes, you don't need to add
        // that css class again. Otherwise you just add the css class along
        // with the existing value.
        // \b indicates a word boundary, as you only want to check if
        // the css class exists as a whole word.  
        else if (!Regex.IsMatch(existingCssClassValue, $@"\b{ cssClass }\b",
            RegexOptions.IgnoreCase))
        {
            attributeList.SetAttribute("class", $"{ cssClass } { existingCssClassValue }");
        }
    }
}

Модель вида

Пример модели вида, котораясодержит обязательные свойства, помеченные [Required].Также по умолчанию требуется логическое значение.

public class LoginViewModel
{
    [Required]
    public string Username { get; set; }

    [Required]
    [DataType(DataType.Password)]
    public string Password { get; set; }

    [Display(Name = "Remember my login?")]
    public bool RememberMe { get; set; }

    public string ReturnUrl { get; set; }
}

Представление

Например, у меня есть страница входа, которая занимает LoginViewModel.

@model LoginViewModel
@{
    ViewData["Title"] = "Login";
}

<form asp-area="" asp-controller="account" asp-action="login">
    <input type="hidden" asp-for="ReturnUrl" />

    <div asp-validation-summary="ModelOnly" class="text-danger"></div>

    <div class="form-group">
        <label asp-for="Email"></label>
        <input type="email" class="form-control" asp-for="Email" />
    </div>
    <div class="form-group">
        <label asp-for="Password"></label>
        <input type="password" class="form-control" asp-for="Password" />
    </div>
    <div class="form-group">
        <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" asp-for="RememberMe" />
            <label asp-for="RememberMe" class="custom-control-label"></label>
        </div>
    </div>
    <button type="submit" class="btn btn-primary btn-block">Login</button>
</form>

Стоит знатьчто метка для флажка RememberMe.В представлении я добавил дополнительный класс CSS custom-control-label, и помощнику по тегам все еще удается добавить вместе с ним требуемый класс CSS required.

Сгенерированный HTML

Стиль (в SASS)

Вы можете сказать, что я использую платформу Bootstrap css, и уже есть стили для меток флажков, поэтому я хочу исключить их (обозначается custom-control-label класс css).

label.required:not(.custom-control-label)::after {
    content: "*";
    padding-left: .3rem;
    color: theme-color('danger');      /* color: #dc3545; */
}

Результат

Если вы хотите, чтобы требуемая метка тоже была красной, выможно оформить это так:

label.required:not(.custom-control-label) {
    color: theme-color('danger');      /* color: #dc3545; */

    &::after {
        content: "*";
        padding-left: .3rem;
    }
}