我遇到了一个 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 分开,但它没有用。帮助 ?