Question

我见过像this这样的其他解决方案，这非常简单，但如果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分钟才能被调用。

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

编辑： here是另一种“正确”的方法，但我希望能够使用更高级的模态对话框，并在“是”点击时返回true，而不是使用浏览器的本机确认对话框。

edit2：我想我要问的是，有没有办法为OnClientClick函数返回一个bool来做多个事情

Answer 1

如果您在客户端脚本中手动触发Click事件，则您的应用程序无法通过移动浏览器的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.Net MVC做很多花哨的东西。但是，它们在传统的ASP.Net中产生了很多问题。

Answer 2

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

<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>

与控制相关的代码＆＃34; _btnDelete＆＃34; （方法＆＃34; _btnDelete_ServerClick＆＃34;）仅在您单击＆＃34时执行;是＆＃34;模式对话框中的按钮将显示在＆＃34;删除＆＃34;按下按钮。不要忘记将jQuery UI CSS文件添加到head部分：

<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 webforms的幕后魔术并不麻烦。

如果避免使用asp：按钮是你的选择我真的可以推荐它。

截取Button回发的最佳方法

3 个答案: