Why can't I put a DropDownListFor in div content?

Question

I have two DropDownListFor's, and the content of the second depends on the first.

I'm attempting to refresh the div content (list) every time a different selection is made in the first with a bit of javascript:

function onUpdate() {
    $("#MyDiv").html('<%= Html.DropDownListFor(model => model.PeriodSelected, Model.PeriodSelectList) %>');
}

And the div is simply:

<div id="MyDiv" class="editor-field" />

The SelectList in the ViewModel depends on the selected item from the first list:

public SelectList PeriodSelectList
    {
        get
        {
            var list = this.Versions.ToList().Where(fv => fv.DateSubmitted.Year == PeriodSelected);
            return new SelectList(list, "Id", "Version");
        }
    }

Unfortunately running this results in:

Microsoft JScript runtime error: Could not complete the operation due to error 80020101.

However, I've tried using:

$("#MyDiv").html('<%= Html.LabelFor(...) %>');

for the onUpdate() function and that works fine, so the problem seems to be with the DropDownListFor.

So why is this not working? Thanks

Answer 1

I'm not sure about error, afaik it's something about internet explorer and parsing errors, but.

Dropdown list markup actually generates only once on response, so this string will be constant.

<%= Html.DropDownListFor(model => model.PeriodSelected, Model.PeriodSelectList) %> will be the same <select>...</select> all the time.

You need to rethink workflow of your web site to preload all needed information and then work with that only by JavaScript. Thus, you need to filter your periods in browser with javascript and left asp.net mvc only as data source.

Or somehow use ajax to regenerate dropdown list markup on server. In simple words, in ASP.NET MVC you cannot easily mix JavaScript and .NET code. And I think, this is right approach. But, if you want so for some reason:

there're WebForms.