.NET Zone is brought to you in partnership with:

I am developer and technology maniac who is working on Microsoft and PHP technologies. I have ASP.NET MVP title and I hold MCAD, MCSD and MCTS certificates. When I have free time I usually play with new technologies, hack something, read books, participate in communities and speak in events. I am also active blogger and my ASP.NET blog is the place you can find some interesting reading about my discoveries and personal thoughts. Gunnar is a DZone MVB and is not an employee of DZone and has posted 140 posts at DZone. You can read more from them at their website. View Full User Profile

ASP.NET MVC – How To Show Asterisk By Required Labels

06.18.2012
| 6197 views |
  • submit to reddit

Usually we have some required fields on our forms and it would be nice if ASP.NET MVC views can detect those fields automatically and display nice red asterisk after field label. As this functionality is not built in I built my own solution based on data annotations. In this posting I will show you how to show red asterisk after label of required fields.

Here are the main information sources I used when working out my own solution:

Although my code was first written for completely different situation I needed it later and I modified it to work with models that use data annotations. If data member of model has Required attribute set then asterisk is rendered after field. If Required attribute is missing then there will be no asterisk.

Here’s my code. You can take just LabelForRequired() methods and paste them to your own HTML extension class.

public static class HtmlExtensions
{
    [SuppressMessage("Microsoft.Design", "CA1006:DoNotNestGenericTypesInMemberSignatures", Justification = "This is an appropriate nesting of generic types")]
    public static MvcHtmlString LabelForRequired<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, string labelText = "")
    {
        return LabelHelper(html,
            ModelMetadata.FromLambdaExpression(expression, html.ViewData),
            ExpressionHelper.GetExpressionText(expression), labelText);
    }
 
    private static MvcHtmlString LabelHelper(HtmlHelper html,
       ModelMetadata metadata, string htmlFieldName, string labelText)
    {
        if (string.IsNullOrEmpty(labelText))
        {
            labelText = metadata.DisplayName ?? metadata.PropertyName ?? htmlFieldName.Split('.').Last();
        }
 
        if (string.IsNullOrEmpty(labelText))
        {
            return MvcHtmlString.Empty;
        }
 
        bool isRequired = false;
 
        if (metadata.ContainerType != null)
        {
            isRequired = metadata.ContainerType.GetProperty(metadata.PropertyName)
                            .GetCustomAttributes(typeof(RequiredAttribute), false)
                            .Length == 1;
        }
 
        TagBuilder tag = new TagBuilder("label");
        tag.Attributes.Add(
            "for",
            TagBuilder.CreateSanitizedId(
                html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(htmlFieldName)
            )
        );
 
        if (isRequired)
            tag.Attributes.Add("class", "label-required");
 
        tag.SetInnerText(labelText);
 
        var output = tag.ToString(TagRenderMode.Normal);
 
 
        if (isRequired)
        {
            var asteriskTag = new TagBuilder("span");
            asteriskTag.Attributes.Add("class", "required");
            asteriskTag.SetInnerText("*");
            output += asteriskTag.ToString(TagRenderMode.Normal);
        }
        return MvcHtmlString.Create(output);
    }
}

And here’s how to use LabelForRequired extension method in your view:

<div class="field">
    @Html.LabelForRequired(m => m.Name)
    @Html.TextBoxFor(m => m.Name)
    @Html.ValidationMessageFor(m => m.Name)
</div> 

After playing with CSS style called .required my example form looks like this:

LabelForRequired in action

These red asterisks are not part of original view mark-up. LabelForRequired method detected that these properties have Required attribute set and rendered out asterisks after field names.

NB! By default asterisks are not red. You have to define CSS class called “required” to modify how asterisk looks like and how it is positioned.

Published at DZone with permission of Gunnar Peipman, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)