ASP.NET MVC DropDown List Example

  • Sharebar

Today I wanted to cover implementing a dropdown list with ASP.NET MVC. I’ll use the same example I used when I blogged about implementing select lists except that this time you can only choose one category.

To begin I’ll define two model classes for Category and Product. I’ll use a Listto store the categories that the user can choose from. Normally the values would come from a service class but for simplicity I’ll populate them in the controller. The other class is Product which has the category ID stored in the CategoryID property.

namespace MvcApplication2.Models
{
    public class Category
    {
        public int ID { get; set; }

        public string Name { get; set; }
    }

    public class Product
    {
        public int CategoryID { get; set; }

        public Product()
        {
            CategoryID = 0;
        }
    }
}

Next we need a controller.


namespace MvcApplication2.Controllers
{
    public class HomeController : Controller
    {
        private List<Category> GetOptions()
        {
            List<Category> categories = new List<Category>();
            categories.Add(new Category() { ID = 1, Name = "Bikes" });
            categories.Add(new Category() { ID = 2, Name = "Cars" });
            categories.Add(new Category() { ID = 3, Name = "Trucks" });

            return categories;
        }

        public ActionResult Index()
        {
            Product product = new Product();
            ViewBag.Categories = GetOptions();
            return View(product);
        }

        [HttpPost]
        public ActionResult Index(Product product)
        {
            ViewBag.Categories = GetOptions();
            return View(product);
        }
    }
}

I’ve used a private method called GetOptions() to populate a list with the categories. In real world applications you’ll have a service (business logic) class that provides these.

GET requests are handled by the first Index action. It passes the dropdown list options to the view using the ViewBag. You could use ViewData just as easily. It also creates a new Product which becomes the model for the view. If you want to pre-select the value then simply add this to the controller:

            product.CategoryID = 1;

The second Index action handles POST requests. The values for product are populated by the default binder that comes with ASP.NET MVC. Finally I have a view that displays the selected value with a dropdown list below it allowing you to change the selected option.

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

<!DOCTYPE html>

<html>
<head runat="server">
    <title>ASP.NET MVC Select List Example</title>
    <link type="text/css" href="../../Content/Site.css" rel="Stylesheet" />
</head>
<body>
    <div>

<h1>Selected Value</h1>
<p>Value is <%: Model.CategoryID %></p>

<%: Html.DisplayForModel() %>

<h1>Change Values</h1>
<% using (Html.BeginForm())
   { %>
   <%: Html.DropDownListFor(x => x.CategoryID, new SelectList(ViewBag.Categories, "ID", "Name", Model.CategoryID)) %>
   <br />
   <input type="submit" value="Submit" />
<% } %>
    </div>
</body>
</html>

In the view I’m using the Html.DropDownListFor() helper to render the dropdown list. The second value passed to this is a list of options which I’m building using the SelectList class. The constructor I’m using accepts 4 parameters:

  1. A list of options. In our example it’s our List<Category>.
  2. The name of the property that contains the value used in the dropdown list. I’m using “ID” here because I want to use the ID property of Category.
  3. The name of the property the contains the text to use for each option. I’m using “Name” here because I want to use the Name property of Category.
  4. The currently selected value.

As with the select list example I’m passing a list of Category objects from the controller to the view instead of a SelectList. The reason I do this is to make the code easier to unit test. In real world code the list of categories would come from a service class. When writing a unit test I would use a framework like Moq to create a mock service class and have it return a specific instance of List<Category>. The unit test would then assert that the instance was passed correctly to the view. If my controller converted the list returned by the service into a SelectList then this becomes much more difficult.

Here’s what it looks like when you first display the dropdown list…

Dropdown List before selecting a value

… and after you’ve selected a value

Dropdown List after selecting value

About Rich

Rich Buggy has been building websites in 1995. Located in Sydney, Australia he currently works as the founder of Zoombug (owners of this site) and is the Chief Technology Officer at Funbox Media Group. For many years his first love was PHP before discovering ASP.NET MVC. You can follow Rich on Twitter or Google +
This entry was posted in General. Bookmark the permalink.

One Response to ASP.NET MVC DropDown List Example

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>