ASP.NET按钮OnClientClick中的jQuery确认对话框

Question

我有一个在UpdatePanel中的GridView里的TemplateField，其中有一个名为btnDelete的按钮。与其使用标准的OnClientClick="return confirm('Are you sure?')"，我想用jQuery对话框。

到目前为止，我能够使用btnDelete.Attributes["onclick"]设置jQuery，并在代码后端设置jQuery对话框代码。然而，在我点击“确认”或“取消”之前，它会在所有情况下都向服务器提交回发。

这是它生成的HTML：

<input type="submit" rel="Are you sure?" class="action-link delete" id="ctl00_c1_gvTransfers_ctl02_btnDelete" onclick="return function() { 
            $('#delete-transfer-confirm').dialog({
              buttons: {
                'Confirm' : function() { $(this).dialog('close'); return true; },
                'Cancel'  : function() { $(this).dialog('close'); return false; }
              }
            });

            $('p.message').text($(this).attr('rel'));
            $('#delete-transfer-confirm').dialog('open');
          };" value="Delete" name="ctl00$c1$gvTransfers$ctl02$btnDelete">

我做错了什么导致这个函数不能阻止，直到任何一个按钮被点击？

相反地，标准的确认框可以正常工作：

<input type="submit" class="action-link delete" id="ctl00_c1_gvTransfers_ctl02_btnDelete" onclick="try{if (!window.confirm('Are you sure?')){return false;};}catch(e1){alert(&quot;Unexpected Error:\n\n&quot; + e1.toString());return false;};" value="Delete" name="ctl00$c1$gvTransfers$ctl02$btnDelete">

谢谢，Mark

更新：

最终，我不得不使用UseSubmitBehavior="false"来获取name=""属性的渲染。然后我必须重写OnClientClick，将值设置为"return;"，以便默认的__doPostBack()不会被执行。然后我就能够连接一个.live()点击处理程序，调用__doPostBack()来确认。

$('input.delete').live('click', function(e) {
        var btnDelete = $(this);
        alert($(btnDelete).attr('name'));
        e.preventDefault();


        $('#delete-transfer-confirm').dialog({
          buttons: {
            'Confirm': function() {
              $(this).dialog('close');
              __doPostBack($(btnDelete).attr('name'), '');

              return true;
            },
            'Cancel': function() {
              $(this).dialog('close');
              return false;
            }
          }
        });

        $('p.message').text($(this).attr('rel'));
        $('#delete-transfer-confirm').dialog('open');
      });

- Mark Richman

---

不要把你的代码包裹在一个onClick函数中，而是通过获取元素$("ctl00_c1_gvTransfers_ctl02_btnDelete")进行绑定分离。这样做可以让你的代码更加简洁和易于维护。 - Jay Zeng

这里有一个易于使用的插件可以实现此功能：https://dev59.com/8Gw15IYBdhLWcg3wtNuO - user1703142

Answer 1

请查看此问题的选定答案，以获取示例：如何在Jquery UI对话框中实现“确认”对话框？

几个注意点：

不要将onclick功能放在onclick属性中。 jQuery的一个很大的好处是它允许您进行无侵入式JavaScript操作。 相反，请尝试像这样做：

$(function() {
    $('.delete').click(function(e) {
        e.preventDefault() //this will stop the automatic form submission
        //your functionality here
    });
});

另外，请确保您的对话框在点击事件之外进行实例化，以便在第一次点击事件发生之前进行初始化。因此，您的结果应该类似于以下内容：

$(function() {
     $("#delete-transfer-confirm").dialog({
      autoOpen: false,
      modal: true
    });

    $('.delete').click(function(e) {
        e.preventDefault();
        $('#delete-transfer-confirm').dialog({
            buttons: {
                'Confirm': function() {
                    $(this).dialog('close');
                    return true;
                },
                'Cancel': function() {
                    $(this).dialog('close');
                    return false;
                }
            }
        });

        $('p.message').text($(this).attr('rel'));
        $('#delete-transfer-confirm').dialog('open');
    });
});

那应该能为你解决问题了。

- Ender

Answer 2

$(document).ready(function () {

        $('#btnCancel').click(function (e) {
            e.preventDefault();

            $("<div><span><b>Are you sure you want to cancel this order?</b></span></div>").dialog({
                modal: true,
                draggable: false,
                resizable: false,
                width: 430,
                height: 150,
                buttons: {
                    "No": function () {
                        $(this).dialog("destroy");

                    },
                    "Yes": function () {
                        $("#btnCancel").unbind();
                        $(this).dialog("destroy");
                        document.getElementById('<%= btnCancel.ClientID %>').click();

                    }
                }
            });
        });

    });

然后，在页面正文中。

 <asp:button id="btnCancel" runat="server" cssclass="button_major" text="Cancel" style="float: right"
                    onclick="btnCancel_ClickEvent" clientidmode="Static" />

- VoidA313