DropDownListFor does not set selected value

Question

I have a view that is displaying a Drop down list using the HTML helper DropDownListFor

<%: Html.DropDownListFor(Function(model) model.Manufacturer, New SelectList(Model.ManufacturerList, Model.Manufacturer))%>

My controller is passing the View a ViewModel containing the Manufacturer and the ManufacturerList

Function Search(ByVal itemSrch As ItemSearchViewModel) As ActionResult

     'some code mapping and model code'

     Return View(itemSrch)

End Function

My ViewModel is nothing crazy just fills the ManufacturerList with a list of string values and then the Manufacturer property is just a string value containing the selected value from the drop down list.

Public Property Manufacturer As String

Public Property ManufacturerList() As List(Of String)

I'm having an issue with the view setting the selected value on the drop down list if we are reloading the Search View. I've checked the View Model (ItemSearchViewModel) when it comes into the Search function and the Manufacturer is populated with the proper selected value and successfully passes that value back to the Search View. At some point the data passed to the view doesn't seem to populate the selected value, was wondering if anyone had some ideas on why this is happening and what I can do to fix it.

Thanks

Answer 1

Didn't get much for answers on this so started digging into how I could fix this somewhat easily. Also in my research this seemed to be a common problem for many people with the DropDownListFor HTML Helper. I figured there had to be a way to get this working since I knew the selected value property from my ViewModel was actually getting passed to the View. So javascript and jQuery to the rescue, I ended up trying to set the selected value using the jQuery .ready function and was able to successfully get this to work. So here's my jQuery fix:

$(document).ready(function() {

    $("#Manufacturer").val("<%: Model.Manufacturer %>");

});

For sake of making this easy to follow I used the full .ready syntax, or you can just use $(function () { 'code' });

If you want to solve this without using jQuery you can just use basic javascript syntax as well, it'll look something like this:

document.getElementByID("Manufacturer").Items.FindByValue("<%: Model.Manufacturer %>").Selected = true;

If you using the plain javascript call make sure to call this when the page is done loading data to the dropdownlist.

In either case all this code is doing is setting the selected value on the drop down list on the client side from the passed in Manufacturer value from the Model.

If you have any other ways to solve this problem please let me know, but this is working for me and hopefully it'll help someone else with their problem.

Thank,

Answer 2

I've done a similar quick-fix in JQuery today to fix this behaviour too :

$(document).ready(function() {
$(".wrapper<%: Model.Language %> option[value=<%: Model.Language %>]").attr("selected","true");
});

Though I could share it with others if needed.

I'd still like to see a real patch to this problem so many persons seems to have in a different way, maybe with an extension method of the already existing DropDownListFor Html.helper method.