Asp.Net MVC HTML Helper Methods

  Total Views : 4265
  Comments : 0
 
  Keywords : HTML helper methods in asp.net mvc, How to use html helpers in asp.net mvc with example, List of html helper methods in asp.net mvc 4, Difference between asp.net webforms and mvc controls,

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

HTML Helpers in Asp.Net MVC

Let's understand what are the HTML helpers in asp.net mvc and later 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 thing 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 thing in different ways. 

 

  • In ASP.NET Webforms we just drag and drop control on Form and in code behind .cs page we just bind data to it and it starts displaying data. In asp.net webforms 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 check the tool box you will find all sort of HTML controls there. In mvc HTML helpers will help us to render html in browser.

If you have come from ASP.NET webforms development background then you will think ASP.NET Webforms is better as compare to ASP.NET MVC because here you need to write bulk of HTML that will get render in browser and writing whole html will make developers bit crazy. For that ASP.NET MVC came up with HTML Helpers which will help you to render html in browser. 

 

The HTML helpers and server controls are the same and both are used to render html on 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.

 

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 example of both asp.net webform controls and asp.net mvc controls

 

In asp.net webforms hyperlink button control code will be like as shown below

 

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

 For above asp.net webforms hyperlink button how browser will 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 above asp.net mvc link button how browser will 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>

<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. 

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User