ASP.NET MVC 4
Адам Фриман
Создание 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.