在ASP.NET按钮的OnClientClick事件中使用jQuery Confirm Dialog

16 浏览
0 Comments

在ASP.NET按钮的OnClientClick事件中使用jQuery Confirm Dialog

在一个UpdatePanel中的GridView中，我有一个名为btnDelete的按钮的TemplateField。与标准的OnClientClick="return confirm('Are you sure?')"不同，我想要使用jQuery Dialog。到目前为止，我能够使用btnDelete.Attributes["onclick"]来设置jQuery，并在代码后台设置jQuery Dialog代码。然而，在我点击“确认”或“取消”之前，它在所有情况下都会向服务器提交回发。以下是它生成的HTML代码：

是什么导致这个函数在任何按钮被点击之前都不会阻塞的问题？

相反，标准的confirm工作得很好：

谢谢，

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');
      });

0

2 答案

0 Comments

问题的出现原因是：在ASP.NET按钮的OnClientClick事件中使用了jQuery Confirm Dialog，但是在点击“Yes”按钮后，没有解绑按钮的click事件，导致在对话框销毁后重复触发了按钮的点击事件。

解决方法是：在点击“Yes”按钮时，先解绑按钮的click事件，然后销毁对话框，最后手动触发按钮的点击事件。

具体代码如下：

$(document).ready(function () {
        $('#btnCancel').click(function (e) {
            e.preventDefault();
            $("
Are you sure you want to cancel this order?
").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();
                    }
                }
            });
        });
    });

在页面的主体部分添加以下代码：

onclick="btnCancel_ClickEvent" clientidmode="Static" />

0
0 Comments

在这个问题中，出现的原因是在ASP.NET的按钮的OnClientClick属性中使用了jQuery Confirm Dialog，但是没有正确地初始化对话框并且没有阻止表单的自动提交。解决方法是将对话框的初始化放在点击事件之外，并且使用preventDefault()方法来阻止表单的自动提交。

以下是解决方法的代码示例：

$(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');
    });
});

这样就可以正确地使用jQuery Confirm Dialog了。

0