Post
Ask Question

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"

STARIIIIIIIIIIIIIIIIIIIII.gif

start.gif

Step 2: Add a controller.

  • Right click on the Controllers folder ->add->Controllers
  • Name of Controllers is "Home"
  • In a controller, define the request

addcontroller.gif

controller.gif

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"

add folder.gif

Step 5: Add the Two view.

  • The first view is "index"

addview.gif

indexview.gif

indexviewdesign.gif

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"

showdataindex.gif

showdataindex.gif

showdatadesign.gif

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:

Clipboard14.gif

 out2.gif


Similar Articles