Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core
Выше мы использовали только один параметр объекта 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
Эти параметры используются для создания некой анимации или визуализации, которая извещает пользователей о процессе запроса. Если запрос идет долго, то пользователь может долго не получать результаты запроса и может подумать, что страница зависла. Чтобы пользователь видел, что процесс выполняется, и нужно настраивать данные параметры.
@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>
Этот параметр настраивает сообщение о подтверждении отправки запроса на сервер. Если пользователь не подтвердит, то запрос не будет отправлен.
@using (Ajax.BeginForm("BookSearch", new AjaxOptions { UpdateTargetId = "results", Confirm="Выполнить AJAX-запрос?"})) { <input type="text" name="name" /> <input type="submit" value="Поиск" /> } <div id="results"></div>
Этот параметр указывает на способ вставки результатов запроса на страницу. Он принимает одно из трех значений одноименного перечисления
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>
Таким образом, объект AjaxOptions позволяет настроить различные параметры ajax-запроса.