如何使用 asp.net core 3.1/5 mvc 在 razor 视图中使用 *（基于 [Required] 注释）自动标记必填字段标签？

Question

例如所以表格看起来像：

* = required 

Name* :

Age*  :

etc

有没有办法用标签助手来做到这一点？

我更愿意在 cshtml 标记中执行此操作，而不是通过 JavaScript 或 jQuery。

这不是为了验证，这只是为了通知用户需要哪些字段，而无需硬编码 *。

Answer 1

您可以通过自定义 taghelper 来实现这个目标。

示例：

必需的标签助手：

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

    [HtmlAttributeName(ForAttributeName)]
    public ModelExpression For { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        if (context == null)
            throw new ArgumentNullException(nameof(context));

        if (output == null)
            throw new ArgumentNullException(nameof(output));

        if (For.Metadata.IsRequired)
        {
            var existingClass = output.Attributes.FirstOrDefault(f => f.Name == "class");
            var cssClass = string.Empty;
            if (existingClass != null)
            {
                cssClass = $"{existingClass.Value} ";
            }

            cssClass += "required";
            output.Attributes.SetAttribute("class", cssClass);
        }
    }
}
}

然后在您的 _ViewImports.cshtml 中添加：

@addTagHelper *, WebApplication5(your project name)

Css:

.required:after {
content: "*";
font-weight: bold;
color: red;
}

查看：

<label asp-for="Name"></label>
<input asp-for="Name" />

<label asp-for="Age"></label>
<input asp-for="Age" />

测试结果：

在这种情况下，当你使用<label asp-for="xx"></label>时，它会检查你的属性是否是必需的，如果是必需的，那么它会添加*.

如何使用 asp.net core 3.1/5 mvc 在 razor 视图中使用 *（基于 [Required] 注释）自动标记必填字段标签？

How can I automatically mark required field labels with a * (based on [Required] annotation) in a razor view using asp.net core 3.1/5 mvc?

c#

asp.net-mvc

required-field

razor

asp.net-core