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


  • Creating Reactive Applications in .NET

    In modern applications, data is being retrieved in asynchronous, real-time streams, as traditional pull requests where the clients asks for data from the server are becoming a thing of the past.

  • AI for GitHub Collaboration? Maybe Not So Much

    No doubt GitHub Copilot has been a boon for developers, but AI might not be the best tool for collaboration, according to developers weighing in on a recent social media post from the GitHub team.

  • Visual Studio 2022 Getting VS Code 'Command Palette' Equivalent

    As any Visual Studio Code user knows, the editor's command palette is a powerful tool for getting things done quickly, without having to navigate through menus and dialogs. Now, we learn how an equivalent is coming for Microsoft's flagship Visual Studio IDE, invoked by the same familiar Ctrl+Shift+P keyboard shortcut.

  • .NET 9 Preview 3: 'I've Been Waiting 9 Years for This API!'

    Microsoft's third preview of .NET 9 sees a lot of minor tweaks and fixes with no earth-shaking new functionality, but little things can be important to individual developers.

  • Data Anomaly Detection Using a Neural Autoencoder with C#

    Dr. James McCaffrey of Microsoft Research tackles the process of examining a set of source data to find data items that are different in some way from the majority of the source items.

Subscribe on YouTube