ASP.NET MVC

HTML Helpers In ASP.NET MVC

In this article, we will learn about HTML Helpers. ASP.NET provides various HTML Helpers using which we can bind our Model to HTML view. There are two types of HTML Helpers like Simple and Strongly Typed HTML Helpers.

The following is the list of Html Helper controls.

Html.Beginform
Html.EndForm
Html.DropDownList
Html.CheckBox
Html.RedioButton
Html.ListBox
Html.Hidden
Html.TextArea
Html.Password
Html.Label
Html.TextBox

Below are Strongly Type Html Helper methods

Html.LabelFor
Html.TextBoxFor
Html.TextAreaFor
Html.DropDownListFor
Html.CheckBoxFor
Html.RadioButtonFor
Html.ListBoxFor
Html.HiddenFor

First we will see simple HTML Helpers

Here the HTML Helpers are not bounded with the Class we have specified. It is somewhat loosely typed binding.

Add the following code in View and you are done with it.

Razor View

<div>
    <h2>
        Simple Helpers
    </h2>
    <br />
    <table>
        <tr>
            <td>@Html.Label("User Name")</td>
            <td>@Html.TextBox("UserName")</td>
        </tr>
        <tr>
            <td>@Html.Label("User Phone")</td>
            <td>@Html.TextBox("UserPhone")</td>
        </tr>
        <tr>
            <td>@Html.Label("User Email")</td>
            <td>@Html.TextBox("UserEmail")</td>
        </tr>
        <tr>
            <td>@Html.Label("User Password")</td>
            <td>@Html.Password("UserPassword")</td>
        </tr>
        <tr>
            <td>
                @Html.Label("Male")
                @Html.RadioButton("Male", new { value = "Male" })
            </td>
            <td>
                @Html.Label("Female")
                @Html.RadioButton("Female", new { value = "Female" })
            </td>
        </tr>
        <tr>
            <td> @Html.Label("User name")</td>
            <td>@Html.DropDownList("Users", NameList)</td>
        </tr>
        <tr>
            <td>@Html.Label("User Terms")</td>
            <td> @Html.CheckBox("UserTerms")</td>
        </tr>
    </table>
    <hr />
</div>

HTML View

<div>
    <h2>
        Simple Helpers
    </h2>
    <br>
    <table>
        <tbody><tr>
            <td><label for="User_Name">User Name</label></td>
            <td><input id="UserName" name="UserName" type="text" value=""></td>
        </tr>
        <tr>
            <td><label for="User_Phone">User Phone</label></td>
            <td><input id="UserPhone" name="UserPhone" type="text" value=""></td>
        </tr>
        <tr>
            <td><label for="User_Email">User Email</label></td>
            <td><input id="UserEmail" name="UserEmail" type="text" value=""></td>
        </tr>
        <tr>
            <td><label for="User_Password">User Password</label></td>
            <td><input id="UserPassword" name="UserPassword" type="password"></td>
        </tr>
        <tr>
            <td>
                <label for="Male">Male</label>
                <input id="Male" name="Male" type="radio" value="{ value = Male }">
            </td>
            <td>
                <label for="Female">Female</label>
                <input id="Female" name="Female" type="radio" value="{ value = Female }">
            </td>
        </tr>
        <tr>
            <td> <label for="User_name">User name</label></td>
            <td><select id="Users" name="Users"><option value="1">Faisal</option>
<option value="2">Pathan</option>
</select></td>
        </tr>
        <tr>
            <td><label for="User_Terms">User Terms</label></td>
            <td> <input id="UserTerms" name="UserTerms" type="checkbox" value="true"><input name="UserTerms" type="hidden" value="false"></td>
        </tr>
    </tbody></table>
    <hr>
</div>

Output:

Now we will see Strongly Typed HTML Helpers

Here the HTML Helpers are bounded with the Class property we have specified.

Add the following code in View.

Razor View

@model HTMLHelpers.Models.Users
@{

    ViewBag.Title = "Home Page";
    var NameList = new List(){
new SelectListItem(){Value="1",Text="Faisal"},
new SelectListItem(){Value="2",Text="Pathan"}

};
}
<div>
    <h2>Strongly Typed Helpers</h2>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        <table>
            <tr>
                <td>@Html.LabelFor(m => m.Name)</td>
                <td>@Html.TextBoxFor(m => m.Name)</td>
            </tr>
            <tr>
                <td> @Html.LabelFor(m => m.Phone)</td>
                <td> @Html.TextBoxFor(m => m.Phone)</td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Email)</td>
                <td> @Html.TextBoxFor(m => m.Email)</td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Password)</td>
                <td> @Html.PasswordFor(m => m.Password)</td>
            </tr>
            <tr>
                <td>
                    @Html.Label("Male")
                    @Html.RadioButtonFor(m => m.Gender, "Male", new { value = "Male" })
                </td>
                <td>
                    @Html.Label("Female")
                    @Html.RadioButtonFor(m => m.Gender, "Female", new { value = "Female" })
                </td>
            </tr>
            <tr>
                <td> @Html.LabelFor(m => m.User)</td>
                <td>@Html.DropDownListFor(m => m.User, NameList)</td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Terms)</td>
                <td>@Html.CheckBoxFor(m => m.Terms)</td>
            </tr>
            <tr>
                <td><input type="submit" value="Submit" /></td>
            </tr>
        </table>
    }
</div>

HTML View

<div>
    <h2>Strongly Typed Helpers</h2>
<form action="/" method="post">        <table>
            <tbody><tr>
                <td><label for="Name">Name</label></td>
                <td><input id="Name" name="Name" type="text" value=""></td>
            </tr>
            <tr>
                <td> <label for="Phone">Phone</label></td>
                <td> <input id="Phone" name="Phone" type="text" value=""></td>
            </tr>
            <tr>
                <td><label for="Email">Email</label></td>
                <td> <input id="Email" name="Email" type="text" value=""></td>
            </tr>
            <tr>
                <td><label for="Password">Password</label></td>
                <td> <input id="Password" name="Password" type="password"></td>
            </tr>
            <tr>
                <td>
                    <label for="Male">Male</label>
                    <input id="Gender" name="Gender" type="radio" value="Male">
                </td>
                <td>
                    <label for="Female">Female</label>
                    <input id="Gender" name="Gender" type="radio" value="Female">
                </td>
            </tr>
            <tr>
                <td> <label for="User">User</label></td>
                <td><select id="User" name="User"><option value="1">Faisal</option>
<option value="2">Pathan</option>
</select></td>
            </tr>
            <tr>
                <td><label for="Terms">Terms</label></td>
                <td><input data-val="true" data-val-required="The Terms field is required." id="Terms" name="Terms" type="checkbox" value="true"><input name="Terms" type="hidden" value="false"></td>
            </tr>
            <tr>
                <td><input type="submit" value="Submit"></td>
            </tr>
        </tbody></table>
</form></div>

Output:

You can download the source code from here

Faisal Pathan

Faisal Pathan is a founder of TheCodeHubs, .NET Project Manager/Team Leader, and C# Corner MVP. He has extensive experience with designing and developing enterprise-scale applications. He has good skills in ASP.NET C#, ASP.NET Core, ASP.NET MVC, AngularJS, Angular, React, NodeJS, Amazon S3, Web API, EPPlus, Amazon MWS, eBay Integration, SQL, Entity Framework, JavaScript, eCommerce Integration like Walmart, Tanga, Newegg, Group-on Store, etc. and Windows services.