Why we use HTML helpers in ASP.Net MVC instead of normal ASP.Net Controls?

If you are from ASP.Net Web Forms background, you might’ve wondered why we are using HTML helpers instead of ASP.Net controls in ASP.Net MVC?

It is easy to use ASP.Net controls such as asp:TextBox – isn’t it? Because ASP.Net WebForms controls remember what you typed in the form and you can easily get the property by using .Text in C# code.

Then, why we don’t have the controls like ASP.Net Webforms in ASP.Net MVC?

Why architects/programmers at Microsoft decided not to include this in ASP.Net MVC?

To understand why, You need to understand the below facts

  1. Statelessness nature of HTTP and Request-Response pattern
  2. Browser could understand only HTML, CSS or Javascript irrespective of whether you use ASP.Net Web Form Control or ASP.Net MVC HTML Helpers

I have written an in-depth article on the same here and I recommend you to read that article. But I’ll give you the brief overview on the same now

  1. Statelessness nature of HTTP and Request-Response pattern:

All web applications built using ASP.Net (or java or ‘Ruby on Rails’ or any new shiny technology) use HTTP protocol or its secured version HTTPS.  You can think of HTTPS as using HTTP securely. HTTPS uses Secure Socket Layer (SSL) and encrypts your data. But, HTTPS still use HTTP.

HTTP is a stateless protocol which follows a request /response pattern i.e, user requests a resource (could be web page, text file, small piece of info etc.) and the web server responds with the requested resource.

The web server does not maintain any state of the previous requests. If the user requests the same resource again, the web server again responds with the requested resource as though the user is asking the document for the first time. There are various mechanisms to maintain the state in web application.

ViewState is one such mechanism where all the form data is encoded in a hidden field and sent to the client and thus state can be maintained between requests.

Let us consider a simple form below

Simple ASP.Net Form

 

You enter your first name and last name in the above form and submit it. The values on the fields(first name, last name) would be preserved,  when you get the page back after the submission of the form.

I have earlier said that HTTP protocol is a stateless protocol, where the state between the requests is not preserved. But how ASP.Net WebForms maintain state?

 

ASP.Net Web forms inserts a hidden element by name “__VIEWSTATE” in your ASP.Net Web Form where it will encode all of your form data. This __VIEWSTATE value would be decoded and used to retrieve the values of the individual form fields.

When you view the source in your browser, you can see the __VIEWSTATE field as below

ViewState

This is the reason, your form field values are getting preserved.

This is the reason some people say that ASP.Web Form does not truly embraces the web. It just provides an abstraction so that it can act as windows desktop application.

There is a downside for this feature. As your form fields are getting more and more, your size of the web page would also be huge which could lead to performance issues.

 

2.BROWSERS CAN UNDERSTAND ONLY HTML,CSS AND JAVASCRIPT

Irrespective of whether you use ASP controls or HTML Helpers, browsers can only understand HTML, CSS and javascript. So, both ASP Controls in Webforms and HTML Helpers in ASP.Net MVC would have to be converted to HTML controls so that browsers can understand.

HTML Helpers ASP.Net MVC

 

ASP.Net Server controls are controls which would be ultimately converted to HTML elements before sending it to the client (browser). At the client side(browser), there is no concept of ASP.Net Controls or ASP.Net MVC HTML helpers. Browsers know only about HTML,CSS and javascript.

HTML Helpers are the methods which help you to create the HTML controls, hence it got the name. However, you are free to use the HTML elements in your ASP.Net MVC views – without ever needing to use the HTML Helpers. HTML Helpers just make things easier and it enhances reusability – That’s why many people use HTML helpers.

All the below lines of code produces the same output

Using HTML Control:


<input id="txtFirstName" name="txtFirstName" type="text" value="" />

Using HTML Helper in ASP.Net MVC:


@Html.TextBox("txtFirstName");

Using ASP.Net Controls in WebForms:


<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>

 

All the above controls produces the same output as mentioned below


<input id="txtFirstName" name="txtFirstName" type="text" value="">

In order to truly embrace the web, ASP.Net MVC does not provide the option of ViewState. If you want to preserve the form fields, you need to set it explicitly and send it back to the client.

Please let me know your thoughts in the comments section.