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

Question

I have this VM properties

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

I have this 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 my 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);
        }

Yet when I load up my view. None of values for my ListBox are selected. I am not sure why. If this was a selectList this would work as it would match up the SelectedEligiableCategories to the value in the list.

I am not sure if this is because there is multiple selects

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>

Do you think it is because I am using http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/ ?

Edit2

I gone ahead and make an example. I must be missing something(not sure what). When I use "Darin Dimitrov" it works.

I switched the example to a dropdown as I am getting the same problem with it as well.

In this example I am not using a viewmodel since my initial assumption was somehow the helper I was using from Steven Sanders might be effecting it so I was going off his example.

This does not seem to be the case as I removed 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 to not be able to handle when you put it in forloop and try it make more than one dropdown list.

I have a complete sample at code.msdn.microsoft.com/Using-the-DropDownList-67f9367d — RickAndMSFT
– RickAndMSFT, Commented Jan 2, 2012 at 18:29

Darin Dimitrov · Accepted Answer · 2012-01-06 08:06:13Z

13

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:

enter image description here

UPDATE:

Now that you have shown an example allowing to illustrate the problem, you could specify the selected item when building the SelectList:

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

The reason a value was not preselected was because you were binding the dropdownlist to a list of properties (x => x[i].SelectedItem) whereas in my example I was using a simple property.

And if you wanted to do this with the ListBoxFor helper you could 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 we use a MultiSelectList instead of a SelectList.

edited Jan 6, 2012 at 8:06

answered Jan 2, 2012 at 15:29

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

chobo2 Over a year ago

It looks pretty much what I have. I wonder why it does not work for me.

Darin Dimitrov Over a year ago

@chobo2, I don't know, I have showed a working version. Maybe you would like, the same way I did, provide a full example illustrating your problem. View model, controller (with hardcoded values) and view would be welcome to allow people reproducing the issue and hopefully helping you resolve it.

chobo2 Over a year ago

Ok I updated my post. It is actually happening with my dropdowns as well(so I made a hardcoded example of this).

Darin Dimitrov Over a year ago

@chobo2, thank you. Now your question is much more clear. I have updated my answer to provide you with a solution.

chobo2 Over a year ago

Interesting. So if you are just making one you can use the simple property and it will figure it out. But if you need a collection like I did then you need to specify the the selected list collection again so it has something compare it against?

|

Jalal El-Shaer · Accepted Answer · 2012-01-27 13:52:59Z

3

The main problem is using

@Html.DropDownListFor

instead of this

@Html.ListBoxFor

Using the DropDownListFor will NOT help you with multiple values, whatever you do and no matter what your model is. Once you use ListBoxFor ... it will automatically just work !

answered Jan 27, 2012 at 13:52

Jalal El-Shaer

14.7k8 gold badges48 silver badges51 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related