Пример сайта на ASP.NET MVC 3 с использованием AJAX (часть 2 из 2)

В прошлой статье я показал как можно быстро и без особых усилий создать модель и представление в проекте на основе ASP.NET MVC3. Была создана страница обратной связи, а в этой части я покажу использовать ненавязчивый AJAX.

Вступление

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

Постановка задачи

На данный момент при нажатии на кнопку Create, у нас происходит обращение к серверу, потом полученный ответ “рисует” нам совершенно новую страницу (представление), которую мы назвали FeedbackSent.

Давайте сделаем так чтобы отправка сообщения происходила асинхронно.

Изменим код и разметку

1. Для начала я немного “навел порядок” перенеся следующие строки из файла Feedback.cshtml в файл _Layout.cshtml. К остальным ссылкам на библиотеки:

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"
    type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"
    type="text/javascript"></script>

Теперь в файле Feedback.cshtml изменим настройки формы:

2. Для начала изменим определение формы на следующий вид:

@using (Ajax.BeginForm(
        "feedback",
        "home",
        new AjaxOptions {
            HttpMethod="post",
            UpdateTargetId="target" }))
{
    // ...внутренние содержимое менять не надо
}

Давайте разберем по строчкам, что тут к чему. Итак, в первой строке я поменял html на Ajax. После этого конструктор в сигнатуру начал требовать дополнительные параметры. Строка номер два – это название метода ActionResult, который должен выполниться при нажатии на кнопку Create. Третья строка – это название контроллера. Четвертая, пятая и шестая строки это параметры запроса. В пятой указывается метод обращения к серверу, в данном случаи Post, а шестая строка идентификатор объекта DOM на форме, который примет результат запроса на отправку.

Естественно что раньше у нас на форме не было объекта, который принимал бы результат работы ajax-запроса, и поэтому я его добавил, сразу же под кнопку Create:

<p id="target"></p>

3. Чтобы всё заработало как надо, требуется добавить в список используемых библиотек еще одну библиотеку javascript под названием jquery.unobtrusive-ajax.js (она также как и все выше используемые находится в папке Scripts):

Я добавил эту сборку на страницу _Layout.cshtml.

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"
        type="text/javascript"></script>

4. Пришло время немного доработать HomeController.cs. И в частности, как раз метод Feedback, который помечен атрибутом HttpPost. Я добавил следующие строки для обработки ajax-запросов:

if (Request.IsAjaxRequest())
{
   return PartialView("FeedbackSent");
}

Обратите внимание, что если запрос является ajax-запросом, то в ответ на него возвращается тип представления PartialView. Содержание представления я менять не стал. Запустил проект, всё работает как и предполагалось:

Но что я вижу (вернее не вижу)! При отправке запроса (нажатие кнопки), я не смог увидеть никакой информации о том, что запрос выполняется. Надо бы исправить эту оплошность.

5. Добавлю в разметку формы Feedback.cshtml такой вот html:

<p>
   <input type="submit" value="Create" />
   <strong><</strong><strong>span id="sendingProgress" style="display: none;"></strong><strong>ждите, идет отправка сообщения...
  <img src='@Href("~/Content/Images/ajax_loader_big.gif")' alt="Ждите" />
   </span></strong>
</p>

Обратите внимание на две вещи. Во-первых, стиль объекта sendingProgress по умолчанию установлен как невидимый. И во-вторых, название идентификатору sendingProgress дано не случайно. Его теперь надо прописать как дополнительный параметр у ajax-формы:

@using (Ajax.BeginForm(
    "feedback",
    "home",
    new AjaxOptions
    {
        HttpMethod = "post",
        UpdateTargetId = "target",
        LoadingElementId = "sendingProgress"
    }))
{
    // внутреннее содержимое менять не надо
}

Изменения вы должны наблюдать в строке номер восемь. Проверю-ка я как это всё работает. Ура! Именно так как и планировалось:

После завершения работы запросы, форма выглядит также как и на предыдущей картинке. Всё работает.

Заключение

Хочу только добавить, что на самом деле, ajax-форма имеет в настройках параметров AjaxOptions и другие полезные параметры, например, InsertionMode, который указывает, каким образом надо обновлять содержимое объекта в которой возвращается результат. Описывать их в полной мере я не буду, пусть те, кому интересно, посмотрят в MSDN.

Единственное, что добавлю, так это то, что такой способностью отправлять ajax-запросы с параметрами AjaxOptions может не только Ajax.FormBegin, но и, например, Ajax.ActionLink. Но это уже пусть будет домашним заданием.