У меня есть ретранслятор ASP.NET, который показывает список элементов с удаленным LinkButton.
Я хочу настроить Delete LinkButtons для отображения диалогового окна JQuery для подтверждения. Если нажата кнопка "ОК", я хочу сделать обратную передачу.
Очевидная проблема заключается в том, что каждый LinkButton в ретрансляторе будет иметь свой собственный идентификатор, и я не хочу дублировать все javascript для диалога.
Предложения?
Решение не так просто. У вас должна быть возможность вызвать исходную функцию обратного вызова после нажатия кнопки "ОК" диалогового окна JQuery UI.
Сначала вам понадобится обобщенная функция 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>
В С# code-behind вам необходимо зарегистрировать предыдущую клиентскую функцию, передав исходный 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:GridView ... CssClass="mygridview"></asp:GridView>
и
$('table.mygridview td a').whatever()
Это позволит вам одновременно работать со всеми кнопками ссылки.
Вы можете сделать это следующим образом:
<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
Hy,
Сначала вы должны использовать JQuery Dialog или другие диалоги Clienside, это более круто.
У вас должен быть элемент 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 и из-за этого блокирует выполнение кода на стороне сервера (async postback).
Кнопка должна выглядеть так:
<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 я устанавливаю идентификатор элемента, который привязан к повторителю.
Таким образом, в событии 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: Если что-то неясное сообщение здесь, вопрос, и я обновлю ответ.
<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>
Вопрос определенно отвечает tanathos, но у меня есть другой вариант работы, который позволяет избежать написания кода в коде, если вы так склонны. Я просто скрыл кнопку удаления asp с помощью display: none и добавил кнопку удаления, которая вызывает диалог подтверждения, и нажимает кнопку скрытого удаления 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");
});