Использование AJAX в ASP.NET MVC

В предыдущих статьях, посвящённых AJAX мы рассматривали стандартные способы реализации данной технологии. Они одинаково подходят не только для PHP или Python, но и для большинства других серверных языков.

Однако у Microsoft, как это часто бывает, свой собственный подход, отличающийся от общепринятого.

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

Если ASP.NET MVC для вас не первая веб технология, забудьте всё, что изучали ранее!

Дело в том, что стандартные методы подходы к реализации AJAX, которые прекрасно работают с тем же PHP, в ASP.NET MVC практически полностью теряют работоспособность.

У Microsoft свой подход!

Подготовка проекта

Для начала необходимо установить специальный плагин для jQuery, который обеспечивает нужный функционал. Это можно без труда сделать с помощью NuGet.

После этого в заголовке страницы или шаблона нужно подключить необходимые библиотеки.

@Scripts.Render("~/Scripts/jquery-1.10.2.js")
@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")

При этом необходимо строго соблюдать последовательность подключения. Вначале подключаем jQuery и только затем плагин (как это показано в примере выше), а не наоборот.

После завершения подготовительных операций можно приступить непосредственно к реализации AJAX.

Реализация серверной части

Для работы с AJAX необязательно создавать отдельный контроллер, можно добавить обработку AJAX запросов к любому из уже имеющихся контроллеров.

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

public class TestController : Controller
{
. . .
    public ActionResult AjaxTest()
    {
        ViewData["data"] = Request["data"];
        if (Request.IsAjaxRequest())
            return PartialView("_AjaxTestPartial");
        return View();
    }
. . .
}

В этом действии мы получаем данные поступившие в запросе и, если это запрос AJAX возвращаем специальное частичное представление, которое в данном случае имеет имя _AjaxTestPartial.

Это представление и есть те данные, которые будут возвращаться в результате запроса.

В представлении, в качестве примера просто выводим некоторый текст и данные переданные из контроллера.

<div>
    <strong>Test</strong>
    <p>Data: @ViewData["data"]</p>
</div>

Реализация клиентской части в виде формы

Для создания форм AJAX служит метод BeginForm хелпера Ajax.

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

<div class="col-md-5">
    @using (Ajax.BeginForm("AjaxTest", "Test", new AjaxOptions { UpdateTargetId = "container" }))
    {
        <input type="text" id="inp" name="data" />
        <input type="submit" value="Тест" />
    }
    <p id="container"></p>
</div>

Назначение параметров:

  1. Действие контроллера, которое обрабатывает AJAX запрос;
  2. Имя контроллера, к которому направлен AJAX запрос;
  3. Параметры AJAX запроса. В данном случае id HTML тега, который необходимо обновить при получении данных с сервера.

Важно отметить, что метод BeginForm сам по себе создаёт только «каркас» формы в виде тега form с соответствующими атрибутами. Поэтому наполнение формы элементами управления и обеспечение соответствия их атрибута name параметрам запроса задача разработчика. Обратите внимание, что в приведённом примере внутри фигурных скобок находятся два тега input. Именно так осуществляется наполнение формы функциональными элементами.

Вот как результат работы метода BeginForm выглядит в HTML коде в браузере.

<form action="/Test/AjaxTest" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#container" id="form0" method="post">
    <input type="text" id="inp" name="data" />
    <input type="submit" value="Тест" />
</form>

В данном примере при нажатии кнопки (submit)на сервер через AJAX будет отправлено содержимое текстового поля, а в теге p с id = «container» отображён ответ.

Ответ представляет собой ранее созданное частичное представление. Так как в данном примере серверная часть, по сути, просто возвращает клиенту полученные данные, после слова «Data» будет отображено переданное на сервер содержимое текстового поля.

Важно

Если на странице имеется несколько тегов с id, который указан в параметре UpdateTargetId, то при выполнении запроса будет обновлено содержимое только самого первого из них (ближайшего к началу HTML разметки).

Реализация клиентской части в виде ссылки

Реализация клиентской части в виде ссылки осуществляется при помощи метода ActionLink. Он отличается от метода BeginForm только тем, что вместо каркаса формы генерирует уже готовую ссылку и имеет два дополнительных параметра.

Данный метод также имеет ряд перегрузок. Ниже приведён пример использования наиболее часто используемой из них.

<div class="col-md-5">
    @Ajax.ActionLink("Тест", "AjaxTest", "Test", new { data = "Тестовая ссылка" }, new AjaxOptions { UpdateTargetId = "container" })
    <p id="container"></p>
</div>

Назначение параметров:

  1. Текст ссылки;
  2. Действие контроллера, которое обрабатывает AJAX запрос;
  3. Имя контроллера, к которому направлен AJAX запрос;
  4. Передаваемые данные
  5. Параметры AJAX запроса. В данном случае id HTML тега, который необходимо обновить при получении данных с сервера.

Так приведённая выше AJAX ссылка будет отображаться в HTML коде.

<a data-ajax="true" data-ajax-mode="replace" data-ajax-update="#container" href="/Test/AjaxTest?data=%D0%A2%D0%B5%D1%81%D1%82%D0%BE%D0%B2%D0%B0%D1%8F%20%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B0">Тест</a>

Соответственно, результат работы ссылки:

Другие способы реализации AJAX в ASP.NET MVC

Помимо вышеприведённых хелпер Ajax содержит и другие методы. А, именно:

  • RouteLink — аналог ActionLink, но ссылка создаётся не на действие контроллера, а на определённый маршрут;
  • BeginRouteForm – аналог BeginForm, но создаёт форму, которая направляет запросы не к действию контроллера, а по определённому маршруту;
  • GlobalizationScript – создаёт ссылку на скрипт с информацией о культуре;
  • JavaScriptStringEncode – кодирует строковые данные для использования в JavaScript;

Но, на практике эти методы используются крайне редко и потому рассматривать их нет смысла.

Параметры AJAX запроса (AjaxOptions)

В ASP.NET MVC можно настроить процесс выполнения AJAX запроса при помощи параметров AjaxOptions.

Один из них UpdateTargetId уже был использован в приведённых примерах. Помимо него также существуют и другие параметры. Вот их полный список:

  • Confirm – настройка диалога подтверждения отправки запроса.
    По сути, это обычный диалог подтверждения отображаемы JavaScript функцией Confirm. В качестве текста диалога используется значение параметра. Если параметр не задан (по умолчанию, запрос отправляется без подтверждения;
  • HttpMethod – задаёт метод отправки запроса (GET или POST). Для ссылки по умолчанию GET. Для формы – POST;
  • InsertionMode – задаёт режим отображения результатов запроса на странице. Может принимать одно из трёх значений перечисления InsertionMode:
    • Replace – замена уже имеющегося содержимого результатами запроса (по умолчанию);
    • InsertAfter – результаты запроса добавляются после уже имеющегося содержимого;
    • InsertBefore – результаты запроса добавляются перед уже имеющимся содержимым.
  • LoadingElementId – задаёт элемент страницы (по id), который будет отображаться во время выполнения запроса. Обычно, какая-либо анимация;
  • LoadingElementDuration – задаёт интервал времени (в миллисекундах) через который будет показан элемент, заданный в LoadingElementId.
  • OnBegin – задаёт имя функции (JavaScript) обратного вызова перед отправкой запроса. Соответствует beforeSend в jQuery;
  • OnComplete – задаёт имя функции (JavaScript) обратного вызова после выполнения запроса (успешного и неудачного). Соответствует complete в jQuery
  • OnFailure – задаёт имя функции (JavaScript) обратного вызова при неудачном выполнении запроса. Соответствует error в jQuery
  • OnSuccess – задаёт имя функции (JavaScript) обратного вызова при успешном выполнении запроса. Соответствует success в jQuery;
  • UpdateTargetId – задаёт id HTML тега, который необходимо обновить при получении данных с сервера;
  • Url – задаёт адрес Url сервера, на который отправляется запрос. Если это свойство задано, можно не указывать имя контроллера и название его действия.

Данные параметры позволяют производить весьма гибкую настройку.

Например, используя OnSuccess вместо UpdateTargetId можно добиться от метода BeginForm поведения аналогичного функции jQuery post. Что позволяет при необходимости выполнить дополнительную обработку данных перед их отображением на странице.

Заключение

На самом деле использование реализованного в ASP.NET MVC механизма работы с AJAX не представляет особой сложности.

Если необходимо просто вывести готовые данные поступившие с сервера без перезагрузки страницы, всё осуществляется предельно просто без каких-либо дополнительных действий. Достаточно лишь указать куда их следует выводить.

Если же полученные данные требуется предварительно обработать, то здесь также нет ничего необычного. Данные можно передать в обычную функцию обратного вызова на JavaScript и выполнить необходимые операции.

Единственная сложность, с которой может столкнуться новичок, это особенности, обусловленные самой платформой (тот же хелпер Ajax, частичные представления и т.д.). Но, потратив немного времени на освоение, можно её преодолеть.

Комментарии
  1. прекрасная статья. Но просто отправлять текст на сервер и получить ответ от сервера — это просто. Приведите какой-нибудь, пример, когда отправляется на сервер набор данных., Заранее спасибо!!!

  2. Но просто отправлять текст на сервер и получить ответ от сервера — это просто. Я Вас разочарую. При обмене данными в рабочем приложении всё то же самое. HTTP — это текстовый протокол и все (без исключения) данные в его рамках передаются в текстовом формате. Другое дело, что в зависимости от характера этих данных, будет соответствующим образом изменяться структура этого текста. Чтобы не быть голословным, приведу пример одного из возможных вариантов представления набора данных (по сути, это JSON массив): [ { «id» = 1, «type» = «Птица», «value» = «Соловей»}, { «id» = 2, «type» = «Рыба», «value» = «Сом»}, { «id» = 3, «type» = «Животное», «value» = «Заяц»} ] В подобном виде данные могут как отправляться на сервер, так и поступать с него в виде ответа. Как такое сформировать и проанализировать — вопрос уже бизнес-логики, которая не имеет прямого отношения к AJAX.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *