Practical .NET

Add a Multi-Select ListBox or DropDownList to Your ASP.NET MVC View

Peter doesn't like them, but that doesn't mean you have to hate 'em, too -- here's how to add a listbox or dropdown list to your View that lets users select multiple items.

Personally, I think adding a listbox to your page that allows a user to select multiple items is a mistake. My guess is that most users don't know how to use a multiselect list and, without some special directions on the page, won't even know that they can make multiple selections.

Really, my feeling is that, if you need multiple selections, you should be using checkboxes (which users do know how to use and instantly recognize). I've discussed a complete solution -- which tells you both what the user selected and left unselected -- looks like elsewhere.

Still, if you're tight for screen space, you might find yourself forced into using a multiselect list.

Your first step is to create, typically in an Action method, a MultiSelectList object to hold all of the choices you'll present to the user. When you create the list, you'll want to pass three parameters: the collection of objects (in the following code that's sales orders for a customer), the property whose value you want sent back to the server for the selected items (Id), and the property whose value you want to display in the list (OrderDate):

ViewBag.Orders = New MultiSelectList(cust.SalesOrders, "Id", "OrderDate")

You can pass the list through a property on your View's Model object, but I typically pass my lists using the ViewBag, as I've done here.

In your View, you can display your list using a DropDownList (adding the multiple attribute) or a ListBox. Either way, you'll get the same HTML. The two versions of the code look like this:

@Html.DropDownListFor(Function(m) m.SalesOrders, DirectCast(ViewBag.Orders, MultiSelectList), 
  New With {.multiple = "multiple"})
@Html.ListBoxFor(Function(m) m.SalesOrders, DirectCast(ViewBag.Orders, MultiSelectList))

When users submit the form (after making their choices), what's going to arrive at the Action method is an array of whatever property you specified in the MultiSelectList's second parameter. I specified the SalesOrder object's Id property, which is an Integer, so I'll be getting an array of Integers. The property I passed to the DropDownListFor was called SalesOrders, so that's the name I should expect to get the data back in.

Of course, it's possible that the user won't have selected anything, in which case the array will be null/Nothing, and you should check for that. If the array is present, you can process it with a For…Each loop. Putting that all together, the Action method that processes my submitted form data will look something like this:

Function Index(cust As Customer, SalesOrders As Integer()) As ActionResult
  '...code to process Customer object...
  If SalesOrders IsNot Nothing Then      
    For Each Ord As Integer In SalesOrders
      '...code to process selected items
  End If
End Function

I still don't like 'em, though.

About the Author

Peter Vogel is a system architect and principal in PH&V Information Services. PH&V provides full-stack consulting from UX design through object modeling to database design. Peter tweets about his VSM columns with the hashtag #vogelarticles. His blog posts on user experience design can be found at

comments powered by Disqus


  • Uno Platform Ports Windows Calculator to Linux

    Uno Platform has ported the famed Windows Calculator, open sourced last year, to Linux as part of a continuing "proof point" effort to demonstrate the reach of what it describes as the sole UI offering available to target Windows, WebAssembly, iOS, macOS, Android and Linux with single-codebase applications coded in C# and XAML.

  • ASP.NET Core OData 8 Preview Supports .NET 5, but with Breaking Changes

    ASP.NET Core OData, which debuted in July 2018, is out in a v8.0 preview that for the first time supports the upcoming .NET 5 milestone release.

  • VS Code Java Team Details 5 Best Dev Practices

    Microsoft's Visual Studio Code team for Java development added a new Coding Pack for Java installer and detailed best practices for setting up a development environment.

  • Binary Classification Using PyTorch: Defining a Network

    Dr. James McCaffrey of Microsoft Research tackles how to define a network in the second of a series of four articles that present a complete end-to-end production-quality example of binary classification using a PyTorch neural network, including a full Python code sample and data files.

  • Blazor Debugging Boosted in .NET 5 RC 2

    In highlighting updates to ASP.NET Core in the just-launched second and final Release Candidate of .NET 5, Microsoft pointed out better debugging for Blazor, the red-hot project that allows for C# coding of web projects.

Upcoming Events