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

Question

我在UpdatePanel的GridView中有一个TemplateField,其中有一个名为的按钮btnDelete.而不是标准OnClientClick="return confirm('Are you sure?')"我想使用jQuery Dialog.

到目前为止,我能够btnDelete.Attributes["onclick"]在代码隐藏中使用和设置jQuery Dialog代码来设置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">

谢谢,马克

更新:

最终,我不得不使用UseSubmitBehavior ="false"来获取要渲染的name =""属性.然后我不得不重写OnClientClick,将值设置为"return;" 所以默认的__doPostBack()没有被执行.然后我能够连接.live()单击处理程序,它在Confirm上调用__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');
      });

Answer 1

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

一些注意事项：

不要将您的 onclick 功能放在 onclick 属性中。jQuery 的一大好处是它允许您执行 Unobtrusive Javascript。相反，请执行以下操作：

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

此外，请确保您的对话框在 click 事件之外实例化，以便在第一个 click 事件发生之前对其进行初始化。所以，这样的事情将是你的结果：

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

那应该对你有用。