Pull to refresh

asp.net: отмена ajax.net запроса

Reading time 3 min
Views 1.9K
В плане юзабилити хорошим тоном всегда считалось дать пользователю возможность отменить свое действие, если он не намерен ждать затянувшегося по времени ответа. Ajax-запросы не исключение. В этой короткой статье я покажу один из вариантов того, как просто можно дать пользователю возможность отменить запрос в ajax.net, если тот долго выполняется, или завис в силу каких-то причин.

В статье используется библиотека 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."

Теперь при длительном запросе у пользователя будет возможность отменить запрос простым и понятным действием.

Tags:
Hubs:
+6
Comments 4
Comments Comments 4

Articles