Question

我在显示JQuery对话框时出现问题。我知道问题是什么，但无法弄清楚如何解决它。我希望能在这里找到一些帮助。

问题：

我有一个包含简单用户列表的页面。列表中的每个项目/用户都有一个EDIT链接。单击时，将弹出一个对话框，其中包含该用户的详细信息。大！听起来很简单。

因此，用户列表初始化将成为对话框的部分视图：

@Html.Partial("EditUser", new User())

预加载局部视图，并使用常规：

初始化对话框

$(function () {
    $("#edit-user-dialog").dialog({
        title: "Edit User",
        autoOpen: false,
        height: 500,
        width: 600,
        modal: true
    });
});

到目前为止一直很好......

部分视图本身是一个带有Ajax表单提交的常规页面，允许我提交修改后的用户信息。与该弹出窗口相关联的所有内容（例如其DIV，连接的JScripts）必须包含在内，以便稍后可以轻松找到信息。以下是将显示为对话框的部分视图的示例代码：

@model MyNamespace.User
<script src="@Url.Content("~/myUserEditScriptScripts.js")" type="text/javascript"></script>

<div id="edit-user-dialog" style="display: none">

@using (Ajax.BeginForm("SaveUserJson", "User", new { id = Model.Id }, new AjaxOptions
        {
            HttpMethod = "post",
            OnSuccess = "editUserSuccess()",
        }))
    {

        <div class="display-field">
            @Html.DisplayFor(model => model.Name) 
        </div>
    .
    .
    .
    Various controls go here...
    .
    .
    .

        <p>
            <input type="submit" value="Detach" />
        </p>
    }

 </div>

到目前为止标准的东西......

因此，当加载初始用户列表时，“编辑用户”部分视图会在页面上预先加载，但它不可见，因为div设置为display：none，并且它被初始化为对话框弹出窗口。

接下来，当在特定用户旁边点击“编辑”链接时，我希望弹出窗口中填充所选用户的信息。阿贾克斯救援！

在“编辑”链接上单击我加载包含所选用户数据的局部视图：

function editUserLoad(userId) {
    $.ajax({
        url: '/User/EditUser/',
        data: { id: userId },
        type: 'post',
        datatype:'html',
        success: function (data) {
            $("#edit-user-dialog").html(data);
            $("#edit-user-dialog").dialog('open');
        }
    });
}

效果很好！它抓取所选的userId，跳转到我的action方法，该方法返回用我想要显示的用户数据填充的局部视图。

问题是对话框显示为空！我知道为什么。它是空的，因为对话框DIV设置为“display：none”。但为什么？不.dialog（'开放'）;覆盖显示：无，并且它不会显示对话框的内容，即使它被隐藏了吗？

我试图单独使用.show但它没有用。帮忙？

Answer 1

你能试试这种方法吗？只需创建一个空的div，如下面的

<script type="text/javascript">
    $(function () {
        $('#dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: 'Edit User',
            modal: true,
            open: function(event, ui) {
                //Load the Edit User partial View
                $(this).load("@Url.Action("action","controller",new {ID = user_id})");
            },
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });

        $('#my-button').click(function () {
            $('#dialog').dialog('open');
        });
    });
</script>
<div id="dialog" title="Edit User" style="overflow: hidden;">

//return partial view
public ActionResult EditUserView(int id)
{
    UserModel um = new UserModel(id);
    return PartialView(um);
}

有一个非常好的例子here，你可以用它来

使用MVC更新.html（）时，JQuery对话框显示空白窗口的问题

1 个答案: