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

Questpond
Posted by in ASP.NET MVC category on for Intermediate level | Points: 250 | Views : 41424 red flag
Rating: 5 out of 5  
 2 vote(s)

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.

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.
 

Lab description MVC(model view controller) videos
MVC(model view controller) Article links
A simple Hello world ASP.NET MVC(model view controller) application. Hello word MVC (model view controller) Tutorial video http://www.dotnetfunda.com/articles/article1297-how-to-create-a-simple-hello-world-aspnet-mvc-tutorial-no-1-.aspx
In this video we will see how we can share data between controller and the view using view data. MVC (model view controller) Tutorial video 2 Viewdata http://www.dotnetfunda.com/articles/article1310-how-to-pass-data-from-controllers-to-views-in-aspnet-mvc-tutorial-no-2-.aspx
In this lab we will create a simple customer model, flourish the same with some data and display the same in a view. MVC (model view controller) Tutorial video 3 Simple model and view example http://www.dotnetfunda.com/articles/article1317-how-to-create-a-simple-model-in-aspnet-mvc-and-display-the-same-tutorial-.aspx
In this lab we will create a simple customer data entry screen with some validation on the view. MVC (model view controller) tutorial video 4 Simple customer data entry screen. http://www.dotnetfunda.com/articles/article1388-how-to-create-a-simple-aspnet-mvc-data-entry-screen-tutorial-no-4-.aspx
This Lab will demonstrate how to expedite your MVC(model view controller) development process using HTML helper classes. NA
 
This is the same article which you are reading


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.

Page copy protected against web site content infringement by Copyscape

Login to vote for this post.

Comments or Responses

Posted by: Akiii on: 8/11/2011 | Points: 25
This is an excellent collection of articles regarding MVC...

Thank you and please keep posting...
Regards
Akiii
Posted by: Bryanmurtha on: 2/15/2013 | Points: 25
This tutorial does not work in Visual Web Developer 2010. I get the following:

Server Error in '/' Application.
Compilation Error
Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS1973: 'System.Web.Mvc.HtmlHelper<dynamic>' has no applicable method named 'TextBox' but appears to have an extension method by that name. Extension methods cannot be dynamically dispatched. Consider casting the dynamic arguments or calling the extension method without the extension method syntax.

Source Error:


Line 12: <% using (Html.BeginForm("DisplayCustomer","Customer",FormMethod.Post))
Line 13: { %>
Line 14: Enter customer id :- <%= Html.TextBox("Id",Model)%><br />
Line 15: Enter customer code :- <%= Html.TextBox("CustomerCode",Model) %><br />
Line 16: Enter customer Amount :- <%= Html.TextBox("Amount",Model) %><br />


Source File: c:\Users\bmurtha\Documents\Visual Studio 2010\Projects\MvcCustomer\MvcCustomer\Views\Customer\FillCustomer.aspx Line: 14


Login to post response

Comment using Facebook(Author doesn't get notification)