How to show multiple selected using asp.net mvc 3 and ListBoxFor?

Question

I have these VM properties

public IList<Guid> SelectedEligiableCategories { get; set; } public IList<SelectListItem> EligiableCategories { get; set; } 

I have these helpers in my view

  @Html.LabelFor(x => x.EligibleCategoryFrmVm.SelectedEligiableCategories, "Eligible Categories:") @Html.ListBoxFor(x => Model.EligibleCategoryFrmVm.SelectedEligiableCategories, Model.EligibleCategoryFrmVm.EligiableCategories, new { @class = "eligibleCategoryListBox" }) 

I have this code in the controller

  List<SelectListItem> eligibleCategoriesListItems = Mapper.Map<List<EligibleCategory>, List<SelectListItem>>(eligibleCategories); foreach (var rewardTier in creditCard.RewardTiers) { CbRewardTierFrmVm rewardTierFrmVm = new CbRewardTierFrmVm(); rewardTierFrmVm.EligibleCategoryFrmVm.EligiableCategories = eligibleCategoriesListItems; foreach (var ec in rewardTier.EligibleCategories) { rewardTierFrmVm.EligibleCategoryFrmVm.SelectedEligiableCategories.Add(ec.Id); } vm.CbRewardTierFrmVm.Add(rewardTierFrmVm); } 

But when I upload my opinion. None of the values ​​for my list have been selected. I do not know why. If it were a selectList, it would work, since it would match the SelectedEligiableCategories value in the list.

I'm not sure if this is due to the fact that there are several options

Edit

 <select name="CbRewardTierFrmVm[63b504c0-0f9a-47ba-a8ff-db85f48d5f0f].EligibleCategoryFrmVm.SelectedEligiableCategories" multiple="multiple" id="CbRewardTierFrmVm_63b504c0-0f9a-47ba-a8ff-db85f48d5f0f__EligibleCategoryFrmVm_SelectedEligiableCategories" data-val-required="Must choose at least one eligible category." data-val="true" class="eligibleCategoryListBox ui-wizard-content ui-helper-reset ui-state-default" style="display: none;"> <option value="ed2bb5f9-4565-4f69-ab15-9fca011c0692">Gas</option> </select> -47ba-a8ff-db85f48d5f0f] .EligibleCategoryFrmVm.SelectedEligiableCategories" multiple = "multiple" id = "CbRewardTierFrmVm_63b504c0-0f9a-47ba-a8ff-db85f48d5f0f__EligibleCategoryFrmVm_SelectedEligiableCategories" data-val-required = "Must choose at <select name="CbRewardTierFrmVm[63b504c0-0f9a-47ba-a8ff-db85f48d5f0f].EligibleCategoryFrmVm.SelectedEligiableCategories" multiple="multiple" id="CbRewardTierFrmVm_63b504c0-0f9a-47ba-a8ff-db85f48d5f0f__EligibleCategoryFrmVm_SelectedEligiableCategories" data-val-required="Must choose at least one eligible category." data-val="true" class="eligibleCategoryListBox ui-wizard-content ui-helper-reset ui-state-default" style="display: none;"> <option value="ed2bb5f9-4565-4f69-ab15-9fca011c0692">Gas</option> </select> 

What do you think, because I'm using http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/ ?

Edit2

I went ahead and give an example. I have to miss something (I don’t know what). When I use Darin Dimitrov, it works.

I switched this example to a drop-down list since I have a problem with it too.

In this example, I do not use the viewmodel, since my initial assumption was somehow an assistant that I used from Stephen Sanders, maybe this affected me, so I left his example.

This does not seem to be the case since I deleted it and still get this problem.

  public class Gift { public string Name { get; set; } public double Price { get; set; } public string SelectedItem { get; set; } public IList<SelectListItem> Items { get; set; } } public ActionResult Index() { List<SelectListItem> items = new List<SelectListItem> { new SelectListItem {Value = "",Text ="--"}, new SelectListItem {Value = "1",Text ="1"}, new SelectListItem {Value = "2",Text ="2"}, }; var initialData = new[] { new Gift { Name = "Tall Hat", Price = 39.95, Items = items, SelectedItem = "2" }, new Gift { Name = "Long Cloak", Price = 120.00, Items = items, SelectedItem = "1" } }; return View("Index3",initialData); } @model IList<EditorDemo.Models.Gift> @{ ViewBag.Title = "Index3"; } @for (int i = 0; i < Model.Count; i++) { @Html.DropDownListFor(x => x[i].SelectedItem, new SelectList(Model[i].Items, "Value", "Text")) } 

It seems that you will not be able to process when you put it in forloop, and try to make more than one drop-down list.

Answer 1

The following works for me.

Model:

 public class MyViewModel { public IList<Guid> SelectedEligiableCategories { get; set; } public IList<SelectListItem> EligiableCategories { get; set; } } 

Controller:

 public class HomeController : Controller { public ActionResult Index() { var model = new MyViewModel { SelectedEligiableCategories = new[] { // preselect the second and the fourth item new Guid("35830042-3556-11E1-BCDC-A6184924019B"), new Guid("4253876A-3556-11E1-BC17-B7184924019B") }.ToList(), EligiableCategories = new[] { new SelectListItem { Value = "2DA62E3A-3556-11E1-8A0A-9B184924019B", Text = "item 1" }, new SelectListItem { Value = "35830042-3556-11E1-BCDC-A6184924019B", Text = "item 2" }, new SelectListItem { Value = "3D07EBAC-3556-11E1-8943-B6184924019B", Text = "item 3" }, new SelectListItem { Value = "4253876A-3556-11E1-BC17-B7184924019B", Text = "item 4" }, } }; return View(model); } } 

View:

 @model MyViewModel @using (Html.BeginForm()) { @Html.ListBoxFor( x => x.SelectedEligiableCategories, Model.EligiableCategories, new { @class = "eligibleCategoryListBox" } ) } 

Result:

---

UPDATE:

Now that you have shown an example to illustrate the problem, you can specify the selected item when creating a SelectList :

 @Html.DropDownListFor( x => x[i].SelectedItem, new SelectList(Model[i].Items, "Value", "Text", Model[i].SelectedItem) ) 

The reason the value was not selected was because you linked the drop-down list to the property list ( x => x[i].SelectedItem ), while in my example I used a simple property.

And if you want to do this with the ListBoxFor helper, you can use the following:

 @Html.ListBoxFor( x => x[i].SelectedItems, new MultiSelectList(Model[i].Items, "Value", "Text", Model[i].SelectedItems) ) 

The SelectedItems property becomes a collection, and instead of SelectList we use a MultiSelectList .

Answer 2

The main problem is to use

 @Html.DropDownListFor 

instead of this

 @Html.ListBoxFor 

Using DropDownListFor will NOT help you with multiple values, no matter what you do, and regardless of your model. When you use ListBoxFor ... it will automatically work!