Question

我有一个带有级联下拉列表的Razor视图。父列表是ajax-enabled并使用jquery.unobtrusive-ajax.js。子列表是部分视图：

@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")

部分视图只包含子列表的下拉列表：

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

控制器方法GetChildren将列表数据加载到ViewBag项中并返回局部视图：

    [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");
    }

在父列表中选择项目时，子项列表应加载相关项目。这适用于Firefox和Chrome。但在IE9中，子列表只是空白。如果我查看Fiddler中的Ajax调用，我会看到正确返回了部分视图内容。

如何让IE正确更新子列表？

修改的

当在父列表中选择一个项目时，Fiddler会记录此信息：

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

我建议你用DIV包装@Html.Partial("ChildList")并将UpdateTargetId更改为该DIV的id。 InsertionMode.Replace仅替换元素的内部html。我想在你的情况下，select标签的内容被替换为动作结果，所以效果如下：

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

如你所知，这是不正确的，IE9不允许这样做并且吓坏了。

部分视图未在IE中更新

1 个答案: