Ajax.ActionLink vs IML

Все примеры можно скачать  или загрузить через github
 
disclamerстатья ориентирована на разработчиков, которые знакомы с AJAX ASP.NET MVC, но столкнулись с тем, что возможностей этого расширения не хватает для покрытия сложных клиентских сценариев только C#-кодом и поэтому рассматривают альтернативные решения.

Предыстория

Собравшись в офисе на прошлых выходных, мы обсуждали новые задачи для версии 2.0 и заговорили о том, как решают проблемы связанные с JavaScript кодом. В процессе беседы мы выяснили, что многие команды используют вспомогательные методы Ajax.BeginFormAjax.ActionLink из библиотеки ASP.NET MVC. Я открыл stackoverflow и по запросу “Ajax.Action” увидел очень много вопросов связанных с расширением этих методов. То есть существуют ситуации, когда готового функционала не хватает и приходится обходить проблемы путем написания JavaScript кода или же переделывать все на  jquery.

Идея этого поста состоит в том, чтобы показать, что хотя у AJAX ASP.NET MVC и IML есть общая черта – они позволяют разрабатывать клиентский код на языке C#, но IML имеет преимущество. Дело в том, что AJAX ASP.NET MVC покрывает только самые общие задачи и при усложнении требует написания JavaScript кода. Чтобы не быть голословным, приведу примеры ситуаций, при которых метода Ajax.ActionLink будет недостаточно для решения поставленной задачи:

  • Обработка события mouse over или другого отличного от click.
  • Динамическое построение адрес из введенных пользователем значений (input , select, textarea).
  • Тонкая настройка AJAX-запроса (async , timeout, cache).
  • Необходимость вставки значения через Val, Text (невозможно с InsertionMode).

Эти связанные с Ajax.ActionLink проблемы можно решить, используя OnBegin и OnSuccess, передав имя JavaScript функции. Однако, тогда придется использовать JS, что сводит на нет идею написания клиентской части только на C#-коде. Именно поэтому я решил показать, как все-таки можно разрабатывать “богатые” клиентские приложения не используя JS.

Кто что может ?

Сначала давайте оценим возможности каждого инструмента. Для этого сравним поддерживаемые опции в AJAX ASP.NET MVC и аналоги на IML.

  • Confirm – используется для реализации диалога подтверждения. 
  • Confirm IML –  используется Break с большим количеством условий.

Комментарий к опции Confirm: так как в реальных задачах зачастую требуется проверка значений элементов, выполнение запроса на сервер и прочие ограничения, я считаю, что данная опция в AJAX ASP.NET MVC покрывает меньшую часть сценариев. К тому же confirm чаще всего приходится делать, как отдельный диалог, который поддерживает стилизацию.

  • HttpMethod – задается тип запроса (Get,Post,Del,Put).
  • HttpMethod IML – можно использовать AjaxPost,AjaxGet или универсальный Ajax(r=>r.Type = HttpVerb.Post).
  • InsertionMode – вариант вставки данных из запроса (Replace, InsertBefore, InsertAfter).
  • InsertionMode IML – поддерживает все варианты jquery, а так же Val.
  • Event handlers – OnBegin, OnComplete, OnFailure, OnSuccess.
  • Event handlers IML – OnBegin, OnComplete, OnError (аналогичен OnFailure), OnBreak (используется для обработки прерываний).

Комментарий к опции Event handlers: существенное отличие обработчиков событий IML от AJAX ASP.NET MVC в том, что для построения тела обработчика используется C#-код.

  • UpdateTargetId – id dom элемента в который будет вставлены данные.
  • UpdateTargetId IML – можно использовать любые jquery selector.
  • Url – адрес action.
  • Url IML – строится в момент выполнения, что позволяет использовать значения dom элементов и других селекторов.

Сценарий

Я придерживаюсь правила, что проверка любого инструмента, может быть полной только после испытания его в деле. Для этого мы рассмотрим следующий сценарий: таблица в которой есть колонка, содержащая кнопку для удаления текущей записи. После нажатия на эту кнопку, нужно сделать ajax post на сервер, который удалит запись, а потом обновить таблицу с учетом изменений. Рассмотрим решения на AJAX ASP.NET MVC и IML.

примечание: скачать исходный код можно из github

Ajax Asp.net mvc

View



Partial View



 

Controller code

Комментарий: один из минусов данного решения – приходится получать данные для построения таблицы из action delete, что не позволяет разделить ответственность между задачами – action delete должен выполнять одну атомарную задачу, однако в коде помимо удаления еще и возвращаются данные (нарушение принципа REST API).

IML

View



Controller code



Комментарий: IML позволяет разделить логику удаления и обновления данных.

Как видите, в этом примере не использовался JavaScript ни при решении задачи инструментами AJAX ASP.NET MVC, ни при применении IML. Однако, если усложнить задачу, при использовании AJAX ASP.NET MVC не удастся обойтись без написания JavaScript-кода. Чтобы наглядно это продемонстрировать, расширим задачу:

  1. После удачного удаления записи удалить целевую строку.
  2. Добавить checkbox, который нужно проверять перед удалением записи и, если он не отмечен, блокировать удаление и показывать alert с предупреждением.

Extend IML

примечание: я привожу только код, который изменился

View



Давайте рассмотрим подробней, что же изменилось:

  1. Строка 7 – input checkbox, которому задаем уникальный Id.
  2. Строка 19 – OnBreak, где показываем Alert ( или иные действия ).
  3. Строка 20 – OnBegin, где проверяем checkbox на false и если он не отмечен, то прерываем (Break) выполнение.
    примечание: Break можно вызывать в любом обработчики, кроме OnBreak.
  4. Строка 21 – OnSuccess, изначально мы посылали trigger на контейнер, но теперь находим текущий tr и удаляем его из Dom, что позволяет избежать лишнего запроса на сервер.

Для решения задачи средствами AJAX ASP.NET MVC пришлось бы использовать JavaScript на клиентской части, в то время как IML позволяет реализовать его на типизированном языке C#.

 

А кто же лучше ?

Итак, различие между AJAX ASP.NET MVC и IML (и, собственно, преимущество IML) состоит в следующем: хотя AJAX ASP.NET MVC и позволяет использовать Ajax-запросы через написанный C#-код, но все же он не способен покрыть нетривиальные клиентские сценарии только кодом на C# и требует написания дополнительного JavaScript-кода на клиентской стороне, а IML предлагает гибкий инструментарий для решения таких задач только на C#.

P.S. Я надеюсь моя статья подтолкнет к изучениию IML и поможет тем, кто зная AJAX ASP.NET MVC, решит изучать IML.

P.P.S. Если у вас появятся вопросы по применении IML, то вы можете оставить их в комментариях к статье или же по нашим координатам.

 

 

 

 

 

Vlad Kopachinsky

I am a Senior developer at Incoding Software in Russian Federation. I created the Incoding Framework for rapid development

More Posts - Website - Twitter - Facebook - LinkedIn

Leave a Reply