ASP.NET MVC 4

ASP.NET MVC 4

Адам Фриман

Работа с функциями обратного вызова Ajax

Класс AjaxOptions определяет набор свойств, которые позволяют нам указать JavaScript функции, которые будут вызываться в различных точках жизненного цикла Ajax запроса. Эти свойства описаны в таблице 21-3.

Таблица 21-3: Свойства обратного вызова AjaxOptions
Свойство Событие jQuery Описание
OnBegin beforeSend Вызывается непосредственно перед отправлением запроса
OnComplete complete Вызывается, если запрос был выполнен, независимо от того, успешно или нет
OnFailure error Вызывается, если запрос выполнен неудачно
OnSuccess success Вызывается, если запрос выполнен успешно

Каждое из свойств обратного вызова AjaxOptions соотносится с событием Ajax, поддерживаемым библиотекой JQuery. Мы перечислили JQuery события в таблице 21-3 для тех читателей, которые раньше использовали JQuery. Вы можете получить подробную информацию о каждом из этих событий и параметрах, которые будут переданы вашей функции, на http://api.jquery.com/jQuery.ajax.

В листинге 21-17 можно увидеть, как мы использовали элемент script для определения некоторых базовых функций JavaScript, которые будут отчитываться о ходе Ajax запроса, и использовали свойства, показанные в таблице 21-3, чтобы указать наши функции в качестве обработчиков Ajax событий.

Листинг 21-17: Использование функций обратного вызова Ajax
@using HelperMethods.Models
@model string
@{
	ViewBag.Title = "GetPeople";
	AjaxOptions ajaxOpts = new AjaxOptions {
		UpdateTargetId = "tableBody",
		Url = Url.Action("GetPeopleData"),
		LoadingElementId = "loading",
		LoadingElementDuration = 1000,
		Confirm = "Do you wish to request new data?"
	};
}
<script type="text/javascript">
	function OnBegin() {
		alert("This is the OnBegin Callback");
	}
	function OnSuccess(data) {
		alert("This is the OnSuccessCallback: " + data);
	}
	function OnFailure(request, error) {
		alert("This is the OnFailure Callback:" + error);
	}
	function OnComplete(request, status) {
		alert("This is the OnComplete Callback: " + status);
	}
</script>
<h2>Get People</h2>
<div id="loading" class="load" style="display: none">
	<p>Loading Data...</p>
</div>
<table>
	<thead>
		<tr>
			<th>First</th>
			<th>Last</th>
			<th>Role</th>
		</tr>
	</thead>
	<tbody id="tableBody">
		@Html.Action("GetPeopleData", new {selectedRole = Model })
	</tbody>
</table>
@using (Ajax.BeginForm(ajaxOpts)) {
<div>
	@Html.DropDownList("selectedRole", new SelectList(
		new [] {"All"}.Concat(Enum.GetNames(typeof(Role)))))
	<button type="submit">Submit</button>
</div>
}
<div>
	@foreach (string role in Enum.GetNames(typeof(Role))) {
	<div class="ajaxLink">
		@Ajax.ActionLink(role, "GetPeople",
			new {selectedRole = role},
			new AjaxOptions {
				UpdateTargetId = "tableBody",
				Url = Url.Action("GetPeopleData", new {selectedRole = role}),
				OnBegin = "OnBegin",
				OnFailure = "OnFailure",
				OnSuccess = "OnSuccess",
				OnComplete = "OnComplete"
		})
	</div>
	}
</div>

Мы определили четыре функции, по одному для каждого из обратных вызовов. Это очень легкий пример, и мы просто выводим сообщение для пользователя для каждой из этих функций. С учетом этих изменений переход по одной из ссылок будет отображать последовательность окон, которые сообщают о ходе Ajax запроса, как показано на рисунке 21-7.

Рисунок 21-7: Диалоговые окна, которые отображаются в ответ на функцию обратного вызова Ajax

Отображение диалоговых окон пользователю при каждом обратном вызове – не самая полезная вещь, которую можно сделать с обратными вызовами Ajax, но она демонстрирует последовательность, в которой вызываются функции. Мы можем сделать все, что угодно с этими функциями JavaScript: управлять HTML DOM, создавать дополнительные запросы и так далее. Одна из самых полезных вещей, которую мы можем сделать обратным вызовом, это обработка данных JSON. Мы опишем их в следующем разделе.

или RSS канал: Что новенького на smarly.net