Параметры объекта AjaxOptions

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Последнее обновление: 31.10.2015

Выше мы использовали только один параметр объекта AjaxOptions. Но он имеет еще ряд параметров, которые позволяют настроить отображение результатов запроса:

  • Confirm - настраивает сообщение о подтверждении отправки запроса на сервер. Если пользователь не подтвердит, то запрос не будет отправлен

  • HttpMethod - устанавливает метод (Get или Post), с помощью которого выполняется запрос

  • InsertionMode - устанавливает, как полученные результаты будут отображаться на странице. Может принимать одно из трех значений перечисления InsertionMode: InsertAfter, InsertBefore и Replace(по умолчанию).

  • LoadingElementId- устанавливает id элемента html-страницы, который будет отображаться во время запроса. Обычно это какая-нибудь анимация, которая дает знать, что некоторая работа выполняется в фоновом режиме

  • LoadingElementDuration - устанавливает количество миллисекунд, через которое появится элемент, указанный в параметре LoadingElementId

  • OnBegin - задает обратный вызов перед отправкой запроса. Соотносится с событием beforeSend библиотеки jQuery

  • OnComplete - задает обратный вызов, который вызывается после выполнения запроса (как удачного, так и неудачного). Соотносится с событием complete библиотеки jQuery

  • OnFailure - задает обратный вызов, который вызывается после неудачного выполнения запроса. Соотносится с событием error библиотеки jQuery

  • OnSuccess - задает обратный вызов, который вызывается после удачного выполнения запроса. Соотносится с событием success библиотеки jQuery

  • UpdateTargetId - указывает на id элемента, в котором будут выводиться результаты запроса

  • Url - устанавливает адрес Url сервера, на который отправляется запрос. Установив данное свойство, можно не использовать название имя контроллера и его действие в качестве параметров Ajax.BeginForm

LoadingElementId и LoadingElementDuration

Эти параметры используются для создания некой анимации или визуализации, которая извещает пользователей о процессе запроса. Если запрос идет долго, то пользователь может долго не получать результаты запроса и может подумать, что страница зависла. Чтобы пользователь видел, что процесс выполняется, и нужно настраивать данные параметры.

@using (Ajax.BeginForm("BookSearch", new AjaxOptions 
						{ UpdateTargetId = "results", 
						LoadingElementId="loading", 
                        LoadingElementDuration=1000}))
{
    <input type="text" name="name" />
    <input type="submit" value="Поиск" />
}
<div id="loading" style="display:none; color:Red; font-weight:bold;">
    <p>Идет загрузка...</p>
</div>
<div id="results"></div>

Данный элемент отображается на странице только во время запроса, поэтому для него устанавливается атрибут display:none. И после выполнения запроса данный элемент снова скрывается.

Очень популярен способ индикации процесса с помощью картинки:

@using (Ajax.BeginForm("BookSearch", new AjaxOptions { UpdateTargetId = "results", LoadingElementId="loading", 
                                                        LoadingElementDuration=1000}))
{
    <input type="text" name="name" />
    <input type="submit" value="Поиск" />
}
<img id="loading" src="@Url.Content("~/Content/Images/loader.gif")" style="display:none" />
<div id="results"></div>

Confirm

Этот параметр настраивает сообщение о подтверждении отправки запроса на сервер. Если пользователь не подтвердит, то запрос не будет отправлен.

@using (Ajax.BeginForm("BookSearch", new AjaxOptions 
						{ UpdateTargetId = "results", 
						Confirm="Выполнить AJAX-запрос?"}))
{
    <input type="text" name="name" />
    <input type="submit" value="Поиск" />
}
<div id="results"></div>

InsertionMode

Этот параметр указывает на способ вставки результатов запроса на страницу. Он принимает одно из трех значений одноименного перечисления InsertionMode: InsertAfter (после остальных результатов), InsertBefore (перед остальными результатами) и Replace (полность замещает результаты предыдущего AJAX-запроса - используется по умолчанию).

Так, при установке значения параметра InsertionMode=InsertionMode.InsertBefore мы будем наблюдать следующую картину:

Обратные вызовы

Параметры OnBegin, OnComplete, OnFailure и OnSuccess помогают задать обратные вызовы, которые будут выполняться перед запросом, либо в случае удачного или неудачного выполнения запроса.

Чтобы их использовать, определим соответствующие обработчики javascript в представлении и укажем их в параметрах объекта AjaxOptions:

<script type="text/javascript">
    function OnBegin() {
        alert("Происходит отправка запроса");
    }
    function OnSuccess(data) {
        alert("Запрос был успешно выполнен. Получены следующие данные: \n" + data);
    }
    function OnFailure(request, error) {
        $("#results").html("Книги указанного автора не содержатся в базе данных.");
    }
    function OnComplete(request, status) {
        alert("Статус запроса : " + status);
    }
</script>

@using (Ajax.BeginForm("BookSearch", new AjaxOptions
{
    UpdateTargetId = "results",
    OnBegin = "OnBegin",
    OnFailure = "OnFailure",
    OnSuccess = "OnSuccess",
    OnComplete = "OnComplete"
}))
{
    <input type="text" name="name" />
    <input type="submit" value="Поиск" />
}

<div id="results"></div>
Обратный вызов OnBegin
Обратный вызов OnSuccess

Таким образом, объект AjaxOptions позволяет настроить различные параметры ajax-запроса.

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850