拦截Button回发的最佳方式

Question

我见过其他类似这样的解决方案，它非常简单，但如果javascript函数的作用不仅仅是confirm('sure?');呢？我永远不知道它什么时候会发出嘘声。

因此，我决定实现所有我的ASP.NET按钮，如下所示：

<button id="btnDelete" name="btnDelete" class="btn">Delete</button>
<asp:Button ID="_btnDelete" runat="server" OnClick="_btnDelete_Click" style="display:none;" />
$('#btnDelete').click(function (e) {
    $.blockUI({ message: $('#divConfirmDeleteModal'), overlayCSS: { cursor: 'default' }, css: { cursor: 'default' }, baseZ: 5555 });
    return false;
});
$('#btnDeleteYes').click(function () {
    $('#<%=_btnDelete.ClientID%>').trigger('click');
});
$('#<%=_btnDelete.ClientID%>').click(function (e) { 
    // the delay happens here. if i put an alert here, it fires,
    // but then the page just loads until eventually the method gets called
    <%= ClientScript.GetPostBackEventReference(_btnDelete, string.Empty) %>; 
});

到目前为止，它已经运行了一段时间。我在IE（甚至是版本10）中遇到了问题——点击最终触发它的按钮后，_btnDelete_Click将需要长达2分钟的时间才能被调用。

这感觉太粗糙了，我想知道是否有更好的方法。

edit:这里有另一种"正确"的方法，但我希望能够使用更高级的模式对话框，并在单击"是"时返回true，而不是使用浏览器的本地确认对话框。

edit2:我想我想问的是，有没有一种方法可以为一个OnClientClick函数返回一个bool，该函数可以执行多项

Answer 1

如果您在客户端脚本中手动触发点击事件，您的应用程序将无法使用移动浏览器的Go按钮正常运行。

以下是如何拦截按钮的服务器端点击事件，而无需在客户端手动触发。

<script type="text/javascript">
    function clientClick() {
        if (confirm("Are you sure you want to delete?")) {
            // Do something at client side before posting back to server
            return true;
        }
        return false;
    }
</script>
<asp:Button runat="server" ID="DeleteButton" Text="Delete" 
    OnClick="DeleteButton_Click" OnClientClick="return clientClick();" />

你可以用ASP.NETMVC做很多有趣的事情。然而，它们在传统的ASP.Net.

Answer 2

如果您想显示更高级的模态对话框，可以使用jQuery UI对话框小部件。为了与您的示例保持一致，请查看示例web表单的主体元素的以下代码：

<form id="form1" runat="server">
    <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
    <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
    <div id="deleteConfirmationDialog" title="Warning!">Are you sure you want to delete?</div>
    <asp:Button ID="_btnDelete" runat="server" Text="Delete" OnClick="_btnDelete_ServerClick" OnClientClick="return _btnDelete_ClientClick();" />
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
    function doPostBack(theForm, eventTarget, eventArgument) {
        if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
            theForm.__EVENTTARGET.value = eventTarget;
            theForm.__EVENTARGUMENT.value = eventArgument;
            theForm.submit();
        }
    }
    function showConfirmationDialog(dialogSelector, callback, form, target) {
        $(dialogSelector).dialog({
            resizable: false,
            height: 200,
            modal: true,
            buttons: [{
                text: "Yes",
                click: function () {
                    $(this).dialog("close");
                    callback(form, target, null);
                }
            },
            {
                text: "No",
                click: function () {
                    $(this).dialog("close");
                }
            }]
        });
    };
    function _btnDelete_ClientClick() {
        showConfirmationDialog("#deleteConfirmationDialog", doPostBack, $("#form1").get(0), "_btnDelete");
        return false;
    }
    $(document).ready(function () {
        $("#deleteConfirmationDialog").hide();
    });
</script>

与控件"_btnDelete"相关的代码隐藏（方法"_btnDelete_ServerClick"）只有在按下"Delete"按钮后显示的模式对话框中单击"Yes"按钮时才会执行。不要忘记将jQuery UI CSS文件添加到标题部分：

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css"/>

Answer 3

压抑的记忆被唤醒了——3.5年前，我曾与asp.net Webforms进行过同样的战斗。我们必须在网格中实现ajax调用，方法是按enter键并显示一个模式对话框来确认订单，以防产品有一些备注（如翻新等）。

浏览一些旧的代码片段，我发现了所有类型的javascript，以防止默认值和冒泡

// prevent the browser event bubbling for example posting the webform
function stopDefault(e) {
    if (e.preventDefault) {
        e.preventDefault();
        e.stopPropagation();
    } else {
        event.returnValue = false;
        event.cancelBubble = true;
        e.returnValue = false;
        e.cancelBubble = true;              
    }
}

和类似的html.asp

<button type="button" 
     onclick="SearchProducts(event,this);">Search Products</button>
<asp:Button ID="btnSearch" ClientIDMode="Static" runat="server" 
 onclick="btnSearch_Click"  
 OnClientClick="SearchProducts(event,this)"
 UseSubmitBehavior="false"
 Text="Does nothing" />  

我最终只使用了标准的html按钮，并避免了asp:Button，因为它不太麻烦地对抗所有内置功能和asp.net网络表单的幕后魔力。

如果避免asp:button是一个选项，我真的可以推荐它。