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

我在UpdatePanel的GridView中使用名为btnDelete的按钮来创建TemplateField。我想使用jQuery对话框而不是标准OnClientClick="return confirm('Are you sure?')"。ASP.NET按钮中的jQuery确认对话框OnClientClick

到目前为止，我可以使用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">

谢谢，马克

UPDATE：

最终，我不得不使用UseSubmitBehavior = “假” 来获得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'); 
     });

来源

2010-10-28 Mark Richman

而是在一个onClick函数来包装一下你的代码，做结合，通过获取元素$（ “ctl00_c1_gvTransfers_ctl02_btnDelete”）分开。的onClick（函数（）{YOUR CODE}）; – 2010-10-28 20:23:24

这里有一个易于使用的插件：http://stackoverflow.com/questions/6457750/form-confirm-before-submit – 2012-09-27 11:29:00

检查这个问题的一个例子，选择的答案：How to implement "confirmation" dialog in Jquery UI dialog?

一对夫妇的备注：

不要将onclick功能放在onclick属性中。 jQuery最大的好处之一就是它可以让你做出不显眼的Javascript。取而代之的是，做这样的事情：

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

此外，请确保您的对话框实例的单击事件之外，从而使第一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'); 
    }); 
});

这应该为你做的伎俩。

来源

2010-10-28 20:15:36 Ender

或者将代码包装在document.ready（function（）{CODE;}）中 – 2010-10-28 20:24:33

$(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" />

来源

2014-08-14 08:02:36 Anju313

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

回答

相关问题