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 回答