Question

我正在尝试使用jQuery UI和MVC3，我偶然发现了以下问题：

我有一个使用AJAX的基本页面

<%: Ajax.ActionLink("Edit", "Edit", new { id = 1 }, new AjaxOptions() { UpdateTargetId = "dialog", OnSuccess = "DisplayPopup" }, null)%>

<div id="dialog" title="Location">

</div>

这是控制器代码：

    public ActionResult Edit(int id)
    {
        return PartialView();
    }

    [HttpPost]
    public ActionResult Edit()
    {
        return Content("Saved!");
    }

和部分视图编辑：

<b>whatever</b>

<% using (Ajax.BeginForm("Edit", "Home",
    new AjaxOptions()
    {
        UpdateTargetId = "editForm",
        HttpMethod = "POST"
    }))
{%>
<div id="editForm">
    <input type="submit" value="Save" />
</div>
    <% } %>

上面的代码工作正常。

现在我添加了jquery UI弹出代码：

<script type="text/javascript">
    function DisplayPopup() {
        $('#dialog').dialog('open');
    }

    $('#dialog').dialog({
        autoOpen: false,
        width: 600,
        modal: true,
        buttons: {
            "Close": function () {
                $(this).dialog("close");
            }
        }
    });
</script>

之后在Firefox和Chrome中它运行正常，而在IE8中我看到以下问题：

单击编辑 - 使AJAX调用Edit（int id）操作并在弹出窗口中显示编辑视图
点击保存 - 对编辑（）进行AJAX调用，并显示文本“已保存！”
关闭弹出窗口
点击编辑 - AJAX调用Edit（int id） - 再次
点击保存 - 这次完全回发（仅限IE）

任何想法？

谢谢！

Answer 1

尝试这样看第一次有效，但不是第二次。每次创建对话框新建，并在完成后将其销毁。

<script type="text/javascript">
    function DisplayPopup() {
        $('#dialog').dialog({
        autoOpen: true,
        width: 600,
        modal: true,
        buttons: {
            "Close": function () {
                $(this).dialog("close");
            }
        }, close: function() {
                $(this).dialog("destroy");

            }
    });
    }


</script>

Answer 2

我遇到了同样的麻烦：在FF工作，但在IE8工作。

尝试在部分视图回复中添加内容。

我在IE中遇到同样的问题，最后将@ViewBag.Message添加到部分视图响应中，其中ViewBag.Message = "Submitted " + DateTime.Now.ToLongTimeString();已在Post上的控制器中分配。

这突然并令人惊讶地导致部分视图呈现在正确的目标元素中，而不是将视图作为IE8中的新页面加载。

IE8中jquery UI弹出窗口中的ajax表单问题

2 个答案: