DropDownListFor not binding correctly on postback

Question

I have a drop down list that isn't working correctly. I can get the correct items from the db and display them on the get, but when I post back on submit 'listLanguages' is null. I'm not sure if my html DropDownListFor properties are correct?

Here is my code

in my viewmodel

public IEnumerable<SelectListItem> listLanguages { get; set; }

in my View

@Html.DropDownListFor(model => model.ProfileGeneralViewModel.listLanguages, Model.ProfileGeneralViewModel.listLanguages, new { @class = "multiple-languages form-control", @style = "width: 100%", @multiple = "multiple" })

here's my get

var languages = Enum.GetNames(typeof(SpokenLanguages)).AsEnumerable();
var selectedLanguages = yogaProfile.Languages != null ? yogaProfile.Languages.Split(',').ToList() : new List<string>();
viewModel.ProfileGeneralViewModel.listLanguages = languages.Select(d => new SelectListItem
     {
         Text = d.ToString(),
          Value = d.ToString(),
          Selected = selectedLanguages.Contains(d.ToString())
      });

You cannot bind a `` - refer [this answer](https://stackoverflow.com/questions/40725358/why-does-the-dropdownlistfor-lose-the-multiple-selection-after-submit-but-the-li/40732481#40732481). Your model needs a separate property `IEnumerable SelectedLanguages` to bind to — , Sep 04 '17 at 23:22

Shyju · Answer 1 · 2017-09-04T23:40:36.407

1

You should use another property to hold the selected item in your view model

public class YourViewModel
{
  public string[] SelectedLanguages { set;get;}
  public IEnumerable<SelectListItem> listLanguages { get; set; } 
  //your other properties needed for the view.
}

and use that in the ListBoxFor helper as the first parameter

@Html.ListBoxFor(model => model.SelectedLanguages , 
       Model.ProfileGeneralViewModel.listLanguages, 
      new { @class = "multiple-languages form-control", @style = "width: 100%" })

Now when you submit the form, the SelectedLanguages property will have the selected items.

You will not get the value of ProfileGeneralViewModel.listLanguages in your HttpPost action method. When the form gets submitted,It sends the values of the input elements in it. The value of your SelectedLanguage dropdown will be the option user selected, not the collection used to build the dropdown.

If you need to return to the same view,you need to reload that collection before sending back to the view which is using it.

edited Sep 04 '17 at 23:40

answered Sep 04 '17 at 23:22

Shyju

214,206
104
411
497

It has to be `ListBoxFor()` to correctly bind to a ` – Sep 04 '17 at 23:23
It does bring up a SELECT element with multi select support in chrome and edge – Shyju Sep 04 '17 at 23:30
It does not bind correctly! Refer the link in my comment to the question. – Sep 04 '17 at 23:31
When user submits the data (in httppost action) ? It does. just verified in an MVC5 app. `SelectedLanguages ` property gets populated with all the selected option values. – Shyju Sep 04 '17 at 23:32
Read the link! (if you return the view the options the user selected are lost, and you cannot use it for editing existing objects - the preselected options will not be selected - i.e. it does NOT bind correctly) – Sep 04 '17 at 23:34
Yes. You are correct. binding does not work for pre selecting items if you do not use `ListBoxFor` helper. Thanks – Shyju Sep 04 '17 at 23:38
1

You should also now remove the unnecessary `new { @multiple = "multiple" }` :) – Sep 04 '17 at 23:38

DropDownListFor not binding correctly on postback

1 Answers1