Question

我在我的应用程序中使用了几个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。

什么是一个好的解决方案？

Answer 1

在主窗体中创建一个closeDialog函数，并在对话框中调用该函数。然后，托管对话框的任何其他页面也需要定义“closeDialog”函数。

此外，您可以传递指向closeDialog函数的委托以进一步分离。

如何从对话框代码中关闭jquery ui对话框？

1 个答案: