0

我遇到了一个 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、连接的 JScript）都必须包含在其中，以便以后可以轻松找到信息。以下是将显示为对话框的部分视图的示例代码：

@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，跳转到我的操作方法，该方法返回填充了我要显示的用户数据的部分视图。

问题是对话框显示为空！嗯，我知道为什么。它是空的，因为对话框 DIV 设置为“显示：无”。但为什么 ？不是 .dialog('open'); 覆盖显示：无，即使它被隐藏，它也不应该显示对话框的内容吗？

我试图让 .show 分开，但它没有用。帮助 ？

4

1 回答 1

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

这里有一个很好的例子，你可以用它来

于 2012-06-11T17:42:49.310 回答