Главная страница   /   21.6. Создание Ajax ссылок (ASP.NET MVC 4

ASP.NET MVC 4

ASP.NET MVC 4

Адам Фриман

21.6. Создание Ajax ссылок

В дополнение к формам мы можем использовать ненавязчивый Ajax для создания асинхронных элементов a. Механизм этого очень похоже на то, как работают Ajax формы. Вы можете увидеть, как мы добавили ссылки в представление Ajax GetPeople.cshtml, в листинге 21-15.

Листинг 21-15: Создание ссылок при помощи 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?"
	};
}
<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, "GetPeopleData",
			new {selectedRole = role},
			new AjaxOptions {UpdateTargetId = "tableBody"})
	</div>
	}
</div>

Мы использовали цикл foreach, чтобы вызвать вспомогательный метод Ajax.ActionLink для каждого из значений, определенных перечислением Role, создав набор элементов a с поддержкой Ajax. Созданные элементы a имеют такие же атрибуты data, которые мы видели при работе с формами:

...
<a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#tableBody"
	href="/People/GetPeopleData?selectedRole=Guest">Guest</a>
...

Наша конфигурация маршрутизации не имеет записи для переменной selectedRole, поэтому URL, который был создан для атрибута href, определяет ту роль, которую представляет ссылка, используя строковый компонент запроса URL.

Вы можете увидеть ссылки, которые мы добавили в представление, на рисунке 21-6. Нажатие по одной из этих ссылок вызовет метод действия GetPersonData действия и заменит содержимое элемент tbody возвращенным HTML фрагментом. Это создает тот же результат фильтрации данных, которого мы достигли с помощью Ajax формы ранее в этой главе.

Рисунок 21-6: Использование Ajax ссылок в представлении

Совет

Возможно, вам понадобиться очистить историю в браузере, чтобы увидеть изменения, представленные в данном примере.

Обеспечение постепенного ухудшения для ссылок

Мы столкнулись с той же проблемой с Ajax ссылками, которая у нас возникла с Ajax формами: когда нет браузерной поддержки JavaScript, нажатие по одной из ссылок будет просто отображать HTML фрагмент, который генерирует метод действия GetPeopleData.

Мы решаем эту проблему с помощью свойства AjaxOptions.Url, чтобы указать URL для Ajax запроса, и мы задаем действие GetPeople для вспомогательного метода Ajax.ActionLink, как показано в листинге 21-16.

Листинг 21-16: Создание постепенного ухудшения для Ajax ссылок
<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})
})
	</div>
	}
</div>
...

Именно поэтому мы создаем новый объект AjaxOptions для каждой из требуемых ссылок, а не использовали ту, которую мы создали в блоке кода Razor для элемента form. Независимый AjaxOptions позволяет нам указать различные значения для свойства Url для каждой ссылки и поддерживает постепенное ухудшение для браузеров без JavaScript.