ASP.NET MVC: Displaying and Retrieving Values from a List of Checkboxes

I ran into a snag the other day when trying to display a list of checkboxes and then retrieve the values of the ones the user checked using ASP.NET MVC. After some research it turns out it is pretty simple to do. Imagine that you are giving a user the ability to add a product to a catalog and you want to display a list of checkboxes that will allow the user to associate the product with one or more categories. Something to the effect of that shown below.

First, we will pass the view a list of ProductCategory objects.

[HttpGet]
public ActionResult New()
{
    // Create a list of product categories manually for example purposes
    List<ProductCategory> categories = new List<ProductCategory>()
    {
        new ProductCategory() { Id = 1, Name = "Books" },
        new ProductCategory() { Id = 2, Name = "Games" },
        new ProductCategory() { Id = 3, Name = "Videos" },
        new ProductCategory() { Id = 4, Name = "Music" }
    };

    ViewData["categories"] = categories;

    return View(new ProductsViewModel());
}

In the View, we then need to loop through the ProductCategory objects and create a new checkbox for each category. The first key to making this work is to ensure that each of the checkboxes have the same name. Below I have named each of the checkboxes CategoryIds. The second key is to assign the value attribute a value that identifies each of the categories, in this case, the Id property of the category. Include the following code in the View where you want to display the checkboxes.

<% foreach (var category in (List<MVCTest.Models.ProductCategory>)ViewData["categories"]) { %>
    <input type="checkbox" name="CategoryIds" value="<%: category.Id %>" /> <%: category.Name %>
<% } %>

Using the model binding magic of ASP.NET MVC we can create an array of integers named CategoryIds in the model that is returned from the View and it will be automatically be populated with the values assigned to the value attribute of the each checkboxes we created for each product category. Just make sure that the name of the array matches the name of each of the checkboxes you created. Below is an example of the model returned from the View.

public class ProductsViewModel
{
    public string Title { get; set; }
    public string Description { get; set; }
    public decimal Price { get; set; }
 
    // Integer array with name matching that of the checkboxes it's associated with
    public int[] CategoryIds { get; set; }
}

Then in the action method that is called on the post, add the ProductViewModel as a parameter. As mentioned, the ProductsViewModel.CategoryIds array will automatically be populated with the ids of the categories that the user checked.

[HttpPost]
public ActionResult New(ProductsViewModel product)
{
       // The prodcut.CategoryIds array will be populated
       // with the values from the checked checkboxes
}

In the example above, the ProductViewModel.CategoryIds array will have a single element, 2, since we only checked the Games category.