Предыдущий ролик Следующий ролик  

Видео урок: Performing partial-page updates with pure jQuery

Основы ASP.NET MVC 5

В этом видео я покажу вам, как с помощью jQuery отправлять Ajax-запросы к действию. Мы увидим, что такой подход делает процесс управления жизненным циклом запроса более гибким. Вернемся к представлению Contact. Я закомментировал наше первое решение из предыдущего видео. Далее мы рассмотрим альтернативное решение, подразумевающее улучшенное изображение загрузки и не требующее никаких дополнительных скриптов, как, например, в предыдущем примере. Как видите, я оставил секцию formSection, а также добавил атрибут Id к элементу form.

Добавим еще один Id к элементу textarea и будем использовать указанные идентификаторы при обращении к этим элементам с помощью jQuery. Добавим еще одну секцию script, поскольку мы хотим убедиться в том, что тот код, который мы собираемся написать, выполняется после загрузки библиотеки jQuery. После этого мы просто напишем обработчик для отправки формы, воспользуемся jQuery-методом post для формирования Ajax-запроса к действию Contact и обновим страницу. Обычно я использую обработчик document.ready или это сокращение, но поскольку нам уже известно, что указанные выше элементы будут загружаться, на самом деле это небязательно.

Итак, напишем обработчик отправки контактной формы. Внутрь обработчика добавим метод post для тех случаев, когда нужно будет выполнить простую отправку формы без указания большого количества опций. Для задания URL можно воспользоваться синтаксисом Razor и ввести Url.Action. Но проще будет оставить здесь пустую строку, что означает отправку на текущий URL. В более ранних версиях Internet Explorer этот код бы не работал, но на сегодняшний момент это вполне допустимая практика.

Что касается данных, мне нужен только параметр message, а затем укажем message.val. Далее вместо передачи callback-функции в качестве третьего параметра лучше будет привязать метод done и определить внутри callback-функцию, управляющую ответом. Можно перенести эту часть на другую строку для удобства прочтения. Итак, мы хотим, чтобы написанный нами обработчик получал ответ и заменял им внутренний HTML секции forms. Используемый здесь HTML-метод аналогичен методу InsertionMode.Replace, который применялся в примере с библиотекой Microsoft Ajax.

Кажется, я забыл добавить круглые скобки для метода val. Не забудьте, что я собирался расширить этот ответ с помощью значка индикатора прогресса, поэтому прямо сейчас посмотрим, как это сделать. Изображение находится в файлах упражнений: папка Chapter 7 -> Start. Давайте сначала перетащим его в Обозреватель решений, а затем можно перетащить его в наше представление. Кроме того, присвоим этому изображению идентификатор прогресса, и пусть по умолчанию он будет невидимым. Показывать это изображение я буду после отправки формы.

Чтобы спрятать это изображение, нам больше не потребуется никакого кода, поскольку все, что находится внутри этого элемента div, исчезнет. Было бы замечательно, если бы мы отложили эту замену на секунду или две, чтобы можно было увидеть сообщение. Проще всего поместить этот код внутрь function, а затем передать его в setTimeout и отложить, к примеру, на 2 000 миллисекунд. Наконец, чтобы отключить обычную синхронизацию для этой кнопки Submit, вернем "false" в конце этого обработчика отправки формы. Итак, запустим нашу новую версию контактной формы Ajax, нажав Ctrl+F5.

Протестируем эту форму. Теперь мы получаем визуальный ответ, который внушает больше доверия. Итак, мы рассмотрели два способа формирования Ajax-запросов к действиям контроллера. Первый из них проще настраивать, если вы хорошо владеете C#. Это подход больше зависит от настроек. Для второго подхода нужно больше пользовательского Javascript, но при этом он делает процесс обработки ответов более гибким и для него не требуется никаких дополнительных внешних скриптов.