c# - jQuery UI 模态对话框 - 除非单击“确定”否则阻止操作

Question

编辑:

我想用 jquery UI 对话框替换以下内容:

<asp:LinkButton ID="foo" runat="server" OnClick="someMethodThatPostsBack" OnClientClick="return confirmAction()" Text="Delete" />

<script type="text/javascript">
    function confirmAction() {
        return confirm("Are you sure you want to delete this?");
    }
</script>

除非在对话框中单击“确定”，否则我不希望操作回发。它在带有确认的常规 JavaScript 中工作得非常好。我想用 jQuery UI 对话框替换它，这样它看起来更漂亮一些。可能吗？

我创建了一个对话框，单击链接或按钮时会打开该对话框:

<a id="aboutLink" href="/Home/About">About</a>

<script type="text/javascript">
    $("#aboutLInk").click(function() { 
        $("myDialog").dialog({
            modal: true,
            buttons: {
                "OK": function () {
                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
        }
        });
    });
</script>

当我单击该链接时，它会将我带到“关于”页面。我希望能够显示该对话框，并且仅转到“关于”页面，具体取决于他们是否单击对话框上的“确定”按钮。如果他们点击取消，则不会执行任何操作。我怎样才能做到这一点？

此外，如果我每次单击按钮时都创建对话框，我是否还需要以某种方式销毁该对话框？我该怎么做？

Answer 1

1. 您实际上不能这样做 - click 处理程序会立即返回，因此当(且仅当)启用 Javascript 时，您必须防止自己跟踪该链接。

   (从取消处理程序返回 false 以防止链接被跟踪)

   要在单击确定时实际更改页面地址，请在回调中设置window.location。

2. 是的，您确实需要在完成后销毁对话框 - 在事件处理程序中将 close 替换为 destroy 应该可以实现这一点。

我将一个工作演示放在 http://jsfiddle.net/alnitak/WWVEg/

$("#aboutLink").click(function() {
    var that = this;         // save a reference to the clicked link
    $("#myDialog").dialog({
        modal: true,
        buttons: {
            "OK": function() {
                $(this).dialog("destroy");
                window.location = that.href;
            },
            Cancel: function() {
                $(this).dialog("destroy");
            }
        }
    });
    return false;
});

FWIW，在 OK 回调中关闭或销毁对话框可能并不是严格必要的，因为下一行无论如何都会导致页面重新加载 - 我预计如果没有它，新页面加载会更快。