Do,Action,Insert

disclaimer: речь пойдет о самой мощной связке в IML,  когда выполняется action ( direct, ajax, submit ) и полученные данные вставляются ( с template или без ) в DOM элемент. Данный способ уже фигурировал в разных примерах к другим статьям, но сегодня я проведу развернутый обзор всех возможностей такой связки в рамках Incoding Framework. 

примечание: примеры кода из статьи доступны на GitHub

Do

Первым звеном нашей связки выступает Do, который может показаться “шумом”, но после понимания аспектов его работы, которые влияют на обработку события браузером, станет понятно

  • Do ( sandbox ) – не оказывает влияние на поведение
  • DoWithPreventDefault ( sandbox ) – отменяет событие, аннулировав его, но не останавливает дальнейшее распространение (propagation) события.

примечание: применяется для события Submit формы, что предотвратить отправку без ajax, а также для Anchor в целях блокировки перехода по Href

  • DoWithStopPropagation – останавливает дальнейшее распространение (propagation) события, но не отменяет событие.

примечание: применяется для события Submit, если обработчик привязан к input (type submit)

  • DoWithPreventDefaultAndStopPropagation – отменяет событие, аннулировав его  и  останавливает дальнейшее распространение (propagation) события.

Action

Основной элемент в работе нашей связки является Action, который позволяет различными способами получать данные, но всех их объединяет формат в котором содержатся объекты.

Incoding Result

Это наследник от JsonResult, где по умолчанию включен JsonRequestBehavior.AllowGet и подготовлены фабричные конструкторы для создания нужного типа результата.

  • Success – json объект { data:setData, success:true, redirectTo:string.Empty }

примечание: someData может быть null, тогда результат просто сигнализирует об удачном завершении action

  •  Error  – json объект  { data:setData, success:false, redirectTo:string.Empty }

примечание: error также как и success поддерживает передачу данных

  •  RedirectTo – json объект  { data:null, success:true, redirectTo:someUrl }

примечание: если после выполнения любого ( Ajax, Submit or etc ) action в качестве результата вернуть redirectTo, то на клиенте сработает window.location = url

Каждый тип результат запускает определенные обратные (On callback ) вызовы, ниже приведена сравнительная таблица

[table caption=”Compare incoding result”]
Result,On Success,On Complete,On Error,On Begin,On Break
IncodingResult.Success,Yes,Yes,No,Before Action,No
IncodingResult.Error,No,Yes,Yes,Before Action,No
IncodingResult.RedirectTo,No,No,No,Before Action,No
[/table]

Интеграция с Controller

Фабричные методы IncodingResult являются “низко-уровненным”  способом, поэтому лучше использовать методы из базового класса IncControllerBase

  • IncJson – альтернатива IncodingResult.Success

  • IncView – выполняет render View в строку и возвращает через IncodingResult.Success

 примечание: IncView работает по алгоритму

  • IncPartialView – аналог IncView, но с возможностью указать путь к View

  • IncRedirect –  альтернатива IncodingResult.RedirectTo

  •  IncRedirectToAction – redirect на конкретный Action в Controller

Как получить данные ?

  • Direct ( sandbox ) – “прямой”, чаще используется в качестве пустого action, но поддерживает возможность передать данные.

 примечание: можно использовать Error, Redirect в качестве данных.

Сценарии

Данные как Model

 примечание: сценарий применяется если template клиентский, но данные получаются без Ajax

Вставка статичного контента

 примечание: сценарий применяется если надо вставлять данные, которые не изменяются ( вставка пустых строк в таблицу, добавление элементов формы и т.д. )

  • Ajax ( sandbox ) – запрос на сервер

 примечание: AjaxGet, AjaxPost является “именованной” версий Ajax

  • Submit On ( sandbox ) – отправляет указную form через ajax ( требует подключения jquery form )

 примечание: пример показывает сценарий, когда Submit выполняется от имени кнопки, поэтому в качестве обработки события выбираем Stop Propagation для того, чтобы остановить продвижение события “Click” выше ( до form )

  • Submit  – аналогичен SubmitOn, но не имеет возможности указать form, а всегда отправляет ближайшую (closest ) form по иерархи dom элементов  или self  если это form

 примечание: пример показывает сценарий, когда form перехватывает событие “Submit” и далее выполняет Submit action, поэтому в качестве обработки события выбираем Prevent Default, чтобы аннулировать отправку form стандартными средствами браузера. 

  • Events ( sandbox ) – получение данных из события, реализация состоит из двух элементов:
    • Источник – “прокидывает” данные через trigger

 примечание: в качестве Action можно использовать любой

    • Приемник – элемент на который направлен invoke

примечание: работа с данными строится так же, как и в остальных Action

Сам по себе Events не имеет смысла, но в совокупности с Where позволяет строить сложные сценарии, например окна чата.

Sample

Условие: На странице может быть открыто N-ое количество окон чата связанного с выбранным контактом, где показывают сообщения.

Решение 1: Каждое окно будет на основе своего Id ( или иного критерия ) запрашивать сообщения на сервере по ajax

Проблема: из-за увеличения количества окон будет  много запросов на сервер, что приведет к:

  • переполнит максимальный лимит запросов браузера и тогда появится задержка между запросами
  • нагрузит asp.net pool

Решение 2: проблема предыдущего решения была в большом количестве источников данных, поэтому не много модернизировав код и добавив ещё один элемент, можно обойтись всего одним запросом для любого количества окон

 примечание: теперь запрос один, но далее мы “прокидываем” всем элементам с классом “window”  данные, а окна знают по какому Id фильтровать.

Структурное изображение решения

  • Ajax Hash –  это аналог Submit, но не для form, а для Hash.

Пример без Ajax Hash

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

Пример с Ajax Hash

 примечание: теперь пример работает аналогично ( сериализация hash ) Submit form, но собирает параметры из hash 

 Ajax Vs Submit Or Ajax Vs Hash

Все action за исключением Direct и Evetns работают с ajax, поэтому может  возникнуть вопрос в каких случаях какой использовать:

  • если заполняется N-ое количество input, то помещаем в form и далее action Submit
  • если параметры поиска хранятся в hash, то используем action AjaxHash
  • все остальные случаи можно реализовать с помощью action Ajax

Примеры сценариев для action ajax

Смена статуса

 Загрузка drop down

и многие другие  задачи ( контент для диалога, удаление записи )

  Insert

Это один из множества исполнителей ( executables ) доступных в рамках On callback, поэтому это не обязательный элемент цепочки, но большинство сценариев нацеленно именно на вставку полученных данных в dom элементы. Insert неоднократно фигурировал в примерах из других статей, но теперь подробно рассмотрим работу этого исполнителя

Данные

  • Content –  controller возвращает IncView или IncPartialView

Пример

Код Controller

примечание: IncView будет искать Contact.cshtml в папке View/$Controller$ 

 Код View

Альтернативный вариант на MVD без Controller

 примечание: реализация на mvd не требуют написания controller

 

  • Object –  controller возвращает IncJson

Пример

Код Controller

Код View

примечание:  urlTemplate должен возвращать IncView

Альтернативный вариант на MVD без Controller

 Методы

 примечание: все методы имеют аналоги в jquery

Комплексная модель

Все примеры были построенные на одной модели, но часто бывают сценарии, когда полученные данные являются “контейнером”, для этих целей в Insert есть возможность указывать с какой частью модели мы работаем через For.

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

Примеры сценариев

Обновление полей формы

Условие:  по Id записи получить её модель и обновить поля формы

Решение 1:  после загрузки обновить всю форму, построив её заново, но иногда такое усложнит задачу, если на форме есть дополнительные элементы.

Решение 2: после загрузи обновить только  нужные поля

 примечание: можно воспользоваться reflection и динамически строить Insert.For

Один запрос, много моделей

Условие:  обновить N-ое количество элементов разными данными

Решение 1:  каждый элемент делает запрос своих данных, но это приводит к увеличению нагрузки на сервер и замедляет загрузку страницы из-за большого количества одновременных запросов.

примечание: частично можно решить проблему, установим Ajax Asyc в false, но тогда страница визуально будет грузится кусками, что тоже не допустимо

Решение 2: один элемент загрузит все данные, которые потом через For “точечно” обновить.

 примечание:  для каждого For можно использовать  свой template

Insert For Vs Trigger For

Исполнитель ( executable ) Trigger имеет похожий метод For, но он работает в связке с action events  и позволяет только делегировать данные другим элементам не выполнять действия, рассмотрим на примере:

Insert For ( sandbox )

 Trigger For ( sandbox )
  • Источник

  •  Приемник

примечание: реализация с Events требует дополнительный элемент

Решение с Trigger выглядит сложнее, поэтому если надо просто вставить разные части одной модели, то лучше использовать Insert For, но возможность Where для Events позволяет реализовывать сценарии, которые нельзя решить с помощью Insert

Заключение

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

Я выделил самые основные:

  • Do, Action, Insert
  • When, Trigger
  • Submit Form
  • Search hash

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

P.S. Если у кого есть сценарии, которые хотелось бы посмотреть, как можно решить в рамках Incoding Framework, то оставляйте в комментариях и я обязательно сделаю про них обзор

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