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

MVC using HTML helper classes 

<table width="50%" runat="server" id="tbl1">
    <tr>
    <td>Student Id:</td>
    <td><asp:TextBox runat="server" ID="txt1"></asp:TextBox></td></tr>
    <tr>
    <td>Student Name:</td>
    <td><asp:TextBox runat="server" ID="txt2"></asp:TextBox></td></tr>
    <tr>
    <td>Student Percentage:</td>
    <td><asp:TextBox runat="server" ID="txt3"></asp:TextBox></td></tr>
    <tr>
    <td colspan="2" align="center"><asp:Button ID="Button1" runat="server" Text="Button" /></td>
    </tr>
</table>


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 DisplayStudent()
{
Student objStudent = new Student();   
objStudent.Id = Convert.ToInt16(Request.Form["Id"].ToString());
objStudent.StudentName = Request.Form["StudentName"].ToString();
objStudent.StudentPer = Convert.ToDouble(Request.Form["StudentPer"].ToString()); ;
return View("DisplayStudent", objStudent);
}
}

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("DisplayStudent","Student",FormMethod.Post))
{%>
-- HTML input fields will go here
<%} %>

The above code will generate the below HTML

<form action="DisplayStudent" 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 />

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.

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);
}