У меня есть ряд строк, которые генерируются с использованием asp: repeater :
<asp:repeater ID="itemsRepeater"
OnItemDataBound="itemsRepeater_ItemDataBound"
runat="Server">
<itemtemplate>
<tr>
<td>
<asp:HyperLink ID="linkView" runat="server"
Text="<%# GetItemText((Item)Container.DataItem) %>"
NavigateUrl="<%# GetViewItemUrl((Item)Container.DataItem) %>" />
</td>
<td>
<asp:HyperLink ID="linkDelete" runat="server"
Text="Delete"
NavigateUrl="<%# GetDeleteUrl((ActionItem)Container.DataItem) %>" />
</td>
</tr>
</itemtemplate>
</asp:repeater>
Повторитель создает таблицу HTML, в которой каждая строка содержит ссылку на элемент и (что по сути) ссылку «Удалить». Приведенный выше упрощенный пример кода генерирует HTML, похожий на:
<TR>
<TD>
<A href="ViewItem.aspx?ItemGuid={19a149db-5675-4eee-835d-3d78372ca6f9}">
AllisonAngle_SoccerGirl001.jpg
</A>
</TD>
<TD>
<A href="DeleteItem.aspx?ItemGuid={19a149db-5675-4eee-835d-3d78372ca6f9}">Delete</A>
</TD>
</TR>
Теперь, когда все работает, но я хочу преобразовать «Удалить» на стороне клиента. Я хочу иметь возможность нажать на ссылку, и это будет, на клиентском JavaScript:
- выдает предупреждение "Вы уверены ..."
- при ударе сервера javascript фактически удаляет нужный элемент
- удалить элемент из дерева DOM клиента
Итак, нужно решить четыре проблемы:
- Как подключить JavaScript к клиентскому клику по ссылке Удалить .
- Как узнать, на какой элемент нажал пользователь Удалить
- Предотвратить постбэк
- Удалить строку, по которой щелкнул пользователь
Это мой вопрос.
С этого момента вы найдете мои бессвязные попытки решить ее. Не принимайте что-либо ниже как относящееся к любому возможному принятому решению. То, что я разместил код ниже, не означает, что он полезен. И это не значит, что я нахожусь в пределах досягаемости лучшего решения. И потому что я не могу заставить что-то под работой - это, должно быть, пошло не по тому пути.
Мои попытки
Подключение Javascript
Первая задача - преобразовать ссылку для удаления HTML из чего-либо, например:
<A href="DeleteItem.aspx?ItemGuid={19a149db-5675-4eee-835d-3d78372ca6f9}">
Delete
</A>
в нечто большее javascripty:
<A href="#"
onclick="DeleteItem('DeleteItem.aspx?ItemGuid={19a149db-5675-4eee-835d-3d78372ca6f9}')">
Delete
</A>
и добавить скрипт:
<script type="text/javascript">
//<![CDATA[
function DeleteItem(deleteUrl)
{
//Ask the user if they really want to
if (!confirm("Are you sure you want to delete INSERT NAME HERE?"))
{
return false;
}
//Call returns false if the server returned anything other than OK
if (!DoAjaxHit(deleteUrl)
{
return false;
}
//Remove the table row from the browser
var tableRow = document.getElementById("TODO-WHAT ID");
if (row != null)
{
//TODO: how to delete the tableRow from the DOM tree?
//document.Delete(tableRow) ?
}
//return false to prevent a postback
return false;
}
//]]>
</script>
Какую комбинацию кода ASP можно использовать для создания вышеуказанного? Я слышал, что asp: LinkButton имеет событие OnClientClick , где вы можете подключить функцию JavaScript:
<asp:LinkButton ID="linkDelete" runat="server"
Text="Delete"
OnClientClick="DeleteItem(<%# GetDeleteUrl((ActionItem)Container.DataItem) %>);"/>
Проблема в том, что отображаемый HTML-код буквально содержит:
<a onclick="DeleteItem(<%# GetDeleteUrl((ActionItem)Container.DataItem)) %>);" ...>
Delete
</a>
Если я изменю обработчик события щелчка клиента на:
OnClientClick="DeleteItem('todo - figure this out');"/>
это работает - так же как "todo - выяснить это" может работать.
Предотвращение обратных передач
На самом деле происходит дублирование вызова javascript (я вижу мое предупреждение), но есть следующая проблема: возвращение false из функции javascript не предотвращает обратную передачу. Фактически, я вижу, что href в сгенерированном html-коде - это не "#", а
javascript:__doPostBack('ctl0....
Я попытался изменить код ASPX для включения обработчика OnClick:
OnClick="#"
OnClientClick="DeleteItem('todo - figure this out');"
Но компилятор считает, что сторона фунта - это прагма, и скулит:
Директивы препроцессора должны выглядеть как
первый непробельный символ на
линия
Идентификация строки таблицы
Строки таблицы не имеют идентификатора, они генерируются asp: repeater .
Как функция javascript может узнать, что вызвало событие click? Javascript должен быть в состоянии найти элемент и удалить его из дерева.
Примечание: Я бы, конечно, предпочел анимацию исчезновения + коллапса.
Обычно вы получаете элемент, используя
var tr = document.getElementById("the table row's id");
Но строки таблицы не имеют легко узнаваемого идентификатора. Поскольку существует несколько строк, сервер генерирует идентификатор при создании таблицы. я понимаю, что какое-то решение должно будет включать изменение:
<TR>
в
<TR runat="server">
так, чтобы на каждой строке таблицы был идентификатор, сгенерированный сервером, но как мне ссылаться на сгенерированное имя из javsscript?
Обычно я думал бы, что проблема сценариев будет решена с помощью нескольких параметров:
function DeleteItem(tableRowElement, deleteUrl)
{
//Do a web-hit of deleteUrl to delete the item
//remove tableRowElement DOM object from the document tree
}
Но проблема только в другом месте: как заполнить tableRowElement и deleteUrl для вызова функции javascript?
Такая простая проблема: преобразовать клик из постбэка в сторону клиента.
Объем проблем становится довольно идиотским. Который, кажется, указывает, что либо
- идея решения - это нечто совершенно другое
- нет решения
Ссылки
Stackoverflow: как затушить строку перед обратной передачей?
Переполнение стека: Javascript перед asp: нажатие кнопки на поле
asp.net: Доступ к элементам повторителя из javascript.
Stackoverflow: как получить доступ к элементам, созданным повторителем?