Интеграция AJAX в ASP.NET MVC 4
Наверное, уже не существует веб разработчика, который не слышал о Ajax. Microsoft в такой ситуации не может оставаться в стороне, с каждым релизом старается облегчить жизнь именно нам, ASP.NET MVC разработчикам. Но прежде чем я продолжу статью, немного отступлюсь от темы.
Когда я познакомился с MVC фреймворком, он был тогда только во второй версии и, столкнувшись с такими хелперами как @Ajax. , честно говоря, их реализация на стороне клиента меня не впечатлила. Нет, так нет, подумал я про себя, у меня есть jQuery со своим $.ajax , мне его за глаза. Вот и забыл я про них на несколько лет, к своему великому сожалению проморгав этот момент с третьим релизом. Что было, то было. Благо что взялся за ум и почитал две книги по MVC 4. Далее расскажу, как можно сократить написание строк кода благодаря хелперам, упомянутым мною выше.
Начну с того, что MVC может работать с двумя вариантами Ajax библиотек (конечно я же имею ввиду с коробки, не более того) — jQuery и Microsoft Ajax. Чтобы знать, для какого адаптера создавать разметку, существует настройка в web.config UnobtrusiveJavaScriptEnabled и соответствующее значение true (для работы с jQuery) и f alse (для работы с Microsoft Ajax). Если же нам необходимо поменять значение только для одного представления, можно воспользоваться методом — @ . Хочу обратить внимание, что данная настройка влияет и на формирование валидационных данных на стороне клиента.
В зависимости от того, каков вариант вам более по душе, вам необходимо подключить соответствующий адаптер. Для Microsoft Ajax
Как я писал выше, вариант с jQuery меня вполне устраивает. Поэтому пойду по пути ненавязчивого JavaScript (т.е. web.config с/> ), и начну с самого простого.
ActionLink
Рассмотрим такую задачу. Есть ссылочка, при клике на которую мы хотим обновить содержимое контейнера. Что делал я ранее.
public ActionResult Index()
@Html.Partial("_IndexPartial") @Html.ActionLink("Поменять данные", "Index", "Home", new <>, new ) _IndexPartial частичное представление
Динамическое данные в зависимости от запроса Большинству знаком такой вспомогательный метод как Html. ActionLink(. ) , представленный выше. Казалось бы, строк кода в принципе не много, да и привык так уже программировать, так что все в порядке, но ведь я очень ленивый программист и в меру своих сил борюсь за чистоту и уменьшение кода. Поэтому мне будет приятно уменьшить представление с 22 строк до 5. И на помощь ко мне приходит Ajax.ActionLink(. ) (конечно, скептики могут сказать, что вместо $.ajax можно было использовать .load или $.get , но сути это не меняет, мы сократили представление, которое и так порой у нас начинает пухнуть)
@Html.Partial("_IndexPartial") @Ajax.ActionLink("Поменять данные", "Index", "Home", new <>, new AjaxOptions, new ) //id элемента нам уже не нужно, но для наглядности оставлю Разница между двумя расширенными методами Html.ActionLink и Ajax.ActionLink заключается только в одном параметре, объекте AjaxOptions . Давайте о нем и поговорим.
AjaxOptions
Как видно свойств, в принципе, у него не много, с другой стороны это и хорошо, когда начинают создавать серебряную пулю, будь то объект или библиотека, становится просто не вероятно громоздкой и неработоспособной.
Что из свойств за что отвечает, лучше MSDN я сказать не смогу.
Давайте пробежимся по свойствам:
Confirm — аналог javascript confirm(. )
HttpMethod — типа string , самое интересное, что же MS заставило ограничиться только 2 методами, ума не приложу почему, и видимо алгоритм таков, все что не GET , null или пустая строка после .Trim() — все POST
InsertionMode — перечисление со значениями » InsertAfter » (вставить в конец контейнера), » InsertBefore » (вставить в начало контейнера) или » Replace » (заменить содержимое контейнера)
Loading. — изначальный скрытый элемент
- OnBegin — beforeSend
- OnComplete — complete
- OnFailure — error
- OnSuccess — success
Ajax вспомогательные методы
Под конец хотелось бы привести табличку методов, которые нам время от времени облегчат нашу жизнь
| Ajax.ActionLink | Создает гиперссылку на действие контроллера, которая при нажатии отправляет запрос Ajax. |
| Ajax.RouteLink | Похож на Ajax.ActionLink , но создает ссылку на определенный роут, а не действие контроллера |
| Ajax.BeginForm | Создает элемент формы, который будет отправлять введенные данные к определенному действию контроллера |
| Ajax.BeginRouteForm | Похож на Ajax.BeginForm , но отправляет запрос по определенному роуту, а не к действию контроллера |
| Ajax.GlobalizationScript | Создает ссылку на скрипт глобализации, в котором содержится информация о языке и региональных параметрах |
| Ajax.JavaScriptStringEncode | Кодирует строку для безопасного использования в JavaScript |
Обеспечение постепенного ухудшения
Рассмотрим такую ситуацию. Ajax запрос возвращает JSON/XML/Частичное представление — и все хорошо, но такой подход совсем не приемлем, если пользователь отключил JavaScript, либо браузер вообще не поддерживает его. В таких случаях необходимо полностью вернуть страницу пользователю. Одним из решений является вариант использования «разводки» в одном методе действия с определением того, является ли этот запрос запросом Ajax. Это можно сделать, используя Request.IsAjaxRequest() , как было рассмотрено выше.
Вторым вариантом решения проблемы является создание двух разных методов действия: одного — для Ajax запроса, а второго — для обычного. Давайте рассмотрим этот вариант подробнее, на упрощенной задаче сохранения полученного от пользователя комментария.
Создаем два метода действия
[HttpPost] public ActionResult AddComment(string comment) < //необходимые действия return View(); >[HttpPost] public ActionResult AddCommentAjax(string comment) < //необходимые действия return Json(new ); > Ваш комментарий добавлен успешно!
и наше представление с формой
function OnSuccessComment(data) @using (Ajax.BeginForm("AddComment", new AjaxOptions < Url = Url.Action("AddCommentAjax"), OnSuccess = "OnSuccessComment", HttpMethod = "POST" >)) < @Html.TextArea("comment") > Как это работает
Для браузера рендерится следующая форма
Мы видим, что отличие от @using (Html.BeginForm(«AddComment», «Home»)) заключается только в дополнительных data- атрибутах. Иными словами, для отключенного Javascript форма будет отравляться на public ActionResult AddComment(string comment) . Когда же JavaScript включен, адаптер считывает данные с data- атрибутов, перехватывает отправку формы и делает запрос на public ActionResult AddCommentAjax(string comment) . Успешный результат мы получаем в виде переданного JSON и обрабатываем в указанной js функции OnSuccessComment .
Резюме
Целью моей статьи было лишь показать, что некоторые вещи можно немного ускорить и не изобретать велосипед (сужу лишь по себе).
JavaScript и AJAX
Современные веб-приложения практически невозможно представить без языка клиентской части — JavaScript. Даже при использовании таких серверных языков и технологий, как PHP, ASP.NET, трудно обойтись без JavaScript. Однако чистый JavaScript в реальности используется все меньше. Ему на смену приходят специальные библиотеки, в частности, jQuery. Применительно к ASP.NET MVC при создании веб-приложений библиотеки jQuery играют очень большую роль.
Подключение файлов JavaScript/jQuery
По умолчанию проект ASP.NET MVC 5 уже содержит необходимый базовый набор скриптов, в том числе библиотеки jQuery:
Большинство скриптов по умолчанию имеют свои двойники с суффиксом min , например, jquery-1.10.2.js и jquery-1.10.2.min.js . Оба скрипта представляют одну и ту же функциональность. Но вторая версия представляет минимизированную версию (поэтому и идет с суффиксом min ). Подобные минимизированные скрипты гораздо меньше по объему (в среднем на 60%), поэтому в реальным приложениях предпочтительнее использовать именно минимизированные скрипты, так как пользователь тратит меньше времени и трафика на их загрузку. В то же время их не очень удобно читать. Поэтому для большего удобства разработчиков полные и минимизированные скрипты базовых библиотек идут вместе.
Вкратце посмотрим, зачем нужны большинство скриптов, идущих по умолчанию в проекте MVC 5 с типом аутентификации Individual User Accounts:
- jquery-1.10.2.js — базовая библиотека jQuery, на которую опираются большинство других скриптов. В данном случае используется версия 1.10.2. Однако библиотека постоянно обновляется, поэтому можно использовать более новые версии, которые можно добавить вручную или через NuGet.
- modernizr-2.6.2.js — библиотека, позволяющая определить, поддерживает ли браузер те или иные возможности HTML5 и CSS3
- bootstrap.js — библиотека, позволяющая создавать адаптивные веб-приложения с использованием css-фреймворка bootstrap
- respond.js — позволяет использовать правила media queries CSS3 в старых браузерах, которые напрямую не поддерживают данную возможность
- jquery.validate.js — представляет функционал для валидации на стороне клиента
- jquery.validate.unobtrusive.js — предоставляет поддержку ненавязчивой валидации модели
- jquery-1.10.2.intellisense.js и jquery.validate-vsdoc.js — используются для поддержки документации и IntelliSense по соответствующим библиотекам в Visual Studio
В некоторых типах проектов ряд распространенных скриптов может отсутствовать, например, если делать проект MVC 5 с типом аутентификации No Athentication, то в нем будет отсутствовать скрипты валидации. В этом случае мы можем найти недостающий скрипт в NuGet и добавить его в проект:
Чтобы подключить файл javascript используется метод Render класса System.Web.Optimization.Scripts :
Этот метод принимает в качестве параметра строку — полный путь к скрипту.
Также для подключения скриптов мы можем использовать хелпер Url.Content :
Если файлы javascript будут использоваться большинством представлений приложения, то удобнее всего добавить их сразу на мастер-страницу.
@Styles.Render("~/Content/css") @Scripts.Render("~/scripts/jquery-1.10.2.min.js") @Scripts.Render("~/scripts/validate.min.js") @RenderBody() @RenderSection("scripts", required: false) Если же скрипты используются не на всех, а на отдельных предствлениях, то удобно определить в мастер-странице специальную секцию для скрипов, как в примере выше. А затем в представлении подключать скрипты в этой секции:
Asp net javascript ajax
Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core
AJAX (Асинхронный JavaScript и XML) представляет собой технологию гибкого взаимодействия между клиентом и сервером. Благодаря ее использованию мы можем осуществлять асинхронные запросы к серверу без перезагрузки всей страницы. Правда, в настоящее время все больше вместо формата XML используется формат JSON для взаимодействия между клиентом и сервером.
Применительно к ASP.NET MVC использование AJAX вылилось в целую концепцию под названием «ненавязчивого AJAX» и ненавязчивого JavaScript ( unobtrusive Ajax/JavaScript ). Смысл этой концепции заключается в том, что весь необходимый код JavaScript используется не на самой веб-странице, а помещается в отдельные файлы с расширением *.js . А затем с помощью тега мы в веб-станице ссылаемся на данный файл кода.
Таким образом мы отделяем визуализацию от логики приложения. Что имеет свои плюсы. Так, выделение скрипта в отдельный загружаемый файл увеличивает производительность сайта, поскольку файл сохраняется в кэше и затем от туда подгружается.
Настройка ненавязчивого JavaScript/ AJAX
Во-первых, соответствующие настройки должны быть указаны в файле Web.config:
Во-вторых, нам надо подключить соответствующие файлы JavaScript:
@Scripts.Render("~/scripts/jquery-1.10.2.js") @Scripts.Render("~/scripts/jquery.unobtrusive-ajax.js") Если у нас в проекте отсуствует библиотека jquery.unobtrusive-ajax.js, то мы ее опять же можем добавить через NuGet:
Первый файл — общая библиотека jQuery. Второй файл ( jquery.unobtrusive-ajax.js ) подключает к приложению функциональность Ajax-хелперов, например, Ajax-форм. Главное не забыть, подключить основную библиотеку jQuery перед остальными файлами, так как все остальные скрипты, как правило, зависят от нее.
AJAX-хелперы
Для осуществления ajax-запросов в ASP.NET MVC присутствует такая функциональность, как ajax-хелперы:
Наиболее часто используются Ajax.ActionLink и Ajax.BeginForm , поэтому далее мы рассмотрим эти хелперы.