How to create MVC (model view controller) views faster by using HTML helper classes (Tutorial number 5)?

Introduction

This is the 5th MVC (model view controller) tutorial and in this we will discuss about MVC HTML helper classes. In case you are completely new to MVC(Model view controller), do have a look at the previous articles and videos given in the table below for quick start.
 

My half life has been spent on writing interview questions for Microsoft technology and I hope I keep writing them. You can see my video tutorial for the same by clicking on .NET,ASP.NET,C#,MVC(model view controller) Interview questions and answers

In our 4th MVC (model view controller) tutorial (the previous article) we created a simple customer data entry screen. We had two big problems in that MVC(model view controller) article:-

• The complete HTML code was written manually. In other words, less productive. It’s like going back to dark ages where developers used to write HTML tags in notepad.

<form action="DisplayCustomer" method="post">
Enter customer id :- <input type="text" name="Id" /><br />
Enter customer code :- <input type="text" name="CustomerCode" /><br />
Enter customer Amount :-<input type="text" name="Amount" /><br />
<input type="submit" value="Submit customer data" />
</form>

• Added to it lot of manual code was also written in the controller to flourish the object and send data to the MVC(model view controller) view.

public class CustomerController : Controller
{
…..
….
[HttpPost]
public ViewResult DisplayCustomer()
{
Customer objCustomer = new Customer();
objCustomer.Id = Convert.ToInt16(Request.Form["Id"].ToString());
objCustomer.CustomerCode = Request.Form["Id"].ToString();
objCustomer.Amount = Convert.ToDouble(Request.Form["Amount"].ToString()); ;
return View("DisplayCustomer", objCustomer);
}
}

In this article we will see how to use MVC(model view controller) HTML helper classes to minimize the above manual code and increase productivity.

Step 1:- Create the Customer class

Create a simple customer class, please refer MVC (model view controller) article 4 for the same.

Step2:- Creating the input HTML form using helper classes

HTML helper classes have readymade functions by which you can create HTML controls with ease. Go to any MVC(model view controller) view and see the intellisense for HTML helper class you should see something as shown in the below figure.
 

By using HTML helper class you can create any HTML control like textbox, labels, list box etc just by invoking the appropriate function.

In order to create the form tag for HTML we need to use “Html.BeginForm”, below goes the code snippet for the same.

<% using (Html.BeginForm("DisplayCustomer","Customer",FormMethod.Post)) 
{%>
-- HTML input fields will go here 
<%} %>

The above code will generate the below HTML

<form action="DisplayCustomer" method="post">
…..
…..
</form>

The HTML helper “beginform” takes three input parameters action name (Method inside the controller), controller name (actual controller name) and HTTP posting methodology (Post or GET).

If you want to create a text box, simply use the “TextBox” function of html helper class as shown in the below code. In this way you can create any HTML controls using the HTML helper class functions.

Enter customer id :- <%= Html.TextBox("Id",Model)%><br />

The above code snippet will generate the below HTML code.

Enter customer id :- <input type="text" name="Id" /><br />

To create a data entry screen like the one shown below we need to the use the below code snippet.

<% using (Html.BeginForm("DisplayCustomer","Customer",FormMethod.Post))
{ %>
Enter customer id :- <%= Html.TextBox("Id",Model)%><br />
Enter customer code :- <%= Html.TextBox("CustomerCode",Model) %><br />
Enter customer Amount :- <%= Html.TextBox("Amount",Model) %><br />
<input type="submit" value="Submit customer data" />
<%} %>

Step 3:- Create a strong typed view by using the customer class

So once you have created the view using the HTML helper classes it’s time to attach the customer class with view, please refer lab 5 for the same.

Step4:- Creating the controller class.

The final thing is the controller code. The controller code now becomes very simple. The customer objectwill be auto flourished as we have used the HTML helper classes. You will create the controller class as we did in Lab 4 but we do not need to write any kind of code for connecting the HTML screens with controller, it’s all hidden and automated.

[HttpPost]
public ActionResult DisplayCustomer(Customer obj)
{
return View(obj);
}

Enjoy your output for different condition of customer amount entered.
 

What’s for the next article?

There are two prime reasons why MVC(model view controller) is important:-

• Automated UNIT testing.
• Reuse of behind code with other views.

In the next article i.e. MVC(model view controller) article number 5 we will see how we can do unit testing using VSTS unit test framework for MVC(model view controller) applications.
 

 Click here for the Part 6 of the ASP.NET MVC article.

Click here for the Part 7 of the ASP.NET MVC article.

Click here for the Part 8 of the ASP.NET MVC article.

Click here for the Part 9 of the ASP.NET MVC article.