Question

I have a Razor view with cascading dropdown lists. The parent list is ajax-enabled and uses jquery.unobtrusive-ajax.js. The child list is a partial view:

@Ajax.DropDownListFor(model => model.ParentId, 
    (SelectList)ViewBag.ParentId, 
    "Unknown",
    new AjaxOptions
    {
        HttpMethod = "Get",
        Url = Url.Action("GetChildren"),
        UpdateTargetId = "ChildId",
        InsertionMode = InsertionMode.Replace
    })
...
@Html.Partial("ChildList")

The partial view simply contains a dropdown for the child list:

@Html.DropDownList("ChildId", "Unknown")

The controller method GetChildren loads list data into a ViewBag item and returns the partial view:

    [OutputCache(Duration = 0)]
    public ActionResult GetChildren(long? parentId) 
    {
        if (parentId.HasValue)
        {
            ViewBag.ChildId = ListHelper.GetChildList(parentId.Value, null);
        }
        else
        {
            ViewBag.ChildId= ListHelper.GetEmptyList();
        }
        return PartialView("ChildList");
    }

When an item is selected in the parent list, the child list should be loaded with related items. This works as intended in Firefox and Chrome. But in IE9, the child list is simply blanked. If I look at the Ajax call in Fiddler, I see that the partial view contents are correctly returned.

How can I get IE to update the child list correctly?

EDIT

Fiddler records this when an item is selected in the parent list:

HTTP/1.1 200 OK
Cache-Control: public, max-age=0, s-maxage=0
Content-Type: text/html; charset=utf-8
Expires: Thu, 07 Feb 2013 17:11:29 GMT
Last-Modified: Thu, 07 Feb 2013 17:11:29 GMT
Vary: *
Server: Microsoft-IIS/7.5
X-AspNetMvc-Version: 3.0
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Thu, 07 Feb 2013 17:11:29 GMT
Content-Length: 182

<select id="ChildId" name="ChildId"><option value="">Unknown</option>
<option value="350">Child 1a</option>
<option value="351">Child 1b</option>
</select>

Answer 1

I’m suggest you to wrap @Html.Partial("ChildList") with DIV and change UpdateTargetId to that DIV’s id. InsertionMode.Replace replace only inner html of the element. I suppose that in your case content of the select tag is replaced with action result so effective it will be look like this:

<select id="ChildId" ...>
    <select id="ChildId" ...>
        <option>1</options>
        <option>2</options>
        <option>3</options>
    </select>
</select>

As you know that’s incorrect and IE9 doesn’t allow that and freaking out.