Bind <select> with multi options in ASP.Net MVC

Question

I have a form where the user can add some sort of categories and add some options to those categories. When the user enter the data for the category and its items, I dynamically add them in a <select>, where the category is the <optgroup>, so I can bind it to some ViewModel property, it looks like this after the user entered the data:

<select asp-for="Items">
   <optgroup label="Brands">
       <option value="Brand1">Brand1</option>
       <option value="Brand2">Brand2</option>
       <option value="Brand3">Brand3</option>
       <option value="Brand4">Brand4</option>
   </optgroup>
   <optgroup label="Something">
       <option value="Something1" selected>Something1</option>
       <option value="Something2" selected>Something2</option>
       <option value="Something3" selected>Something3</option>
       <option value="Something4" selected>Something4</option>
   </optgroup>
</select>

Then I try to bind this to the Items property in the ViewModel, but the only way I can bind this, is with the Items of the type List<string>. This way I lost the Group each option belongs to. How could I bind it for something like a Dictionary<string, List<string>> where I can keep the grouping that I did on the html?

PS.: The select will be invisible, its only a way for me to get the data in some structure that I can submit in a form. The presentation will be done in some sort of tags. Like:

You cannot. A <select> only posts back the values of its selected options (and binds to IEnumerable<string>). Nothing related to its <optgroup> are sent in the request. — user3559349
– user3559349, Commented Apr 4, 2017 at 22:25
Isn't there any way other than making the value="brand__brandname" of each option and dealing it on the controller ? — Diego Barreto
– Diego Barreto, Commented Apr 5, 2017 at 3:34

Andrew S · Accepted Answer · 2017-04-06 16:51:30Z

I admit, I'm not sure if this answer is quite what you are asking, since I rarely use ViewModels in my app. I'll try to update my answer if I missed the mark.

You can create a SelectList out of a Model which includes the grouping. In my example, I have a "State/Province" field which is grouped by Country.

So in my Create method of my Controller, I have:

ViewData["StateList"] = new SelectList(_context.Set<State>(), "ID", "Name", "", "CountryID");

Where the paramaters are:

new SelectList(IEnumerable items,
   string dataValueField,
   string dataTextField,
   object selectedValue,
   string dataGroupField)

Then my View takes in this SelectList to automatically group elements.

<select class="form-control" style="width: 200px;" asp-for="StateID" asp-items="ViewBag.StateList">
    <option>-- Select One --</option>
</select>

Where StateID is the database field, and ViewBag.StateList is the equivalent of the ViewData["StateList"] we created in the controller.

Collectives™ on Stack Overflow

Bind <select> with multi options in ASP.Net MVC

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related