ASP .Net MVC 3 Html.DropDown not binding to variable

Question

I have a list of Organizations (CalledOrganizationSelectList) and one of them is the one that's being called (CalledOrganizationId). I set both in my ViewModel but MVC / Razor doesn't render the dropdown correctly (ie does not set the selected="selected" attribute for the correct item in the dropdown).

There is a workaround which makes even less sense. I added a new member to my ViewModel and bound the dropdown to that. This works fine. Until just now when it's stopped working...

public class CallViewModel{
public int? CalledOrganizationId { get; set; }        
public SelectList CalledOrganizationSelectList { get; set; }}

In my controller:

var vm = new CallViewModel();
var calledOrganizationSelectList = new List<object>();
calledOrganizationSelectList.Add( new {Text="",Id=""});
calledOrganizationSelectList.AddRange(
db.MyOrganizations.OrderBy(x=>x.Name)
  .Select(x => new { Text = x.Name, Id =     x.Id.ToString()}).ToList());
var sl = new SelectList(calledOrganizationSelectList, "Id", "Text",
  vm.CalledOrganizationId);
vm.CalledOrganizationSelectList = sl;
return View(vm);

In my view:

<div>CalledOrganizationId = @Model.CalledOrganizationId : 
select list contains
<ul>@foreach (var itm in Model.CalledOrganizationSelectList)
  {<li>Value: @itm.Value Text: @itm.Text Is Selected: @itm.Selected</li>}
</ul>
</div>
@Html.DropDownList("CalledOrganizationId", Model.CalledOrganizationSelectList)

In my rendered page source:

<div>CalledOrganizationId = 38 : select list contains     
<ul>
<li>Value:  Text:  Is Selected: False</li>
<li>Value: 37 Text: rrr Is Selected: False</li>
<li>Value: 38 Text: sss1 Is Selected: True</li>
</ul>
</div>
<select data-val="true" data-val-number="The field CalledOrganizationId must be a number." id="CalledOrganizationId" name="CalledOrganizationId">
<option selected="selected" value=""></option> 
<option value="37">rrr</option> 
<option value="38">sss1</option> </select>

I've worked around it after first pulling out what was left of my hair and then by introducing a new variable on my ViewModel, which seems to work ok.

score 3 · Accepted Answer · answered Apr 02 '12 at 19:44

Having 2 properties on your viewmodel is the correct way to do DropDownLists. One property holds all of the available options, and the other holds the currently selected option:

public class CallViewModel
{
    // this captures the selected item
    public int? CalledOrganizationId { get; set; }

    // this contains the select list options     
    public IEnumerable<SelectListItem> CalledOrganizationSelectList { get; set; }
}

However, you do not need to add the empty option in the controller. You can do this in the view:

@Html.DropDownListFor(m => m.CalledOrganizationId, 
    Model.CalledOrganizationSelectList, "")

You can just get away with this in the controller:

var vm = new CallViewModel();
//var calledOrganizationSelectList = new List<object>();
//calledOrganizationSelectList.Add( new {Text="",Id=""});
//calledOrganizationSelectList.AddRange(
//db.MyOrganizations.OrderBy(x=>x.Name)
//  .Select(x => new { Text = x.Name, Id =     x.Id.ToString()}).ToList());
//var sl = new SelectList(calledOrganizationSelectList, "Id", "Text",
//  vm.CalledOrganizationId);
//vm.CalledOrganizationSelectList = sl;
vm.CalledOrganizationSelectList = db.MyOrganizations.OrderBy(x => x.Name)
    .Select(x => new SelectListItem 
    {
        Text = x.Name, 
        //Id = x.Id.ToString()  // do not use "Id" for the property name,
        Value = x.Id.ToString() // use "Value" -- it is a SelectListItem property
    });

// if you want to set the selected item on the dropdownlist, do it here
vm.CalledOrganizationId = 37;

return View(vm);

I have had troubles with selected items in dropdownlists. if above answer does not help, consider looking into [this](http://stackoverflow.com/questions/9832905/dropdownlistfor-does-not-select-selected-value). — Dmitry Efimenko, Apr 02 '12 at 19:52
Thank you for those very prompt and helpful responses. It's still not working but at least i know i'm not going crazy. for now i have added some jquery to set the dropdown after the page is loaded... this looks like this... — ajd, Apr 02 '12 at 23:35

ASP .Net MVC 3 Html.DropDown not binding to variable

1 Answers1