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?

Question

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 ?

e.g. so a form would look like:

* = required 

Name* :

Age*  :

etc 

Is there a way to do this with a tag helper?

I'd prefer to do this in the cshtml markup than via JavaScript or jQuery.

This isn't to validate, this is just to inform the user on sight which fields are required, without having to hard code *'s.

Answer 1

You can achieve this goal by customizing taghelper.

Example:

RequiredTagHelper:

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

Then in your _ViewImports.cshtml,add:

@addTagHelper *, WebApplication5(your project name)

Css:

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

View:

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

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

Test result:

In this case,when you use <label asp-for="xx"></label>, it will check if your attribute is required, if it is required, then it will add *.