Question

I want to do the following:

1: Add two dropdown list in the register.aspx [Say ddlRole,ddlGender]

2: Fill the dropdown list [ ddlRole should be filled from the database, and ddlRole should have two static field]

3: On submit I want to get the selected value of the two dropdown list.

Please help.

Thanks in advance.

Answer 1

Well, your question is kind of “Can you tell me how to build a shuttle?”. But i will try to show you the small example that will help you (I really hope)

First of all,if you want to get dropdowns on the page, you need to create it.

In terms of MVC you need to create a View.
That View is MVC styled aspx page

below is an example:

    <%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<h2>Register</h2>

This is a plain empty page.

Let’s fill it up with dropdowns.

<h2>Register</h2>
<%= Html.DropDownList("ddlRole") %>
<%= Html.DropDownList("ddlGender") %>

Okay. Now, time to make the system to show our View.
To do that we need a motor. In terms of MVC it calling a Controller.

Create a class with the method:

public class SetupController : Controller
{
        public ActionResult Register( )
        {
            return View();
        }
}

If you now will try to launch the page you should see your two dropdowns.
Unfortunately they will be empty.
Obviously they are empty because you did not tell how to fill them.

The main purpose of controllers is to connect model that contains all the data that should be processed and shown with the view side. In other words, the controller takes the data from the model (M), prepares it and sends to the View (V).

So, first of all we need to adjust our controller, so it will tell the view an information about the content for dropdowns.
The easiest way is to use ViewData collection:

public ActionResult Register( )
        {
            ViewData["ddlRole"] = new[] {
                                             new SelectListItem() {Text = "Customer", Value = "Customer"},
                                             new SelectListItem() {Text = "Supervisor", Value = "Supervisor"},
                                             new SelectListItem() {Text = "Admin", Value = "Admin"},
                                         };
            ViewData["ddlGender"] = new[]{
                                             new SelectListItem() {Text = "Male", Value = "Male"},
                                             new SelectListItem() {Text = "Female", Value = "Female"}
                                         };
            return View();
        }

As you can see from this example i created the content for the dropdowns dynamically.
In your case you can use your database to fill dropdowns as you want.

If you try to open your page now, you will see that your dropdowns are filled with the data now!

Great!

If you ask, how the view knows what content to use for the dropdown, i will answer that MVC is using a lot of conventions. One of that conventions is that when the View is generating its controls its looking for the content for that controls by the key that equals to the name of the control (i.e. “ddlRole”, “ddlGender”)
Since you put the values for that keys to the ViewData, its easy for MVC to fill your dropdowns with the text!

Cool!

Going forward.

Now, we need to gather the data from the page and send it back to the server.

What we need for that?

Of course, first of all we need a submit button:

<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage" %>


    <h2>Register</h2>
    <%= Html.DropDownList("ddlRole") %>
    <%= Html.DropDownList("ddlGender") %>

    <input type="submit" value="Register Me" />

Open the page in the broser again.
Cool! We have the button, but, if we try to click on it, nothing will happen.

If you are thinking in terms of classic ASP.NET, you will tell that we forgot to assign an event on the button submit, write codebehind code and bla…bla..bla…

In MVC its a bit different. We just need to send the content to the server.
To do that, normally you should have a “form” tag on your page :

<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<% using (Html.BeginForm("DoRegister", null)) { %>
<h2>Register</h2>
    <%= Html.DropDownList("ddlRole") %>
    <%= Html.DropDownList("ddlGender") %>
    <input type="submit" value="Register Me" />
<%  } %>

This using code block will just wrap our tags with begin and end “form” tags.
This make the browser to gather an information from all inputs inside the form (in our case its our dropdows) and send them back from the point where they were opened.

Try to open it in the browser and click the button

Oops, we got an exception. The reason of it is that we forgot the rules.
What we intended to do ? We want to send the data to our business model.
Who should be responsible for that ? Of course it should be a controller (C), because its a main and only connector between Model (M) and View (V)

Let’s add new action to the same controller :

public ActionResult DoRegister(string ddlRole, string ddlGender)
    {
        ////store our ddlRole and ddlGender in the database
        /// ......
        /// .....

        return RedirectToAction("Welcome");
    }

In this example it redirecting to the “Welcome” action once registration has finished.

To finish an example and avoid errors, we need to implement Welcome action and view:

Add this to the controller:

public ActionResult Welcome( )
    {
        return View();
    }

And create new View for the Welcome action (Right click on “Welcome” code and select “Add View…”):

<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<h2>Welcome!</h2>

Now you will see that once you click the button it will show you the result of Welcome action execution – Welcome page.

Last trick – let’s send selected dropdown values to the welcome page.

To do that, we firstly need to store that values somewhere at the moment when we got it from the server.
In your case you may use the Database, but to make it simpler, i will use special TempData collection:

public ActionResult DoRegister(string ddlRole, string ddlGender)
        {
            ////store our ddlRole and ddlGender in the database
            /// ......
            /// .....

            TempData["SelectedRole"] = ddlRole;
            TempData["SelectedGender"] = ddlGender;

            return RedirectToAction("Welcome");
        }

Next, let make our welcome page to show the values from TempData collection:

<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<h2>Welcome you, the <%= TempData["SelectedRole"]%> of <%= TempData["SelectedGender"] %>!</h2>

Run it!
Do you see the values ?
Yeah, You made it!

Simple and easy.

I hope this article will help you to start realize how great ASP.NET MVC is.
But the code above is just a top of the iceberg.
Actually the MVC is MUCH MUCH MUCH more fun then this.

If you are interesting in getting more knowledge about it, I would really recommend you to read APress “ASP.NET MVC Framework” by Steven Sanderson.
Really great book that contain everything to start writing your own MVC applications on MVC.

Have a good luck!