1

我有一个带有级联下拉列表的 Razor 视图。父列表启用 ajax 并使用 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>
4

1 回答 1

0

我建议您@Html.Partial("ChildList")使用 DIV 包装并将 UpdateTargetId 更改为该 DIV 的 ID。InsertionMode.Replace仅替换元素的内部 html。我想在您的情况下，选择标签的内容被替换为操作结果，如此有效，它看起来像这样：

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

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

于 2013-02-07T20:27:54.170 回答