CODEWITHSUNDEEP
asp.net-mvcrazorlistboxmultiple-select
iCollect.it Ltd
iCollect.it Ltd

Reputation: 93571

Why are the initial multiple selections of an Html.ListBox not visible?

I am testing a new plugin that converts a multiple-select ListBox to a set of multiple mutually-exclusive single-select drop-down lists. This should have been very straight-forward, as I just wanted to start with some items selected, but the answer eludes me so far.

I have reduced the problem to the following simple controller code (the plugin was turned off so is not a factor):

List<SelectListItem> selectList2 = db.LookupType.Select(x => new SelectListItem() { Selected = x.LookupTypeId < 4, Value = x.LookupTypeId.ToString(), Text = x.Name }).ToList();
ViewBag.LookupTypeId2 = selectList2;

This will mark Selected = true on the first three items as the IDs start at 1 (confirmed in debugger that the first 3 items have Selected = true).

And the view looks like this:

@Html.ListBox("LookupTypeId2", (IEnumerable<SelectListItem>)ViewBag.LookupTypeId2, htmlAttributes: new { @class = "form-control"})

The resulting output however has no selected items:

<select name="LookupTypeId2" class="form-control" id="LookupTypeId2" multiple="multiple">
    <option value="1">Degree</option>
    <option value="2">WorkdayLanguage</option>
    <option value="3">Language_Ability_Type_ID</option>
    <option value="4">National_ID</option>
    <option value="5">Phone_Device_Type_ID</option>
    <option value="6">Background_Check_Status_ID</option>
    <option value="7">Educational_Institution_Type_ID</option>
    <option value="8">Gender_Code</option>
    <option value="9">Military_Status_ID</option>
    <option value="10">Ethnicity_ID</option>
</select>

I have no problem selecting multiples with CTRL-Click etc, but the initial selections are not visible. What am I missing here?

Update: based on answer below I changed it to a ListBoxFor 

@Html.ListBoxFor(x=>x.LookupTypeId2, (IEnumerable<SelectListItem>)ViewBag.LookupTypeId2, htmlAttributes: new { @class = "form-control"})

have added the following value initialization:

List<SelectListItem> selectList2 = db.LookupType.Select(x => new SelectListItem() { Selected = x.LookupTypeId < 4, Value = x.LookupTypeId.ToString(), Text = x.Name }).ToList();
lookup.LookupTypeId2 = new string[]{"1","2","3","4"};
ViewBag.LookupTypeId2 = selectList2;

Also tried with int array as suggested:

List<SelectListItem> selectList2 = db.LookupType.Select(x => new SelectListItem() { Selected = x.LookupTypeId < 4, Value = x.LookupTypeId.ToString(), Text = x.Name }).ToList();
lookup.LookupTypeId2 = new int[]{1,2,3,4};
ViewBag.LookupTypeId2 = selectList2;

But still nothing is selected.

Upvotes: 0

Views: 735

Answers (1)

user3559349
user3559349

Reputation:

Firstly you need a property to bind to. A multiple select will only post back a collection of value types, but your trying to bind to List<SelectListItem>. Add a property (say) public int[] SelectedItems { get; set; } to your model and then use

@Html.ListBoxFor(m => m.SelectedItems, (IEnumerable<SelectListItem>)ViewBag.LookupTypeId2, htmlAttributes: new { @class = "form-control"})

Then if the values of SelectedItems matches any of the options, those options will be selected, for example if model.SelectedItems = new int[] { 2, 10 }; then the 2nd and last options will be selected when you display the page. You do not (and should not) set the Selected property of SelectListItem when your binding to a property.

Upvotes: 2

Related Questions