Ajax-Формы

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

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

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

Допустим, у нас в базе данных хранятся объекты следующей модели Book:

public class Book
{
	public int Id {get; set;}
	public string Name {get; set;}
	public string Author {get; set;}
	public int Price {get; set;}
}

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

 [HttpPost]
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>
@Scripts.Render("~/scripts/jquery-1.10.2.min.js")
@Scripts.Render("~/scripts/jquery.unobtrusive-ajax.min.js")

Хелпер 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.