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

Видео урок: Performing partial-page updates with unobtrusive Ajax

Основы ASP.NET MVC 5

В этом видео я покажу вам, как использовать Ajax-запросы в рамках действий для обновления разделов страницы таким образом, чтобы браузеру при этом не приходилось загружать весь HTML-документ. Мы рассмотрим два способа, первый из которых идеально подходит для разработчиков, плохо разбирающихся в JavaScript. Мы внесем в нашу контактную форму несколько изменений, в результате которых при ее отправке будет создаваться Ajax-запрос и обновляться только сообщение внутри данной формы, а не вся страница целиком, как это происходит сейчас. Первое, что я хочу сделать в представлении Contact, - удалить теги form и заменить их на блок using.

А вместо Html.BeginForm я буду использовать Ajax.BeginForm. Его перегрузки похожи на перегрузки Html.BeginForm, но мне нужна та, которая принимает в качестве параметра экземпляр AjaxOptions. На данный момент мне нужны следующие опции: HttpMethod, равный "post", и InsertionMode, который сообщает, в какое место страницы необходимо вставить ответ. Хотим ли мы поместить его после какого-то конкретного элемента, перед каким-то элементом или этот ответ должен заменить определенный элемент? Я выберу вариант "Replace" (Заменить). Совсем скоро я объясню вам разницу между вариантами Replace и ReplaceWith.

А что же мы будем заменять? Это мы указываем в свойстве UpdateTargetId. Я присвою ему значение "formSection". Это будет новый элемент div, в который помещается вся форма и само сообщение. Нужно только добавить вот сюда фигурную скобку и вместо закрывающего тега form - закрывающую фигурную скобку. Удалим этот лишний закрывающий тег div. Если мне нужно добавить отступ, то можно просто нажать Ctrl+K, а потом Ctrl+D. Итак, разница между InsertionMode.Replace и InsertionMode.ReplaceWith заключается в том, что первый заменит все содержимое этого тега div, а второй заменит тег div полностью.

Чтобы использовать Ajax.BeginForm необходим jQuery, который уже добавлен в связку в файле _Layout.cs. Но помимо этого, потребуется еще и скрипт, который можно получить с помощью NuGet. Называется этот скрипт "Microsoft JQuery Unobtrusive Ajax". Как только мы начнем с ним работать, мы поймем, почему он называется "скромным" (unobtrusive). Найти его можно, введя в строке поиска "ms ajax". Это второй из выданных результатов. Итак, теперь этот скрипт будет находиться в папке Scripts. Чтобы он появился после связки jQuery, нужно добавить сюда секцию scripts, а затем добавить минимизированную версию скрипта, просто перетащив его из Обозревателя решений.

На самом деле осталось сделать лишь одно. Действие Contact контроллера HomeController будет возвращать представление и отображать всю страницу, но не забывайте, что наша цель - заменить этот элемент form нашим сообщением. Поэтому на самом деле вместо представления мы будем возвращать частичное представление. Создадим частичное представление под названием "_ContactThanks". Мы уже видели раньше, что символ подчеркивания - это всего лишь обозначение, используемое для частичных представлений.

Теперь в папку Views -> Home добавим это представление как частичное. В качестве шаблона оставим "Empty" (Пустой), поскольку мне нужно, чтобы это представление просто демонстрировало сообщение из ViewBag. Скопируем эту разметку со страницы Contact. Итак, давайте протестируем наш код. Можно нажать клавишу Ctrl+F5 в представлении Contact, чтобы построить это решение и перейти прямо на данную страницу. После этого отправляем тестовое сообщение и получаем ответ.

Тем, кто заглянул в исходный код страницы, могу объяснить, в чем заключается "скромность" этого скрипта. Возможно, вы ожидали, что на данную страницу будет внедрено большое количество кода JavaScript для управления этим Ajax-запросом, но указанная библиотека может выполнить всю его работу лишь с помощью внешнего скрипта и нескольких dash- атрибутов, примененных к форме. Итак, "скромность" этого скрипта заключается в том, что он не захламляет страницу дополнительными однострочными скриптами. Благодаря этому сокращается вероятность возникновения конфликтов с другими скриптами страницы и увеличивается вероятность изящного разрушения в случае отключения JavaScript.

Одна из проблем, с которой могут столкнуться некоторые пользователи, - ответ возвращается настолько быстро, что кажется будто ничего вообще не случилось. Отчасти это происходит потому, что действие Contact пока ничего не делает с сообщением. Поэтому, конечно, оно выполняется очень быстро. Но если после реализации оказывается, что оно все равно выполняется слишком быстро, можно отложить ответ и в течение секунды или двух показывать пользователю индикатор прогресса перед тем, как обновить страницу. Можно сделать это с помощью библиотеки Microsoft Ajax.

Например, можно отобразить значок прогресса в JavaScript функции OnBegin и спрятать ее в OnComplete. Можно даже задать LoadingElementId и LoadingElementDuration. Тем не менее иногда эти методы могут быть слишком сложными и сокращать гибкость приложения. В следующем видео мы рассмотрим другой подход к обновлению частичного представления, который дает нам больше возможностей для контроля.