我在我的应用程序中使用了几个 jquery ui 对话框来收集用户的输入并用于 CRUD 操作。在页面中我需要一个对话框时,我执行以下步骤:
首先,我定义了初始化对话框所需的最小标记和代码,如下所示
<div id="dialogPanel" style="display:none" title=""></div>
并且,当 DOM 准备好时,
$("#dialogPanel").dialog({
autoOpen: false, hide: 'slide', show: 'bounce', resizable: false,
position: 'center', stack: true, height: 'auto', width: 'auto',
modal: true, overlay: { opacity: 0.5, background: "white" }
});
然后我在需要时使用 ajax 调用在对话框中加载内容,就像这样
<button id="addCustomer">Add Customer</button>
还有这个
$("#addCustomer").button().click(function(event) {
event.preventDefault();
loadDialog("/Customer/Create", "", "Add New Customer");
});
function loadDialog(action, id, title) {
$("#dialogPanel").dialog("option", "title", title);
if (id != "")
action = action + "/" + id;
$.ajax({
type: "get",
dataType: "html",
url: action,
data: {},
success: function(response) {
$("#dialogPanel").html('').html(response).dialog('open');
}
});
}
ajax 调用返回一个强类型视图,该视图将显示在对话框内,甚至动态调整其大小。强类型视图有一些按钮,这些按钮依次执行其他 ajax 调用(例如对验证和持久保存在数据库上的控制器操作)。这些调用通常会返回将添加到对话框 DIV 中的 HTML 代码。
现在我的问题是:如何关闭对话框?我可以通过单击对话框右上角的“X”按钮或按 ESC 键来完成此操作,但由于单击强类型视图内的按钮,我想这样做。
但是我不想使用这种代码
$("#dialogPanel").dialog('close');
在本身不定义#dialogPanel DIV 的强类型视图中。
什么可能是一个好的解决方案?