Ajax-Формы

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Итак, после настройки и подключения всех необходимых скриптов мы можем приступить непосредственно к работе с Ajax. Допустим, у нас есть класс Book, содержащий данные о книге, а в БД у нас может находиться несколько книг одного автора. И нам надо реализовать поиск всех книг определенного автора.

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

Для начала определим действие контроллера, которое будет отвечать за извлечение из БД нужной информации и передавать извлеченную информацию в частичное представление:

public ActionResult BookSearch(string name)
{
    var allbooks = db.Books.Where(a => a.Author.Contains(name)).ToList();
    if(allbooks.Count<=0)
    {
        return HttpNotFound();
    }
    return PartialView(allbooks);
}

Итак, действие получает в качестве параметра имя автора и по нему осуществляет поиск в БД. Теперь добавим к представлениям данного контроллера частичное представление BookSearch.cshtml, поскольку частичные представления довольно удобны для работы с AJAX:

@model IEnumerable<AjaxMvcApplication.Models.Book>

<div id="searchresults">

	<h3>Все книги автора : @Model.First().Author</h3>
    <ul>
    @foreach (var item in Model)
    { 
        <li>@item.Name</li>
    }
    </ul>

</div>

В данном случае представление типизируется для модели IEnumerable<AjaxMvcApplication.Models.Book>, которая и будет передаваться в представление. А затем в элемент div будут выводиться результаты поиска в виде списка при условии, конечно, если модель не равна null.

Теперь перейдем к самому представлению, которое и будет отображаться пользователю:

@{
    ViewBag.Title = "Index";
}

<div>
@using (Ajax.BeginForm("BookSearch", new AjaxOptions { UpdateTargetId = "results"}))
{
    <input type="text" name="name" />
    <input type="submit" value="Поиск" />
}
<div id="results"></div>
</div>

Хелпер Ajax.BeginForm похож на хелпер Html.BeginForm - он также создает элемент form, который используется для отправки запроса на сервер. Первый параметр принимает имя действия, к которому будет обращен запрос. В данном случае это созданное выше действие BookSearch, которое возвращает частичное представление с данными. Если действие находится не в текущем контроллере, а в другом мы также можем указать имя контроллера: Ajax.BeginForm("BookSearch", "Home", new AjaxOptions....

Второй параметр более интересный. Он представляет объект AjaxOptions, который влияет на отображение результатов. Он принимает ряд параметров, из которых мы в данном случае использовали только UpdateTargetId. Этот параметр указывает, что у нас при получении результатов от сервера на странице будет обновляться элемент с id="results", в который помещется html-код выше созданного частичного представления.

Теперь мы можем запустить приложение и осуществить поиск с помощью AJAX:

Обратите внимание на создаваемую разметку для данной формы:

<form action="/Home/BookSearch" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#results" id="form0" method="post">    
	<input type="text" name="name" />
    <input type="submit" value="Поиск" />
</form>
<div id="results"></div>

Создается как и в случае с хелпером Html.BeginForm элемент form. Но теперь в специальном атрибуте указывается, что это Ajax-форма: data-ajax="true". Остальные параметры формы являются передачей в html параметров объекта AjaxOptions.