IML TODO

Получил тумаков

Критика – это слово крайне мягкое по отношению к дискуссии, которая возникла к моей предыдущей статье, потому что это было больше похоже на избиение в котором были крайне не приятные комментарии ( на фото топ бредовых ), но также и объективные:

• Код на AngularJs не фонтан — сложно опровергнуть, хотя все они были с официального сайта и популярного руководства
• Слабые примеры – упор был на задачи, а не на сценарии, но соглашусь что более комплексное решение более полно раскрывает потенциал ( я предложил некоторые наши проекты, которые открыты на open source, но они остались без внимания )
• Не знаешь AngularJs ? – по понятным причинам это очень сильно задело разработчиков AngularJs
• Топик JS – это серьезная ошибка, потому что не используя asp.net mvc, сложно понять прелести типизированных TextBoxFor и других расширений.

Почему ToDo ?

В комментариях предложили попробовать реализовать “Todo MVC” в качестве доказательства возможностей IML и сейчас мы посмотрим что из этого получилось. Во первых demo версия, которая имеет одно отличите от тех, что представлены для js framework, в том, что в качестве хранилища используется не local storage, а база данных, а также исходный код, который мы будем разбирать далее в посте. В процессе реализации я строил всю логику ( расчеты подвала, скрытие элементов и т.д. ) на клиенте, хотя на реальных задачах, проще ( иногда необходимо ) обновлять “точечно” элементы, которые имея IML код, знают, как себя вычислить и отобразить.

Code review

Стиль повествования в этот раз будет не сравнение одного решения с другим (иначе объем материала будет большим ), а обзор кода, который получится при реализации приложения todo. Я упоминал выше о том, что в реализации IML присутствует и серверная часть, но в целях уравнивания решаемых задач для более объективного сравнения, сфокусируемся только на клиентской части.

Из чего состоит

Код был разделен на 3 View

• Index — основная страница ( и по факту единственная для браузера )
• Todo_List_Tmpl – шаблон для построения центрального списка
• Todo_Footer_Tmpl – шаблон для построения подвала с показателями

Index ( состоит из трех элементов )

Форма для добавления TODO

@using (Html.When(JqueryBind.Submit)             .DoWithPreventDefault()             .Submit(options =>                    {        options.Url = Url.Dispatcher()                      .Push(new AddTodoCommand {  ClientId = Selector.Incoding.Cookie(CookieManager.ClientId) });                    })             .OnSuccess(dsl =>                            {                                dsl.WithId(containerId).Core().Trigger.Incoding();                                dsl.Self().Core().Form.Reset();                            })             .AsHtmlAttributes()             .ToBeginTag(Html, HtmlTag.Form)) {     @Html.TextBoxFor(r => r.Title, new { placeholder = "What needs to be done?", autofocus = "" }) } 

примечание: сразу ожидаю фразы в стиле “Да, ну это не серьезно, кода в разы больше, надо везде копировать, посмотри как люди делают !!!” — на что у меня есть аргумент в лице C# extensions, который позволяет оборачивать конструкции IML. Далее в статье будет приведены альтернативные варианты решения задач ( также repository на GibHub с переработанным кодом ) с применением C# extensions

Что к чему ?

• When(JqueryBind.Submit) — указываем целевое событие
• DoWithPreventDefault — поведение события ( отменяем обработчик браузера )
• Submit — отправляем форму через ajax
  примечание: пару замечаний по представленной реализации:
  
  • Url куда отправляется форма задается в опциях ( а не через атрибут action у form )
  • ClientId можно вынести форму, как Hidden, который по InitIncoding проставит значение из Cookies, что бы вызывать Submit без параметров

• OnSuccess — выполняем после удачного завершения submit
  
  • Trigger Incoding to containerId – запускаем весь IML код для элемента Container ( описание ниже )
    примечание: можно применять более одного When, что позволяет подвязаться на разные события ( с разным IML кодом ), поэтому trigger Incoding запускает все цепочки.
  • Form reset – сбрасываем значение элементов формы

• AsHtmlAttributes — собираем IML код в удобный для asp.net mvc формат ( RouteValueDictionary )
• ToBeginTag — упаковываем полученные атрибуты в тэг form ( принцип работы как Html.BeginForm )
  примечание: можно использовать Html.BeginForm(“action”,”controller”,Post,iml.AsHtmlAttributes())

Форма для добавления TODO ( альтернативный вариант )

@using (Html.Todo().BeginForm(setting =>                              {                     setting.TargetId = containerId;                     setting.Routes = new { ClientId = Selector.Incoding.Cookie(CookieManager.ClientId) };                              })) {     @Html.TextBoxFor(r => r.Title, new { placeholder = "What needs to be done?", autofocus = "" }) } 

примечание: кода стало меньше и что самое главное, теперь можно расширять ( валидация, redirect после submit и т.д. ) метод, под нужды конкретного проекта.

public class BeginFormSetting {     public string TargetId { get; set; }       public object Routes { get; set; } }   public BeginTag BeginForm(Action configure) {     var setting = new BeginFormSetting();     configure(setting);       var url = new UrlHelper(HttpContext.Current.Request.RequestContext);     return this.helper.When(JqueryBind.Submit)                .DoWithPreventDefault()                .Submit(options =>                            {                                options.Url = url.Dispatcher()                                                 .Push(setting.Routes);                            })                .OnSuccess(dsl =>                               {                                   dsl.WithId(setting.TargetId).Core().Trigger.Incoding();                                   dsl.Self().Core().Form.Reset();                               })                .AsHtmlAttributes()                .ToBeginTag(this.helper, HtmlTag.Form); } 

Container

@(Html.When(JqueryBind.InitIncoding | JqueryBind.IncChangeUrl)       .Do()       .AjaxGet(Url.Dispatcher()                   .Query(new                          {                    ClientId = Selector.Incoding.Cookie(CookieManager.ClientId),                    Type = Selector.Incoding.HashQueryString(r => r.Type)                          })                   .AsJson())       .OnSuccess(dsl =>                      {                          string urlTmpl = Url.Dispatcher()                                              .Model(new GetTodoByClientQuery.Tmpl { FooterId = footerId })                                              .AsView("~/Views/Home/Todo_List_Tmpl.cshtml");                          dsl.Self().Core().Insert.WithTemplateByUrl(urlTmpl).Html();                          dsl.WithId(footerId).Core().Trigger.Incoding();                      })       .AsHtmlAttributes(new { id = containerId })       .ToDiv()) 

Что к чему ?

• When(JqueryBind.InitIncoding | IncChangeUrl) — указываем целевые события
  
  • InitIncoding – срабатывает при первом появлении элемента на странице ( не важно ajax или обычно )
  • IncChangeUrl – срабатывает при изменение hash

• Do — поведение события
• AjaxGet — указываем url, на который будет выполнен ajax запрос
  
  • ClientId – получаем значение из cookies
  • Type – получаем значение из Hash Query String

• OnSuccess — выполняем после удачного завершения AjaxGet
  
  • Insert data to self by template – вставляем полученные данные из запроса ( json ) через template ( Todo_List_Tmpl ниже ) в текущий элемент.
    примечание: template можно получить через любой доступный Selector, например раньше основным был Jquery.Id, но загрузка по ajax предпочтительней
  • Trigger incoding to footerId – запускаем весь IML код для элемента footer ( описание ниже )

• AsHtmlAttributes — собираем IML код и задаем значение containerId ( guid ) атрибуту Id
  примечание: использование guid в качестве Id гарантирует уникальность элемента на странице, особенно актуально для single page application
• ToDiv — упаковываем полученные атрибуты в тэг div
  примечание: ToDiv это C# extensions над RouteValueDictionary, поэтому без труда можно написать свой нужный вариант

Container ( альтернативный способ )

@Html.Todo().Container(setting =>              {                  setting.Id = containerId;                  setting.Url = Url.Dispatcher()                                   .Query(new                                                 {                                                         ClientId = Selector.Incoding.Cookie(CookieManager.ClientId),                                                         Type = Selector.Incoding.HashQueryString(r => r.Type)                                                 })                                   .AsJson();                  setting.Tmpl = Url.Dispatcher()                                    .Model(new GetTodoByClientQuery.Tmpl { FooterId = footerId })                                    .AsView("~/Views/Home/Todo_List_Tmpl.cshtml");                  setting.DependencyId = footerId;              }) 

примечание: если в будущем надо будет добавить block ui или другие действия, то теперь это можно делать централизованно

public class ContainerSetting {     public string Id { get; set; }       public string Url { get; set; }       public string Tmpl { get; set; }       public string DependencyId { get; set; } }   public MvcHtmlString Container(Action configure) {     var setting = new ContainerSetting();     configure(setting);       return helper.When(JqueryBind.InitIncoding | JqueryBind.IncChangeUrl)                  .Do()                  .AjaxGet(setting.Url)                  .OnSuccess(dsl =>                                 {                                     dsl.Self().Core().Insert.WithTemplateByUrl(setting.Tmpl).Html();                                     dsl.WithId(setting.DependencyId).Core().Trigger.Incoding();                                 })                  .AsHtmlAttributes(new { id = setting.Id })                  .ToDiv(); } 

Footer

@(Html.When(JqueryBind.None)       .Do()       .Direct(new FooterVm                         {                          AllCount = Selector.Jquery.Class("toggle").Length(),                          IsCompleted = Selector.Jquery.Class("toggle").Is(JqueryExpression.Checked),                          CompletedCount = Selector.Jquery.Class("toggle")                                                          .Expression(JqueryExpression.Checked)                                                          .Length(),                         }))       .OnSuccess(dsl =>                      {                          string urlTmpl = Url.Dispatcher()                                              .Model(new TodoFooterTmplVm                                                         {                                                                 ContainerId = containerId                                                         })                                              .AsView("~/Views/Home/Todo_Footer_Tmpl.cshtml");                          dsl.Self().Core().Insert.Prepare().WithTemplateByUrl(urlTmpl).Html();                      })       .AsHtmlAttributes(new { id = footerId })       .ToDiv()) 

• When(JqueryBind.None) — указываем целевые события
  
  • None – When позволяет указать любое пользовательское событие, как строку “MySpecialEvent”, но практика показал, что для многих сценариев хватает одного.

• Do — поведение события
• Direct — можно рассматривать как action заглушка, который не выполняет действий, но может работать с данными
  • AllCount – получаем кол-во объектов с классом “toggle”
    примечание: можно воспользоваться расширением Method ( вместо Length ), чтобы вызвать любой jquery метод, а также написать C# extensions над JquerySelectorExtend
  • IsCompleted — проверяем на наличие отмеченных объектов с классом “toggle”
    примечание: кому не хватит возможностей готовых jquery selector, то можно воспользоватся Selector.Jquery.Custom(“your jquery selector”)
  • CompletedCount – получаем количество отмеченных объектов с классом “toggle”

• OnSuccess — выполняем после удачного завершения AjaxGet
  
  • Insert prepare data to self by template — вставляем подготовленные ( prepare ) данные из Direct через template ( Todo_Footer_Tmpl ниже ) в текущий элемент

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

• AsHtmlAttributes — собираем IML код
• ToDiv — упаковываем полученные атрибуты в тэг div

Todo List Tmpl

Разметка шаблона для построения списка todo

@using (var template = Html.Incoding().Template()) {  <ul>   @using (var each = template.ForEach())     {     @using (each.Is(r => r.Active))      { @createCheckBox(true) }     @using (each.Not(r => r.Active))     { @createCheckBox(false) }       <li class="@each.IsInline(r=>r.Active,"completed")">       <label>@each.For(r=>r.Title)</label>     </li> </ul> } 

примечание: исходный код больше ( удаленна логика элементов ), чем представлен на пример, но это сделано для удобства объяснения template

Что к чему ?

• Html.Incoding().Template() – открываем контекст ( в рамках using ) построения template
• template.ForEach() — начинаем перебор ( в рамках using ) элементов
• using(each.Is(r=>r.Active)) — предыдущий вариант условий был в “одну линию”, но часто бывает что надо выполнить более сложные действия.
• createCheckBox — анонимная C# функция для создания checkbox ( описание ниже )
• each.IsInline(r=>r.Active,”completed”) — если поле Active true, тогда возвращаем “completed”
  примечание: также имеются IsNotLine и IsLine.
• each.For(r => r.Title) – выводим значение поля Title
  примечание: все обращения к полям происходят на основе указанной модели ( да, я опять о типизации )

Другие элементы

Button del

@(Html.When(JqueryBind.Click)       .Do()       .AjaxPost(Url.Dispatcher().Push(new DeleteEntityByIdCommand                                  {                                          Id = each.For(r => r.Id),                                          AssemblyQualifiedName = typeof(Todo).AssemblyQualifiedName                                  }))       .OnBegin(r =>                    {                        r.WithSelf(s => s.Closest(HtmlTag.Li)).Core().JQuery.Manipulation.Remove();                        r.WithId(Model.FooterId).Core().Trigger.Incoding();                        r.WithId(toggleAllId).Core().Trigger.None();                    })       .AsHtmlAttributes(new { @class = "destroy" })       .ToButton("")) 

Что к чему ?

• When(JqueryBind.Click) — указываем целевое событие
• Do — поведение события
• AjaxPost — указываем Url, на который делаем ajax запрос
  
  • Id — значение из Todo
  • AssemblyQualifiedName – получаем имя типа элемента ( или иной другой C# код )

• OnBegin — выполняем до начала действия ( AjaxPost )
  примечание: конечно правильней будет использовать OnSuccess, потому что может произойти ошибка на сервере ( timeout или что-то другое ) и транзакция будет не полная из-за того, что OnBegin сработает до вызова AjaxPost, но примеры TodoMVC на js framework используют local storage ( который быстрее чем ajax ) и поэтому я не много схитрил, да бы не проигрывать в быстродействие
  
  • Remove closest LI — удаляем ближайший LI
  • Trigger incoding to footer id – запускаем весь IML код для элемента footer ( описание выше )
  • Trigger none to toggle all – запускаем IML код ( только цепочку None ) для элемента Toggle All ( описание ниже )

  примечание: если бы для обоих ( footer и toggle all ) нужно было вызвать одинаковый trigger, то можно использовать следующий вариант

  dsl.WithId(Model.FooterId, toggleAllId).Core().Trigger.Incoding(); 

• AsHtmlAttributes — собираем IML код
• ToButton — упаковываем полученные атрибуты в тэг button
  примечание: ToButton позволяет указать содержимое, но в данном случаи это не надо, потому что картинка устанавливает через CSS

Button Del ( альтернативный вариант )

@Html.Todo().Verb(setting =>        {            setting.Url = Url.Dispatcher().Push(new DeleteEntityByIdCommand                                                    {                                                            Id = each.For(r => r.Id),                                                            AssemblyQualifiedName = typeof(Todo).AssemblyQualifiedName                                                    });            setting.OnBegin = dsl =>                                  {                                      dsl.WithSelf(s => s.Closest(HtmlTag.Li)).Core().JQuery.Manipulation.Remove();                                      dsl.WithId(Model.FooterId).Core().Trigger.Incoding();                                      dsl.WithId(toggleAllId).Core().Trigger.None();                                  };            setting.Attr = new { @class = "destroy" };        }) 

примечание: OnBegin принимает Action, что позволяет легко масштабировать ваш extensions внедряя в него IML. ( далее будут ещё примеры )

 public class VerbSetting {     public string Url { get; set; }       public Action<IIncodingMetaLanguageCallbackBodyDsl> OnBegin { get; set; }       public Action<IIncodingMetaLanguageCallbackBodyDsl> OnSuccess { get; set; }       public object Attr { get; set; }       public string Content { get; set; } }  public MvcHtmlString Verb(Action<VerbSetting> configure) {     var setting = new VerbSetting();     configure(setting);       return this.helper.When(JqueryBind.Click)                .Do()                .AjaxPost(setting.Url)                .OnBegin(dsl =>                             {                                 if (setting.OnBegin != null)                                     setting.OnBegin(dsl);                             })                .OnSuccess(dsl =>                               {                                   if (setting.OnSuccess != null)                                       setting.OnSuccess(dsl);                               })                .AsHtmlAttributes(setting.Attr)                .ToButton(setting.Content); } 

var createCheckBox = isValue => Html.When(JqueryBind.Change)                                     .Do()                                     .AjaxPost(Url.Dispatcher().Push(new ToggleTodoCommand                                                                  {                                                                      Id = each.For(r => r.Id)                                                                  }))                                     .OnBegin(dsl =>                                                   {                                                    dsl.WithSelf(r => r.Closest(HtmlTag.Li))                                                       .Behaviors(inDsl =>                                                                      {                       inDsl.Core().JQuery.Attributes.RemoveClass("completed");                       inDsl.Core().JQuery.Attributes.AddClass("completed")                                  .If(builder => builder.Is(() => Selector.Jquery.Self()));                                                                      });                                                       dsl.WithId(Model.FooterId).Core().Trigger.Incoding();                                                     dsl.WithId(toggleAllId).Core().Trigger.None();                                                    })                                      .AsHtmlAttributes(new {@class="toggle" })                                      .ToCheckBox(isValue); 

@{     const string classSelected = "selected";     var createLi = (typeOfTodo,isFirst) => Html.When(JqueryBind.InitIncoding)                               .Do()                               .Direct()                               .OnSuccess(dsl =>                                                            {       var type = Selector.Incoding.HashQueryString(r => r.Type);         if (isFirst)       dsl.Self().Core().JQuery.Attributes.AddClass(classSelected).If(s => s.Is(() => type == ""));         dsl.Self().Core().JQuery.Attributes.AddClass(classSelected).If(s => s.Is(() => type == typeOfTodo.ToString()));                                                             })                                .When(JqueryBind.Click)                                .Do()                                .Direct()                                .OnSuccess(dsl =>                                                            {     dsl.WithSelf(r => r.Closest(HtmlTag.Ul).Find(HtmlTag.A)).Core().JQuery.Attributes.RemoveClass(classSelected);     dsl.Self().Core().JQuery.Attributes.AddClass(classSelected);                                                                                                               })                                 .AsHtmlAttributes(new { href = "#!".AppendToHashQueryString(new { Type = typeOfTodo }) })                                 .ToLink(typeOfTodo.ToString()); }    <li>  @createLi(GetTodoByClientQuery.TypeOfTodo.All,true)        </li>    <li>  @createLi(GetTodoByClientQuery.TypeOfTodo.Active,false)    </li>  <li>  @createLi(GetTodoByClientQuery.TypeOfTodo.Completed,false) </li> 

<li>     @Html.Todo().LiHash(setting =>                             {                          setting.IsFirst = true;                          setting.SelectedClass = classSelected;                           setting.Type = GetTodoByClientQuery.TypeOfTodo.All;                             })                     </li>