- PVSM.RU - https://www.pvsm.ru -
disclaimer: статья является ответом на критику ( которая обрушилась на хабре [1]), раскрывая потенциал IML на примере популярного приложения ToDo MVC [2].
Критика – это слово крайне мягкое по отношению к дискуссии, которая возникла к моей предыдущей статье, потому что это было больше похоже на избиение в котором были крайне не приятные комментарии ( на фото топ бредовых ), но также и объективные:
В комментариях предложили попробовать реализовать “Todo MVC” в качестве доказательства возможностей IML и сейчас мы посмотрим что из этого получилось. Во первых demo [3] версия, которая имеет одно отличите от тех, что представлены для js framework, в том, что в качестве хранилища используется не local storage, а база данных, а также исходный код [4], который мы будем разбирать далее в посте. В процессе реализации я строил всю логику ( расчеты подвала, скрытие элементов и т.д. ) на клиенте, хотя на реальных задачах, проще ( иногда необходимо ) обновлять “точечно” элементы, которые имея IML код, знают, как себя вычислить и отобразить.
Стиль повествования в этот раз будет не сравнение одного решения с другим (иначе объем материала будет большим ), а обзор кода, который получится при реализации приложения todo. Я упоминал выше о том, что в реализации IML присутствует и серверная часть, но в целях уравнивания решаемых задач для более объективного сравнения, сфокусируемся только на клиентской части.
Код был разделен на 3 View
@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 [5]с переработанным кодом ) с применением C# extensions
Html.BeginForm(“action”,”controller”,Post,iml.AsHtmlAttributes())
@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);
}
примечание: код знаком большинству asp.net mvc разработчиков, но стоит отметить то, что вместо “обычных” параметров, мы передаем анонимный метод, который принимает класс настроек.
@(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())
@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();
}
@(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())
примечание: prepare перед тем как вставить данные выполняет селекторы, которые находятся в полях.
Разметка шаблона для построения списка 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.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(""))
примечание: если бы для обоих ( footer и toggle all ) нужно было вызвать одинаковый trigger, то можно использовать следующий вариант
dsl.WithId(Model.FooterId, toggleAllId).Core().Trigger.Incoding();
@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);
}
примечание: по скольку Verb использует в нескольких сценариях, то можно легко делать опциональные параметры проверяю их на null, а так же задавать значения по умолчанию
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);
примечание: в рамках razor страницы можно использовать анонимные C# функции или Razor helper, что позволяет агрегировать однотипные задачи.
примечание: пока в IML не реализована возможность else, но в версии 2.0 планируется
@{
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>
примечание: ещё один пример реализации анонимных функций в рамках razor view
<li>
@Html.Todo().LiHash(setting =>
{
setting.IsFirst = true;
setting.SelectedClass = classSelected;
setting.Type = GetTodoByClientQuery.TypeOfTodo.All;
})
</li>
В чем же плюсы IML, я постарался раскрыть в прошлой статье, но было не убедительно, поэтому попробую ещё раз:
@Html.For(r=>r.HcsId).DropDown(control =>
{
control.Url = Url.Action("HealthCareSystems", "Shared");
control.OnInit = dsl => dsl.Self().Core().Rap().DropDown();
control.Attr(new { @class = "selectInput", style = "width:375px" });
})
примечание: OnInit принимает Action, что позволяет легко масштабировать ваш extensions внедряя в него IML.
Dialog
@Html.ProjectName().OpenDialog(setting =>
{
setting.Url = Url.Dispatcher()
.Model<GroupEditProviderOrderCommand>()
.AsView("~/Views/ProviderOrder/Edit.cshtml");
setting.Content = "Edit";
setting.Options = options => { options.Title = "Edit Order"; };
})
примечание: для большей гибкости можно использовать Action в качестве поля, например setting.Options это Action.
Список можно продолжать бесконечно, но основная идея в том, что IML позволяет выполнять любые задачи, а html extensions решает проблему с повторным использованием.
@(Html.ProjectName()
.Grid<CTRPrintLogModel>()
.Columns(dsl =>
{
dsl.Template(@<text>
<span>@item.For(r=>r.Comment)</span>
</text>)
.Title("Comment");
const string classVerticalTop = "vertical_top";
dsl.Bound(r => r.Time).Title("Time").HtmlAttributes(new { @class = classVerticalTop });
dsl.Bound(r => r.Version).Title("Type").HtmlAttributes(new { @class = classVerticalTop });
dsl.Bound(r => r.PrintDate).Title("Date");
dsl.Bound(r => r.Comment).Raw();
})
.AjaxGet(Url.RootAction("GetCTRPrintLogModel", "CTR")))
@(Html.Rap()
.Tabs<Enums.CarePlanTabs>()
.Items(dsl =>
{
dsl.AddTab(Url.Action("RedFlags", "PatientRedFlag"), Enums.CarePlanTabs.RedFlags);
dsl.AddTab(Url.Action("Goals", "IncGoal"), Enums.CarePlanTabs.SelfCareGoals);
dsl.AddTab(Url.Action("Index", "IncAppointment"), Enums.CarePlanTabs.Appointments);
}))
примечание: любой разработчик знакомый с html extensions может построить такой элемент под нужды своего проекта
Html.When(JqueryBind.InitIncoding)
.Do()
.AjaxGet(Url.Action("FetchComplex", "Data"))
.OnSuccess(dsl =>
{
dsl.WithId(newsDivId).Core().Insert.For<ComplexVm>(r => r.News).WithTemplateByUrl(urlNewsTmpl).Html();
dsl.WithId(contactDivId).Core().Insert.For<ComplexVm>(r => r.Contacts).WithTemplateByUrl(urlContactsTmpl).Html();
})
.AsHtmlAttributes()
.ToDiv()
if (device != null)
throw IncWebException.For<AddDeviceCommand>(r => r.Pin, "Device with same pin is already exist");
.OnError(dsl => dsl.Self().Core().Form.Validation.Refresh())
примечание: обработчик OnError должен быть прикреплен к элементу, который вызывает action ( submit, ajaxpost or etc )
При реализации todo на IML я придерживался правила: меньше обновлений странице, то есть пересчитывал все на клиенте, но практика ( наших проектов ) показывает, что чаще узким местом бывает именно сервер, потому что многие действия не возможны или не предпочтительны на клиенте, например
Невозможны ( по причине производительности ):
Не предпочтительны могут быть расчеты, такие как сложные вычисления ( общую сумму заказов с учетом налога ) на основе значений полей, удобней будет отправить на сервер запрос ( с данными полей ) и результат вставить.
var val = Selector.Incoding.AjaxGet(url);
dsl.WithId(yourId).Core().JQuery.Attributes.Val(val);
dsl.With(r => r.Name(s => s.Last)).Core().Insert.For<ContactVm>(r => r.Last).Val();
dsl.With(r => r.Name(s => s.First)).Core().Insert.For<ContactVm>(r => r.First).Val();
dsl.With(r => r.Name(s => s.City)).Core().Insert.For<ContactVm>(r => r.City).Val();
Можно долго рассказывать про возможности IML ( и Incoding Framework ), но статья и так получилось большой, поэтому, те кто захочет продолжить изучать наш инструмент смогут найти материалы в сети. Я понимаю, доказать то, что IML способен решать задачи не хуже популярных js framework крайне сложно, но в следующих статьях будет обзор реализаций autocomplete, Tree View, grid и других сложных задач, которые продемонстрируют ещё больше возможностей.
P.S. Как всегда рад критики и замечаниям )))
Автор: vkopachinsky
Источник [6]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/asp-net-mvc/56586
Ссылки в тексте:
[1] хабре : http://habrahabr.ru/post/214293/
[2] ToDo MVC: http://todomvc.com/
[3] demo: http://todo.incframework.com
[4] исходный код: https://github.com/IncodingSoftware/inc-todo
[5] GibHub : https://github.com/IncodingSoftware/inc-todo-refactor
[6] Источник: http://habrahabr.ru/post/214963/
Нажмите здесь для печати.