Partial View not updated in IE

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>

Are you SURE that IE is not caching the request. Use the F12 tools in IE and look for a 304 response with time <1ms. http://www.dashbay.com/2011/05/internet-explorer-caches-ajax/ — Eric J., Feb 07 '13 at 17:07
I am sure because if I debug the GetChildren method, it gets called when an item in the parent list is selected. There is only a 200 response shown in Fiddler. I have edited the above to show what fiddler records. — Paul Taylor, Feb 07 '13 at 17:10

score 0 · Accepted Answer · answered Feb 07 '13 at 20:27

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.

Yep, that did it. It works correctly in FF and Chrome still as well. So, assuming that it is the unobtrusive-ajax library that is responsible for inserting the partial view content, it looks like it has a bug with respect to IE. — Paul Taylor, Feb 08 '13 at 09:52

Partial View not updated in IE

1 Answers1