ASP Net核心TagHelper添加CSS类

我需要为必填字段自动显示一个星号，所以我设法在网上找到了一些这样做的代码。我添加了一个名为“required label”的CSS类来将其变为红色。但是，它只将CSS类应用于星号，而不是标签。如何将CSS类应用于两者？以下是所要求的完整片段

使用Microsoft.AspNetCore.Mvc.Rendering；
使用Microsoft.AspNetCore.Mvc.TagHelpers；
使用Microsoft.AspNetCore.Mvc.ViewFeatures；
使用Microsoft.AspNetCore.Razor.TagHelpers；
使用System.Threading.Tasks；
命名空间App.TagHelpers
{
[HtmlTargetElement（“标签”，Attributes=ForAttributeName）]
公共类LabelRequiredTagHelper:LabelTagHelper
{
attributeName=“asp for”的私有常量字符串；
公共标签RequiredTagHelper（IHtmlGenerator生成器）：基本（生成器）
{
}
公共重写异步任务ProcessAsync（TagHelperContext上下文，TagHelperOutput输出）
{
wait base.ProcessAsync（上下文，输出）；
如果（对于.Metadata.IsRequired）
{
var sup=新标记生成器（“sup”）；
sup.InnerHtml.Append（“*”）；
sup.AddCssClass（“所需标签”）；
output.Content.AppendHtml（sup）；
}
}
}
}

OP中的tag helper可以工作，但是我认为您需要做的不是附加一个sup元素来包含星号，而是向label元素本身添加一个css类，并使用css相应地设置标签的样式

在

标记帮助器上稍作调整

addcsclass

extension 视图模型 包含必需属性的示例视图模型，用

[必需]

注释。默认情况下还需要布尔值

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>

结果

如果希望所需的标签也为红色，可以采用以下方式设置其样式：

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

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

---

上面代码的HTML输出是什么，你能发布其中的一段吗？现在添加了完整的代码，谢谢示例David。对于以前的一些MVC项目，我使用了一个Html帮助程序，它自动突出显示必填字段的标签。这段代码对于ASP Net核心几乎实现了相同的功能，所以我真的尝试拥有相同的功能。显然，我在晚年变得懒惰，希望一切都是自动的，而不必手动用class=“required”来装饰。最后我明白你的意思了。我已经更新了OP。请看一看。回答很好！除了内置的

LabelTagHelper

，您能解释一下这个taghelper是如何工作的吗？我的意思是，似乎我们有两个taghelper，它们的目标是

label

标记，那么它们都会被执行吗？顺序是什么？@S.Serpooshan：问得好！我认为这个自定义标记帮助器和内置标签标记帮助器都将运行，因为它们的目标是相同的元素

label

（

asp for

属性是可选的，但我将它放在那里是为了确保这个自定义标记帮助器只在那些具有

asp for

属性的元素上运行）。这里的诀窍是：1）同一目标元素的内容在所有针对同一元素的标记帮助器之间共享/缓存2）（如果您查看内置标签标记帮助器的源代码）如果另一个标记帮助器已经更新/生成内容，则一个标记帮助器不会更新/生成内容。@S.Serpooshan：在我的情况下，谁先跑并不重要。如果内置程序先运行（我认为这是正确的），当我的自定义程序调用

wait base.ProcessAsync（）

时，它处理的逻辑与内容被修改后不会重新生成内容的逻辑相同。如果我的自定义程序先运行，它仍然调用

base.ProcessAsync（）

来生成内容，因为我的自定义程序继承自

LabelTagHelper

。稍后，当默认的内置标签标记辅助程序运行并看到内容已被修改时，它将不会重新生成内容。免责声明：我不是100%肯定，虽然LOL

@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>

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