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>