Пример сайта на ASP.NET MVC 3 с использованием AJAX (часть 2 из 2)
Сайтостроение | создано: 05.06.2011 | опубликовано: 05.06.2011 | обновлено: 13.01.2024 | просмотров: 22634 | всего комментариев: 3
В прошлой статье я показал как можно быстро и без особых усилий создать модель и представление в проекте на основе 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. Но это уже пусть будет домашним заданием.
Комментарии к статье (3)
Спасибо, очень полезная статья.
большое спасибо автору, очень полезно для начинающих
Спс, никак не мог найти инфо про MVC AJAX для совсем чайников, ваша статья очень помогла.