HTML Helpers Rendering a form in ASP.NET MVC

Introduction

We know that ASP.NET MVC is the advance version of ASP.NET. This is a simple article that helps with how to add more then one control in an ASP.NET MVC application. We know that MVC is an integrated module used to develop simple applications in ASP.NET. MVC is made up in three separated words that are Models,Views,Controllers. Models provide the business logic Views provide the GUI and controllers handle the request that is provided by models and views. The following article is a complete example of how to add more then one control in an ASP.NET MVC application. The Index page displays a form that implements the HTML helper methods. When the user submits the form, the form is handled by the ShowData action method which generates a view that displays the information that the user submitted.

Step 1: Open Visual Studio 2010.

Go to file -> New->Projects

Create an ASP.NET MVC 2 Empty Web Application

Name of "MVCDropdounlist"

Step 2: Add a controller.

Right click on the Controllers folder ->add->Controllers

Name of Controllers is "Home"

In a controller, define the request

Step 3: Add the controller code.

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcHtmlHelpers.Controllers
{
[HandleError]
public class HomeController : Controller
{
public ActionResult Index()
{
ViewData["Message"] = "Welcome to Tom MVC application";
List<string> pp = new List<string>();
pp.Add("rabbit");
pp.Add(" mouse");
pp.Add("rat");
pp.Add("Guinea pig");
pp.Add("Gold fish");
pp.Add("snake");
pp.Add("frogs");
ViewData["PETS"] = new SelectList(pp);
return View();
}
public ActionResult ShowData(string NAME, string COLOR, Boolean BOOK, string PETS)
{
ViewData["NAME"] = NAME;
ViewData["COLOR"] = COLOR;
ViewData["BOOK"] = BOOK;
ViewData["PETS"] = PETS;
return View("ShowData");
}
}
}

Step 4: Add the Folder in a views.

The name of Folder is "Home"

Step 5: Add the Two view.

The first view is "index"

Step 6: Add index view code.

Enter your name: <%= Html.TextBox("NAME") %>
<br /><br />
Select your favorite color:<br />
<%= Html.RadioButton("COLOR", " Gray", true)%> Blue <br />
<%= Html.RadioButton("COLOR", "Violet", false)%> Purple <br />
<%= Html.RadioButton("COLOR", " Cyan", false)%> Red <br />
<%= Html.RadioButton("COLOR", "Orange", false)%> Orange <br />
<%= Html.RadioButton("COLOR", "White", false)%> Yellow <br />
<%= Html.RadioButton("COLOR", "Atomic tangerine", false)%> Brown <br />
<%= Html.RadioButton("COLOR", "Azure", false)%> Green
<br /><br />
<%= Html.CheckBox("BOOK") %> I read more novels or magazine.<br />
<br /><br />
My favorite pet: <%= Html.DropDownList("PETS") %>
<br /><br />
<input type="submit" value="Submit" />
<% } %>
</div>
</body>
</html>

Step 7: Add the second view.

The name of second view is "ShowData"

Step 8: Add ShowData view code.

Code:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!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 runat="server">
<title>Index</title>
</head>
<body>
<div style="background-color: #FF80C0">
<h2><%= Html.Encode(ViewData["Message"]) %></h2>
<br /><br />
<% using (Html.BeginForm("ShowData", "Home")) %>
<% { %>
Enter your name: <%= Html.TextBox("NAME") %>
<br /><br />
Select your favorite color:<br />
<%= Html.RadioButton("COLOR", " Gray", true)%> Blue <br />
<%= Html.RadioButton("COLOR", "Violet", false)%> Purple <br />
<%= Html.RadioButton("COLOR", " Cyan", false)%> Red <br />
<%= Html.RadioButton("COLOR", "Orange", false)%> Orange <br />
<%= Html.RadioButton("COLOR", "White", false)%> Yellow <br />
<%= Html.RadioButton("COLOR", "Atomic tangerine", false)%> Brown <br />
<%= Html.RadioButton("COLOR", "Azure", false)%> Green
<br /><br />
<%= Html.CheckBox("BOOK") %> I read more novels or magazine.<br />
<br /><br />
My favorite pet: <%= Html.DropDownList("PETS") %>
<br /><br />
<input type="submit" value="Submit" />
<% } %>
</div>
</body>
</html>

Step 9: Set the root of the application.

The Global.axpx code is.

Code:
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
);
}

Step10: Press crtl+f5 run application.

Output: