6

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

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

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

edit2：我想我要问的是，有没有一种方法可以为 OnClientClick 函数返回一个布尔值，该函数不止一件事

4

3 回答 3

3

如果您在客户端脚本中手动触发 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 中产生了很多问题。

于 2013-07-10T19:41:53.533 回答
0

被压抑的记忆被唤醒——我在 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 对你来说是一个选择，我真的可以推荐它。

于 2013-07-18T21:08:26.917 回答
0

如果你想显示一个更漂亮的模态对话框，你可以使用 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>

与控件“_btnDelete”（方法“_btnDelete_ServerClick”）关联的代码仅在您单击“删除”按钮后显示的模式对话框中的“是”按钮时才会执行。不要忘记将 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"/>
于 2013-07-16T01:38:25.730 回答