Posts
ASP.NET MVC Select List Example
Select lists are a great way to allow users to select multiple options from a long list of possible values. But how do you implement a select list in ASP.NET MVC? Luckily ASP.NET MVC does most of the heavy lifting for you. For this example, I’m going to use a product that has multiple categories.
I’ll start by defining two model classes. The first class is called Category and I’ll use a list of them to store the possible values that will be displayed in the select list. For this example, I’ll manually populate these in the controller but you could as easily load them from a database. The other class is Product which has many category IDs stored in the CategoryID property (a collection of int’s).
amespace MvcApplication2.Models
{
public class Category
{
public int ID { get; set; }
public string Name { get; set; }
}
public class Product
{
public ICollection CategoryID { get; set; }
public Product()
{
CategoryID = new List();
}
}
}
Next, we need a controller.
namespace MvcApplication2.Controllers
{
public class HomeController : Controller
{
private List GetOptions()
{
List categories = new List();
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 created a private method called GetOptions() to populate a list with the categories. In real-world applications, you will have a service (business logic) class that provides these.
GET requests are handled by the first Index action. It passes the select 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 values then simply add them as follows:
product.CategoryID.Add(1);
product.CategoryID.Add(3);
The second Index action handles POST requests. The values for the product are populated by the default binder that comes with ASP.NET MVC. This will add all of the values the user selected on the form so you don’t need to do anything.
Finally, I have a view that displays the selected values as an unordered list with a select list below it allowing you to change the selected options.
In this view, we have using Html.ListBoxFor() helper to render the select list. The second value passed to this is a list of options that I’m building using the MultiSelectList class. The constructor I’m using accepts 4 parameters:
- A list of options. In our example, it’s List<Category>.
- The name of the property that contains the value used in the select list. we have using “ID” here because I want to use the ID property of Category.
- The name of the property contains the text to use for each option. We have using “Name” here because I want to use the Name property of Category.
- A list of currently select values.
You may be wondering why I pass a list of Category objects to the view instead of creating the MultiSelectList in the controller and then passing that to the view. Personally, I find creating the MultiSelectList in the controller both makes the controller more complicated and mixes view logic with controller logic. I also find this approach works better in real-world applications where you are probably getting the list of options from a service class. By doing it this way it’s possible to mock the service and test that the value returned by the service class is passed to the view correctly when writing unit tests.
Here’s what it looks like when you first display the select list…
… and after you’ve selected some values
Post A Comment:
0 comments: