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.
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 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.
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:
