ASP.NET MVC 4 в действии

Джеффри Палермо

Вспомогательные методы Ajax в ASP.NET MVC

Ранее в этой главе мы узнали, как можно написать клиентский код JavaScript для отправки и получения данных с сервера. Однако существует еще один подход для отправки запросов Ajax в ASP.NET MVC, который предполагает использование вспомогательных методов Ajax. Для начала мы рассмотрим вспомогательные методы Ajax, доступные в ASP.NET MVC, и как они связаны с jQuery и другими библиотеками JavaScript. Далее мы узнаем, как их можно использовать для достижения тех же результатов, которые мы получали до сих пор, когда записывали код jQuery вручную.

Эти вспомогательные методы доступны как методы расширения в классе AjaxHelper, и они будут полезны для создания разметки, которая автоматически использует Ajax для отправки и получения данных. Они приведены в таблице 7.1.

Хотя последние два способа фактически не относятся к Ajax, их можно эффективно использовать при работе с JavaScript в приложениях MVC.

Данные вспомогательные методы Ajax используют библиотеки JavaScript для отправления актуальных запросов. Эта разметка не привязана напрямую к какой-либо библиотеке, а использует адаптеры, позволяющие использовать библиотеку JavaScript для отправки запросов Ajax. В коробочной версии ASP.NET MVC есть адаптеры для JQuery и Microsoft Ajax. То, какой из них будет использован, зависит от конфигурации приложения.

Когда вы создаете новый проект ASP.NET MVC, файл web.config содержит следующие строки:

<appSettings>
	<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>

При такой настройке разметка, созданная вспомогательными методами Ajax, использует ненавязчивый JavaScript, аналогично примерам с jQuery в предыдущем разделе. Однако когда этот параметр отключен, вспомогательные методы будут создавать разметку, которая использует библиотеку MicroSoft Ajax. Лучше всего оставить этот параметр включенным. Что произойдет, если вы выставите ему значение false, мы разберем далее.

В зависимости от значения, установленного для UnobtrusiveJavaScriptEnabled – true или false, вспомогательные методы Ajax в ASP.NET MVC будут создавать разметку, совместимую с конкретным адаптером. Этот адаптер знает, как ее обрабатывать, и вызывает соответствующую библиотеку JavaScript для исполнения кода. Отношения между вспомогательными методами Ajax и библиотеками JavaScript показаны на рисунке 7-5.

Рисунок 7-5: Отношения между вспомогательными методами Ajax и библиотеками JavaScript

Для начала возьмем пример страницы Privacy Policy из предыдущего раздела и рассмотрим, как можно использовать метод ActionLink для достижения того же результата. Контроллер изменять не нужно, но в представление Index понадобится внести изменения, показанные в следующем листинге.

@section head {
	<script type="text/javascript"
		src="@Url.Content(
			"~/scripts/jquery.unobtrusive-ajax.js")">
	</script>
}
@Ajax.ActionLink(
	"Show the privacy Policy",
	"PrivacyPolicy",
		new AjaxOptions {
			InsertionMode = InsertionMode.Replace,
				UpdateTargetId = "privacy"
})
<div id="privacy"></div>

Как и в предыдущих примерах, мы начнем с отображения части раздела head. Но на этот раз мы добавим ссылку на файл jQuery.unobtrusive-ajax.js, который также является частью шаблона проекта ASP.NET MVC по умолчанию. Это адаптер, который знает, как использовать JQuery для выполнения Ajax запросов, основываясь на представляемых элементах.

Затем мы добавим вызовAjax.ActionLink. Для этого метода есть несколько перегруженных вариантов. Мы используем вариант с тремя аргументами. Первый – это текст, который должен стать гиперссылкой. Второй - название действия, к которому должен быть отправлен асинхронный запрос - в нашем случае, действие PrivacyPolicy. Последний аргумент - это объект AjaxOptions, который можно использовать для настройки запроса. Свойство UpdateTargetId этого объекта указывает, что HTML-элемент с id равном privacy нужно обновить, чтобы добавить результат запроса к действию PrivacyPolicy, и свойство InsertionMode указывает, что все содержимое этого элемента необходимо заменить.

Когда вы запустите приложение, вы получите такой же результат, как и в предыдущем примере – информация о политике конфиденциальности добавляется на страницу под ссылкой на действие. Но представленная разметка выглядит несколько иначе:

<a data-ajax="true" data-ajax-mode="replace"
	data-ajax-update="#privacy"
	href="/AjaxHelpers/PrivacyPolicy">Show the privacy Policy</a>

В предыдущем примере мы использовали JQuery, чтобы найти на странице ссылку с конкретным ID и прикрепить к ней обработчик события. Ajax.ActionLink генерирует ссылки, используя несколько иной подход.

Эти ссылки имеют несколько дополнительных атрибутов. Именно наличие этих атрибутов указывает, что данная ссылка должна быть обработана Ajax. Таким образом, вместо создания запроса Ajax в специальном файле JavaScript, мы добавляем в ссылку все метаданные, необходимые сценарию JQuery-unobtrusive.ajax для того, чтобы создать соответствующий запрос.

Атрибут data-ajax указывает, что гиперссылка должна выполнять свою функцию асинхронно, а атрибуты data-ajax-mode и data-ajax-update относятся к объекту AjaxOptions, указанному в листинге 7.8.

Когда страница загрузится, скрипт в файле jquery-unobtrusive.ajax найдет все ссылки с атрибутом data-ajax и добавит событие click, что похоже на то, что мы делали в листинге 7.7. Аналогично, если в браузере отключен JavaScript, то ссылка продолжит функционировать как обычная гиперссылка, не использующая Ajax.

Ajax.BeginForm

Таким же образом вы можете использовать вспомогательный метод Ajax.BeginForm для асинхронной отправки формы. Давайте изменим форму, которую мы предварительно создали для добавления комментариев, используя этот вспомогательный метод.

<h4>Comments</h4>
<ul id="comments"></ul>
@using(Ajax.BeginForm("AddComment", new AjaxOptions {
	UpdateTargetId = "comments",
	InsertionMode = InsertionMode.InsertAfter })) {
		@Html.TextArea("Comment", new{rows=5, cols=50})
		<br />
		<input type="submit" value="Add Comment" />
}

Как и метод Html.BeginForm, который мы изучили в главе 2, метод Ajax.BeginForm используется в блоке using, чтобы определить размер формы. Запрос к BeginForm отображает открывающий тег <form />, а закрывающая скобка блока using определяет конец тега.

Перегруженный вариант, который мы используем в данный момент для BeginForm, принимает два параметра. Первый – это имя действия контроллера, который мы вызываем (в данном случае AddComment), второй – объект AjaxOptions. Как и в методе Ajax.ActionLink, эти параметры определяют, как должен быть обработан результат Ajax-запроса. В этом случае после того, как запрос отправлен, результат должен быть загружен в конец списка comments.

Как и форма из листинга 7.6, эта форма содержит текстовую область и кнопку отправки.

Если сейчас запустить приложение, оно будет работать точно так же, хотя к форме и добавлены дополнительные атрибуты data-ajax, такие как ActionLink. Результат разметки приведен в листинге 7-10.

<form action="/AjaxHelpers/AddComment"
	data-ajax="true" data-ajax-method="POST"
	data-ajax-mode="after" data-ajax-update="#comments"
	id="form0" method="post">
	<textarea cols="50" id="Comment" name="Comment" rows="5">
</textarea>
	<br />
	<input type="submit" value="Add Comment" />
</form>

В этой форме также реализуется принцип прогрессивного улучшения. Когда скрипт jQuery.unobtrusiveаjax включен в страницу, эта форма будет отправлена через Ajax, но если в браузере пользователя отключен JavaScript, форма выполнит обычную отправку данных.

Параметры Ajax

В предыдущем разделе было показано, что во вспомогательных методах ActionLink и BeginForm может использоваться объект AjaxOptions. Он содержит указания, как должен быть обработан результат запроса Ajax. Класс AjaxOptions содержит несколько параметров, доступных как свойства; они перечислены в таблице 7-2.

За исключением LoadingElementDuration, все эти параметры были ранее доступны в ASP.NET MVC 2. Теперь изменился только способ, каким они добавляются в разметку страницы. Как вы уже знаете, эти параметры генерируются как data-атрибуты в HTML-элементах, тогда как в MVC 2 они добавлялись на страницу гораздо более навязчивым образом.

Отличия от предыдущих версий ASP.NET MVC

Хотя вспомогательные методы Ajax и были частью ASP.NET MVC начиная с первой версии, теперь по умолчанию используется jQuery. В предыдущих версиях платформы эти вспомогательные методы всегда использовали библиотеку Microsoft Ajax и не генерировали JavaScript в ненавязчивой форме. Вы можете вернуться к этому поведению, назначив параметру UnobtrusiveJavaScriptEnabled значение false в разделе AppSettings в файле web.config:

<appSettings>
	<add key="UnobtrusiveJavaScriptEnabled" value="false"/>
</appSettings>

Теперь, если мы отправляем запрос к Ajax.ActionLink таким же образом, как мы сделали это в листинге 7-8, будет генерироваться следующая разметка:

<a href="/AjaxHelpers/PrivacyPolicy"
	onclick="Sys.Mvc.AsyncHyperlink.handleClick(
		this, new Sys.UI.DomEvent(event), {
			insertionMode: Sys.Mvc.InsertionMode.replace,
			updateTargetId: &#39;privacy&#39;
});">Show the privacy Policy</a>

Вместо атрибутов data-ajax, все метаданные находятся внутри события onclick. Оно также требует ссылки на скрипты MicrosoftAjax.js и MicrosoftMvcAjax.js для корректной работы. Данный код не является таким же интуитивным, как раньше, а также в нем нарушен принцип ненавязчивости JavaScript, так как он содержит вызов метода непосредственно в атрибуте onclick.

Если вы обновляете сайт из ранних версий ASP.NET MVC, возможно, вам потребуется сохранить данное поведение для поддержки обратной совместимости. Во всех остальных случаях лучше оставить для UnobtrusiveJavaScriptEnabled значение true, так как этот подход позволит создавать более чистую разметку и поддерживается Microsoft.

Подписаться

или RSS канал: