Asp.Net MVC HTML Helper Methods

Here we will learn the HTML helpers in asp.net mvc, why we need html helpers in asp.net mvc, and how to use html helpers in asp.net mvc application with an example, and the difference between asp.net webform controls and asp.net mvc controls rendering with example.

HTML Helpers in Asp.Net MVC

Let's understand the HTML helpers in asp.net mvc. We will study how to create it.

 

  • We use HTML helpers in a view to render HTML content in asp.net mvc.
  • An HTML helper is just a method that returns a string. 

 

One of the basic things of any web application is to render HTML as output. In .NET, we have ASP.NET Webforms and ASP.NET MVC framework both will render HTML very well, but they do this differently. 

 

  • In ASP.NET Webforms, we drag and drop the control on Form, and in code behind the .cs page, we will bind data to it, and it starts displaying data. In asp.net web forms server controls are used to generate HTML.
  • In ASP.NET MVC, we don't have any server controls. In MVC, we have only HTML controls, and you will find all sorts of HTML controls in the toolbox. In MVC, HTML helpers will help us to render HTML in the browser.

If you have come from an ASP.NET web forms development background, you will think ASP.NET Webforms is better than ASP.NET MVC because you need to write the bulk of HTML that will get rendered in the browser, and writing the whole HTML will make developers a bit crazy, for that ASP.NET MVC came up with HTML Helpers which will help you render HTML in the browser. 

 

The HTML helpers and server controls are the same, and both are used to render html on the browser, but if we use HTML helpers, we don't need ViewState to maintain its state, but server controls will use ViewState to maintain state and data.

 

The following are the list of HTML helper methods available in asp.net mvc.

 

  1.     @Html.BeginForm
  2.     @Html.EndForm
  3.     @Html.TextBox
  4.     @Html.TextArea
  5.     @Html.Password
  6.     @Html.Hidden
  7.     @Html.CheckBox
  8.     @Html.RadioButton
  9.     @Html.DropDownList
  10.     @Html.ListBox

 Let’s take the example of both asp.net webform controls and asp.net mvc controls.

 

In asp.net web forms, the hyperlink button control code will be as shown below.

 

<asp:HyperLink ID="HyperLink1" runat="server">Login</asp:HyperLink>

 For the above asp.net webforms hyperlink button, how will the browser render? that would be like as shown below.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head> </head>

<body>

<form id="Form2" action="login.aspx" method="post">

<a id="A1" href="Login.aspx">Login</a>

</body>

</html>

 In asp.net mvc link button of HTML helper will be like as shown below 

  

@Html.ActionLink("Login","Index","Login")

For the above asp.net mvc link button, how will the browser render? that would be like as shown below.

 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<meta name="viewport" content="width=device-width"/>

<title>Index</title>

<link href="/Content/site.css" rel="stylesheet"/>

<script src="/Scripts/modernizr-2.5.3.js"></script>

</head>

<body>

<h2>Index</h2>

<form action="/PersonDetails/index" method="post">

</form>

<div>

<a href="/Login">Login</a>

</div>

<script src="/Scripts/jquery-1.7.1.js"></script>

<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>

<script src="/Scripts/jquery.validate.js"></script>

<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

</body>

</html>

 If we use html helper method in asp.net mvc that will help developers to write html automatically. 

Previous
 
Next