В плане юзабилити хорошим тоном всегда считалось дать пользователю возможность отменить свое действие, если он не намерен ждать затянувшегося по времени ответа. Ajax-запросы не исключение. В этой короткой статье я покажу один из вариантов того, как просто можно дать пользователю возможность отменить запрос в ajax.net, если тот долго выполняется, или завис в силу каких-то причин.
Первым делом, с помощью компонентов AjaxControlToolkit объявим такой код:
Здесь для UpdatePanel up1 объявляется extender, который служит для того, чтобы выводить информацию во время ajax-запроса на сервер. В свою очередь, для extender объявляется другой extender, который выводит html-код поверх всего содержимого. Обратите внимание, что через свойство DisplayAfter указывается, через какой промежуток времени необходимо рендерить html-блок.
Для кнопки отмены определим javascript-следующую функцию, которая и будет выполнять основную работу по отмене запроса:
Этот блок кода можно разместить на странице либо вынести во внешний файл.
Теперь при длительном запросе у пользователя будет возможность отменить запрос простым и понятным действием.
В статье используется библиотека AjaxControlToolkit. Рассматривается только ajax-запросы при работе с UpdatePanel.
Первым делом, с помощью компонентов AjaxControlToolkit объявим такой код:
<asp:UpdateProgress ID=«upg1» runat=«server» AssociatedUpdatePanelID=«up1» DisplayAfter=«100»>
<ProgressTemplate>
<table style=«padding: 5px; border: solid 1px gray; background: yellow; font-size: 10px;
font-family: Verdana;»>
<tr>
<td>
<asp:Image ID=«Image1» runat=«server» ImageUrl="~/img/ctrls/p.gif"></asp:Image>
</td>
<td>
Обновление, пожалуйста ждите... <input type=«button» id=«resetButton» onclick=«resetPostBack()»
value=«Отменить» />
</td>
</tr>
</table>
</ProgressTemplate>
</asp:UpdateProgress>
<cc1:AlwaysVisibleControlExtender ID=«UpdateProgress1_AlwaysVisibleControlExtender»
runat=«server» Enabled=«True» TargetControlID=«upg1»>
</cc1:AlwaysVisibleControlExtender>
* This source code was highlighted with Source Code Highlighter.
Здесь для UpdatePanel up1 объявляется extender, который служит для того, чтобы выводить информацию во время ajax-запроса на сервер. В свою очередь, для extender объявляется другой extender, который выводит html-код поверх всего содержимого. Обратите внимание, что через свойство DisplayAfter указывается, через какой промежуток времени необходимо рендерить html-блок.
Код приведен в качестве примера. Вы можете сами переделать его через использование div, вместо table и отказаться от второго экстендера, релизовав механизм вывода блока поверх содержимого через, к примеру, css. Будет, также, не лишним вынос описания стилей в отдельный css-файл.
Для кнопки отмены определим javascript-следующую функцию, которая и будет выполнять основную работу по отмене запроса:
Этот блок кода можно разместить на странице либо вынести во внешний файл.
Функция PageRequestManager.isInAsyncPostBack() в MSDN описана так: «возвращает значение, которое показывает, что PageRequestManager обрабатывает postback."
Теперь при длительном запросе у пользователя будет возможность отменить запрос простым и понятным действием.