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.

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.

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.


7 Responses to “ASP.NET MVC: Displaying and Retrieving Values from a List of Checkboxes”

  1. gustavo Says:


  2. Jim Says:

    Thank you, Good example. this was very helpful.

  3. Hari Says:

    Thank you, your blog help me move forward.

  4. JamirJr Says:

    Thanks a lot!!

  5. G Erler Says:

    IMHO This was a million dollar answer!!!
    Thank you so much.
    I was MVC I didn’t have the native checkbox list to work with.

  6. Phumagu Says:

    Hi Nick,
    I’m still having issues passing the checked values to the Export function. Any help would be appreciated. Thanks.

    public class SeriesVariableViewModel
    public SeriesViewModel series { get; set; }
    public IEnumerable variableList { get; set; }

    public Guid[] cbSeriesVariable { get; set; }
    public ActionResult Export(SeriesVariableViewModel variable)
    @Html.ActionLink(“Export to Excel”,”Export”,”Export”)

  7. riparazione wifi grigio Says:

    Thanks for your article, I appreciated it.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: