【发布时间】：2010-12-06 22:04:46
【问题描述】：
我有一个 ASP.NET 中继器，它显示带有删除链接按钮的项目列表。
我想设置删除链接按钮以显示一个 JQuery 对话框以进行确认。如果点击“确定”按钮，我想做回发。
明显的问题是转发器中的每个 LinkButton 都有自己的 ID，我不想复制对话框的所有 javascript。
建议？
【问题讨论】：
标签： asp.net javascript jquery
【发布时间】：2010-12-06 22:04:46
【问题描述】：
你可以这样：
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
...
<asp:LinkButton OnClick="DoSomething" OnClientClick="return ConfirmDelete();" ID="btnConfirm" runat="server" CssClass="button" Text="Delete"></asp:LinkButton><br /><br />
</ItemTemplate>
</asp:Repeater>
<script>
function ConfirmDelete() {
return confirm("Delete this record?");
}
</script>
或者我认为你也可以这样：
<script>
$(function() {
$(".button").click(function() {
return confirm("Delete this record?");
});
});
</script>
在 ConfirmDelete 方法中，您可以定义您的 jQuery 确认对话框
【讨论】：
-
这不是问题所在。我认为他可以在没有帮助的情况下完成这部分;)
-
是的，但你也没有使用它，也没有回答问题
-
不，我不同意...这是一个比接受的答案更优雅的答案...如果您想要一个对话框，请添加一个对话框...这个答案是一个更优雅的解决方案
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
...
<asp:LinkButton OnClick="DoSomething" OnClientClick="return ConfirmDelete();" ID="btnConfirm" runat="server" CssClass="button" Text="Delete"></asp:LinkButton><br /><br />
</ItemTemplate>
</asp:Repeater>
<script>
function ConfirmDelete() {
return confirm("Delete this record?");
}
</script>
【讨论】：
-
您好先生，我把逻辑写成了代码。请尝试使用它
嘿，
首先你应该使用 Jquery Dialog 或其他客户端对话框，它更酷。
您应该在页面上有一个 html 元素来调用 Jquery 对话框弹出窗口。
<div class="Popup"></div>
<script>
var confirm = false;
function ConfirmDelete(doPostback) {
$(".Popup").dialog(){ /* threat the dialog result , set confirm variable */ };
if(confirm) {
__doPostback(); }
else return false;
}
</script>
在我放置注释句子的部分，您可以放置代码来处理对话结果。
您可以从上面的链接中找到信息。
该函数返回 false，因此它会阻止服务器端代码的执行（异步回发）。
按钮应如下所示：
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<asp:LinkButton OnClientClick="ConirmDelete(<#%GetPostbackReference()%>)" CommandArgument = "<%# DataBinder.Eval(Container.DataItem, "Id") %>" OnClick="btnConfirm_Click" ID="btnConfirm" runat="server"></asp:LinkButton>
</ItemTemplate>
</asp:Repeater>
在CommandArgument 属性上，我设置了绑定到中继器的项目的ID。
这样，在 btnConfirm_Click 事件上，您就可以访问此参数
void btnConfirm_Click(object sender, CommandEventArgs e)
{
e.CommandArgument -> you will find the id an you can execute the delete
}
你应该对后面的代码有：
protected string GetPostbackReference()
{
return Page.ClientScript.GetPostBackEventReference(btnConfirm, null);
}
此函数在元素的绑定上调用并返回当前控件的回发方法，看起来像 __doPostback(source, param)
这是一种 javascript 方法，您可以轻松执行，并且您可以完全控制回发。
在客户端，您可以决定是否调用此回发事件。
PS：如果有什么不清楚的地方可以在这里发帖提问，我会更新答案。
【讨论】：
tanathos 肯定回答了这个问题，但如果您愿意，我还有另一个选项可以避免在代码隐藏中编写脚本。我只是使用 display:none 隐藏了 asp 删除按钮，并添加了一个删除按钮，该按钮调用确认对话框并在确认删除时单击隐藏的 asp 删除按钮。
转发器中的 HTML：
<ItemTemplate>
...
<td>
<a href="#" class="dummy-delete-button">Delete</a>
<asp:Button ID="DeletePolicyButton" runat="server" OnCommand="OnDeleteCommand" CommandArgument="Argument" Text="Delete" CssClass="delete-button" />
</td>
...
</ItemTemplate>
CSS：
.delete-button
{
display: none;
}
javascript：
// make the dummy button look like a button
$("a.dummy-delete-button").button({
icons: {
primary: "ui-icon-trash"
}
});
// create the dialog
var deleteDialog = $('<div>Are you sure you want to remove this policy?</div>')
.dialog({
autoOpen: false,
modal: true,
title: 'Delete Policy'
});
// handle click event to dummy button
$("a.dummy-delete-button").click(function (e) {
// don't follow the href of the dummy button
e.preventDefault();
// get a reference to the real ASP delete button
var button = $(this).closest('td').find('.dummy-delete-button');
deleteDialog.dialog({
buttons: {
// handle delete. Note: have to defer actual button click until after close
// because we can't click the button while the modal dialog is open.
"Delete": function () { deleteDialog.bind("dialogclose", function () { button.click() }); $(this).dialog("close"); },
// handle close
"Cancel": function () { $(this).dialog("close"); }
}
});
deleteDialog.dialog("open");
});
【讨论】：
解决方案并不是那么简单。 jQuery UI Dialog 的 Ok 按钮后，你必须具备调用原始回调函数的能力。
首先你需要一个通用的 js 函数来显示对话框：
function showConfirmRequest(callBackFunction, title, content)
{
$("#divConfirm").html(content).dialog({
autoOpen: true,
modal: true,
title: title,
draggable: true,
resizable: false,
close: function(event, ui) { $(this).dialog("destroy"); },
buttons: {
'Ok': function() { callBackFunction(); },
'Cancel': function() {
$(this).dialog("destroy");
}
},
overlay: {
opacity: 0.45,
background: "black"
}
});
}
我认为存在一个像这样的 div
<div id="divConfirm"></div>
在 c# 代码隐藏上，您必须注册以前的客户端函数，将控件的原始 asp.net callbackFunction 作为参数传递（我概括了）：
protected void AddConfirmRequest(WebControl control, string title, string message)
{
string postBackReference = Page.ClientScript.GetPostBackEventReference(control, String.Empty);
string function = String.Format("javascript:showConfirmRequest(function() {{ {0} }}, '{1}', '{2}'); return false;",
postBackReference,
title,
message);
control.Attributes.Add("onclick", function);
}
通过 GetPostBackEventReference 方法，您可以检索 asp.net 分配给控件的回发函数。
现在，在Repeater ItemDataBound 上，检索执行删除的控件并将其传递给此函数：
<asp:Repeater ID="repeater" runat="server" OnItemDataBound="repeater_OnItemDataBound">
...
<ItemTemplate>
...
<asp:Button ID="btnDelete" runat="server" Text="Delete" />
...
</ItemTemplate>
</asp:Repeater>
和代码：
protected void repeater_OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
WebControl btnDelete = ((WebControl)e.Item.FindControl("btnDelete"));
AddConfirmRequest(btnDelete, "Confirm delete", "Are you sure? Really???");
}
}
我希望这会有所帮助。
【讨论】：
-
优秀的答案，它比我的更容易理解和更清晰的答案！
-
谢谢，我已经尽力概括了很多可能。我正在努力将解决方案放在自定义控件上，覆盖实际的 asp:Button
-
很棒的代码和示例。我想确认我使用了这个并且它运行良好。谢谢！
-
感谢您的反馈
<asp:GridView ... CssClass="mygridview"></asp:GridView>
和
$('table.mygridview td a').whatever()
这将允许您同时使用所有链接按钮。
【讨论】：