Html.Label and Html.LabelFor Example in ASP.NET MVC

In this chapter, you will learn:
1. What is Html.Label and Html.LabelFor Helper Class?
2. What is the difference between Html.Label and Html.LabelFor method?
3. Html.Label Example
4. Html.LabelFor Example
5. How Bind Html.LabelFor with a Model
6. Change CSS Properties and Add a CSS Class to an Html.Label

@Html.Label

Html.Label Helper class renders an HTML label control that displays read-only text. It is simple type method that only renders label control and it may be or not bounded by any model properties. It doesn’t raise an error if you have passed wrong property name in the parameter.

Html.Label Example
Model: UserModel.cs 
using System.ComponentModel;
namespace HtmlHelperDemo.Models
{
    public class UserModel
    {
        [DisplayName("User Name")]
        public string Name { get; set; }
    }
}

View: Index.cshtml 
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
    @Html.Label("Name")
}

Html Output
<label for="Name">User Name</label>
Note: If you use @Html.Label("User Name"), it will display User Name as output but it will not be bounded with model properties “Name”. Because it never checks for error at compile time, you will likely to make mistake and get incorrect output or runtime error as well.
 

@Html.LabelFor

It is strongly bounded by model and it displays label text for respective model properties. You must bind view with the corresponding model in order to use @Html.LabelFor Method.

Bind View to Model: Add model name in view as follow:

@model HtmlHelperDemo.Models.UserModel
Html.LabelFor Example
Model: UserModel.cs
It is same as mentioned above paragraph.
View: Index.cshtml 

@model HtmlHelperDemo.Models.UserModel

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
    @Html.LabelFor(m => m.Name)
}

Html Output
<label for="Name">User Name</label>

Change CSS Properties of Label

1. Inline CSS: new { style = “Put your CSS Code Here” }
Example: @Html.LabelFor(m => m.Name, new { style="color:red" })
2. Add a CSS Class: new { @class=”Put Your CSS Class Name” } 
<style>
    .blue
    {
        color:blue;
    }
</style>

@Html.LabelFor(m => m.Name, new { @class="blue" })

Difference Between Html.Label() and Html.LabelFor()

Html.Label() Html.LabelFor()
It is loosely typed. It may be or not bounded with Model Properties. It is strongly typed. Means, It will be always bounded with a model properties.
It requires property name as string. It requires property name as lambda expression.
It doesn’t give you compile time error if you have passed incorrect string as parameter that does not belong to model properties. It checks controls at compile time and if any error found it raises error.
It throws run time error. Run time error gives bad impression to user and if the project is worthy, you may lose your client simply because of one error. It throws compile time error which can be corrected before launching the project. It enhances user experience without throwing error.

Summary

In this chapter, I tried to explain Html.Label and Html.LabelFor Helper method with simple and easy example. I hope, you have learned it clearly. In the next chapter, I will explain Html.TextBox Helper Method.

 

Share your thought