ASP.NET MVC Label display name and validation messages


This is an aide-memoire for how ASP.NET MVC will output label and error messages and what “settings” will override which ones.

Model

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

    public bool RememberMe { get; set; }
}

View

<li>
    @Html.LabelFor(m => m.UserName)
    @Html.TextBoxFor(m => m.UserName, new { @class = "inputcontact" })
    @Html.ValidationMessageFor(m => m.UserName)
</li>
<li>
    @Html.LabelFor(m => m.Password)
    @Html.PasswordFor(m => m.Password, new { @class = "inputcontact" })
    @Html.ValidationMessageFor(m => m.Password)
</li>
<li>
    @Html.LabelFor(m => m.RememberMe, new { @class = "checkbox" })
    @Html.CheckBoxFor(m => m.RememberMe)
    <input type="submit" value="Log in" />
</li>

and this is the result when you run the code:

It should not be news that with the current code, the labels are named exactly as the Property names in the LoginModel class. Before explaining how to control the display names of the labels let me show the validation messages when submitting the form without filling in anything.

OriginalValidationOnce more, the PropertyNames in the LoginModel class are used in the validation messages.

As far as the display name of the label is concerned there are a couple of ways to control it:

  1. Use data annotations
  2. Use the overloaded version of Html.LabelFor

Data annotations

In our example, the two labels which I’d like to modify are “UserName”, “Password” and “RememberMe” which will be changed to “Username *”, “Password *” and “Remember me?” respectively:

public class LoginModel
{
    [Required]
    [Display(Name = "Username *")]
    public string UserName { get; set; }
    [Required]
    [DataType(DataType.Password)]
    [Display(Name = "Password *")]
    public string Password { get; set; }
    [Display(Name="Remember me?")]
    public bool RememberMe { get; set; }
}

Consequently, the updated form is:

DataAnnotationThis seems to be doing what we need until we exercise validation:

DataAnnotiationValidationAsteriskThe asterisks which are used to denote “mandatoriness” also appear in the validation message. Normally it’s not what we really want and instead we’d want the asterisk to be omitted from the message. Before, addressing that let’s see how we can control the display names of the label using the second method.

Html.LabelFor

With the model code left as is, and with the following changes to the view:

<li>
    @Html.LabelFor(m => m.UserName, "Username *")
    @Html.TextBoxFor(m => m.UserName, new { @class = "inputcontact" })
    @Html.ValidationMessageFor(m => m.UserName)
</li>
<li>
    @Html.LabelFor(m => m.Password, "Password *")
    @Html.PasswordFor(m => m.Password, new { @class = "inputcontact" })
    @Html.ValidationMessageFor(m => m.Password)
</li>
<li>
    @Html.LabelFor(m => m.RememberMe, "Remember me?", new { @class = "checkbox" })
    @Html.CheckBoxFor(m => m.RememberMe)
    <input type="submit" value="Log in" />
</li>

the display names and the validation messages are exactly the same as before. However, if we edit the model to:

public class LoginModel
{
    [Required]
    [Display(Name = "Username")]
    public string UserName { get; set; }
    [Required]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }
    public bool RememberMe { get; set; }
}

then this is what we get:

DesiredResultIn other words, the label text is obtained from the View while the field name for the validation message is obtained from the Model. However, a better way to express that would be:

public class LoginModel
{
    [Required(ErrorMessage = "The Username field is required")]
    public string UserName { get; set; }
    [Required(ErrorMessage = "The Password field is required")]
    [DataType(DataType.Password)]
    public string Password { get; set; }
    public bool RememberMe { get; set; }
}

Now these are just a couple of the quick and dirty ways to get the label display name and the validation message to work as required. However, it is not “optimal” in the sense that there is duplication of text and there might be “better” ways such as the one explained in this post or this one. Regardless of what way you choose, what I find quite surprising is that having this done automatically is not out of the box in ASP.NET MVC because it is such a common scenario.

Advertisements
Posted in AideMemoire, ASP.NET MVC

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: