Я новичок в jQuery и пытаюсь реализовать диалог JQuery UI в элементе Gridview, следуя этой статье: http://www.codeproject.com/Articles/238122/Delete-Functionality-in-GridView-with-Confirmation
Я прошел через этот код с помощью инструмента Chrome Dev и диалоговое окно отобразилось правильно, но когда я нажимаю кнопку "Удалить", связанная анонимная функция __doPostBack (уникальный идентификатор не появляется. Может ли точка прерывания JS быть настроена на ловушку щелчка " Удалить "на стороне клиента? Для кода на стороне сервера у меня есть точка останова в Visual Studio, где обычно вводится обратная передача, но ее никогда не ударяют.
Вот соответствующий столбец моего ASP.Net Gridview:
<asp:TemplateField HeaderText="Deleting..">
<ItemTemplate>
<!--To fire the OnRowDeleting event.-->
<asp:LinkButton ID="lbDelete" runat="server" CommandName="Delete"
OnClientClick="return deleteItem(this);"
ControlStyle-CssClass="buttonInRow"
Text="Delete">
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
Вот как это делает:
<td>
<!--To fire the OnRowDeleting event.-->
<a onclick="return deleteItem(this);" id="ctl00_MainContentPlaceHolder_GridView1_ctl02_lbDelete" class="buttonInRow" href="javascript:__doPostBack('ctl00$MainContentPlaceHolder$GridView1$ctl02$lbDelete','')">Delete</a>
</td>
Я не вижу ошибок в следующих сценариях:
$(function() {
InitializeDeleteConfirmation();
});
function InitializeDeleteConfirmation() {
$('#deleteConfirmationDialog').dialog({
autoOpen: false,
resizable: false,
height: 140,
modal: true,
buttons: {
"Delete": function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
}
function deleteItem(element) {
var uniqueID = element.id;
var row = element.parentNode.parentNode;
// Cells[n]: n referring to the cell number displayed on GridView; n starting from 0...
var PositionTitle = row.cells[0].innerText;
var dialogTitle = 'Permanently Delete Item: ' + PositionTitle + '?';
$("#deleteConfirmationDialog").html('<p><span class="ui-icon " + "ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>" + "Please click delete to confirm deletion.</p>');
$("#deleteConfirmationDialog").dialog({
title: dialogTitle,
buttons: {
"Delete": function () { __doPostBack(uniqueID, '');
$(this).dialog("close"); },
"Cancel": function () { $(this).dialog("close"); }
}
});
$('#deleteConfirmationDialog').dialog('open');
return false;
}
Идея здесь заключается в том, что скрипт deleteItem выше всегда возвращает false, потому что (якобы) он обрабатывает обратную передачу непосредственно перед закрытием диалога (то есть тот же код, что и в представленном выше фрагменте HTML). Могла ли эта функция __doPostBack терпеть неудачу и не нарушать отладчик?
Я нашел решение этой проблемы. Я попытаюсь объяснить, чтобы помочь кому-то еще в будущем. Принцип здесь заключается в том, что диалог jQuery будет выполнять функцию __doPostBack непосредственно из Javascript. Ключ к проблеме показан в представленном выше фрагменте выше:
<a onclick="return deleteItem(this);" id="ctl00_MainContentPlaceHolder_GridView1_ctl02_lbDelete" class="buttonInRow" href="javascript:__doPostBack('ctl00$MainContentPlaceHolder$GridView1$ctl02$lbDelete','')">Delete</a>
Обратите внимание на разницу в значениях между ID и первым аргументом doPostBack:
id="ctl00_MainContentPlaceHolder_GridView1_ctl02_lbDelete"
против
('ctl00$MainContentPlaceHolder$GridView1$ctl02$lbDelete'
Итак, я изменил свой скрипт, чтобы создать "postbackID" из "uniqueID" следующим образом:
function deleteItem(element) {
var uniqueID = element.id;
var postbackID = uniqueID.split("_").join("$");
var row = element.parentNode.parentNode;
var PositionTitle = row.cells[0].innerText;
var dialogTitle = 'Permanently Delete Item: ' + PositionTitle + '?';
$("#deleteConfirmationDialog").html('<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>" + "Please click delete to confirm deletion.</p>');
$("#deleteConfirmationDialog").dialog({
title: dialogTitle,
buttons: {
"Delete": function() {
__doPostBack(postbackID, '');
$(this).dialog("close"); },
"Cancel": function () { $(this).dialog("close"); }
}
});
$('#deleteConfirmationDialog').dialog('open');
return false;
}
Есть, вероятно, более элегантные способы сделать это, но я очень рад, что успешно выполнил обещанные результаты в большой статье CodeProject от junnark. Например, он извлекает this.name и использует это для прямого вызова __doPostBack. Я попытался добавить атрибут name в asp: LinkButton, но он отображает только "короткое имя", а не полное имя (имена) имен имен. В своей статье он использует ImageButton, в то время как я использую элемент управления LinkButton, так что, вероятно, это корень этой разницы.
Ваш код очень запутанный и трудно следовать. Для.NET-рендеринга я всегда предлагаю посмотреть на концы с помощью селектора.
Тогда ваш код упростит это:
$('[id$="lbDelete"]').on('click', function(e) {
// Your link element available as a jQuery object
var $el = $(this);
// Prevent the link from firing before anything else can happen
e.preventDefault();
// Now you can manipulate the DOM using your link as a reference point
// eg. $el.parent()...
});
Также вы можете поместить контрольную точку в эту функцию для отладки строки за строкой.