ASP.NET 按钮 OnClientClick 中的 jQuery 确认对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4046664/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Confirm Dialog in ASP.NET Button OnClientClick
提问by Mark Richman
I have a TemplateField in a GridView in an UpdatePanel with a button called btnDelete. Rather than the standard OnClientClick="return confirm('Are you sure?')"I'd like to use jQuery Dialog.
我在 UpdatePanel 的 GridView 中有一个 TemplateField，有一个名为 的按钮btnDelete。OnClientClick="return confirm('Are you sure?')"我想使用 jQuery Dialog而不是标准。
So far, I'm able to set the jQuery using btnDelete.Attributes["onclick"]and setting the jQuery Dialog code in the code-behind. However, it posts back to the server in all cases before I have a chance to click "Confirm" or "Cancel".
到目前为止，我能够使用btnDelete.Attributes["onclick"]和设置代码隐藏中的 jQuery Dialog 代码来设置 jQuery。但是，在我有机会单击“确认”或“取消”之前，它在所有情况下都会回发到服务器。
Here is the HTML it produces:
这是它生成的 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">
What am I doing wrong that is causing this function not to block until either button is clicked?
我做错了什么导致此功能在单击任一按钮之前不会阻止？
Conversely, the standard confirm works just fine:
相反，标准确认工作得很好：
<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("Unexpected Error:\n\n" + e1.toString());return false;};" value="Delete" name="ctl00$c1$gvTransfers$ctl02$btnDelete">
Thanks, Mark
谢谢，马克
UPDATE:
更新：
Ultimately, I had to use UseSubmitBehavior="false" to get the name="" attribute to render. Then I had to override the OnClientClick, setting the value to "return;" so the default __doPostBack() doesn't get executed. Then I was able to wire up a .live() click handler, which invokes the __doPostBack() on Confirm:
最终，我不得不使用 UseSubmitBehavior="false" 来获取要呈现的 name="" 属性。然后我不得不覆盖 OnClientClick，将值设置为“返回”；所以默认的 __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');
});
采纳答案by Ender
Check the selected answer for this question for an example: How to implement "confirmation" dialog in Jquery UI dialog?
检查此问题的选定答案以获取示例：如何在 Jquery UI 对话框中实现“确认”对话框？
A couple of notes:
一些注意事项：
Don't put your onclick functionality in an onclick attribute. One of the great benefits of jQuery is that it allows you to do Unobtrusive Javascript. Instead, do something like this:
不要将您的 onclick 功能放在 onclick 属性中。jQuery 的一大好处是它允许您执行 Unobtrusive Javascript。相反，请执行以下操作：
$(function() {
$('.delete').click(function(e) {
e.preventDefault() //this will stop the automatic form submission
//your functionality here
});
});
Also, make sure that your dialog is instantiated outside the click event, so that it is initialized before the first click event happens. So, something like this would be your result:
此外，请确保您的对话框在 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');
});
});
That should do the trick for you.
那应该对你有用。
回答by Anju313
$(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();
}
}
});
});
});
Then in the Page Body
然后在页面正文中
<asp:button id="btnCancel" runat="server" cssclass="button_major" text="Cancel" style="float: right"
onclick="btnCancel_ClickEvent" clientidmode="Static" />
