• Download inc-todo.zip - 9.2 MB  (don't forget change connection string for)
• Download inc-todo-refactor.zip - 9.8 MB (demonstration C# extensions with IML)
• Download Grid.zip - 9.9 MB (awesome and powerful IML control)

• Get started
• MVD (Model View Dipsatcher)
• Template

Why ToDo ?

 Were an offer to realize “Todo MVC” as an proof of IML possibilities. There is a result. First of all, in contrast to js framework, test-version doesn’t use as a container “local storage”, but use data-bases and source code (or attached file). We will consider it more. In the process of realization I built the whole of logistics (basement computation, hiding elements and etc.) on the client, although on the tasks. It’s easier (sometimes necessary) to update elements “pointwise”, that with IML-code know how to compute and reflect themselves

Code review

Today we will not compare 2 variants of decision (in this case the volume of material will be very large). We’ll make a review of a code, which we’ll get in the realization “todo” app. I’ve mentioned above that in the IML realization is the server side, but in order to equalize the task for more objective comparison, we focus only on client’s side

What it consists of

The code was splited into 3 View

• Index - main page ( actuallu it is single page )
• Todo_List_Tmpl - a pattern for central list
• Todo_Footer_Tmpl - – a pattern for building a basement with

Location in graphical form

The form for TODO adding

@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 = "" })
}

note: Anticipating phrases like “Hey, this is not serious, codes are much bigger, you need to copy everywhere, look at other people do it!!!” I’ve an argument – there are “ C# extensions ” which permit to wrap IML constructions. Further in the article I’ll give alternative variants of tasks decision (also “repository” on GibHub  with a revised code) using C# extensions

What is what?

• When(JqueryBind.Submit) - indicate objective event
• DoWithPreventDefault -  event behavior (cancel browser evaluator)
• Submit - – send the form through ajax

note:  few comments on presented realization:

• • Url where to send the form is set in options ( not through attribute variable “action” at "form"
  • ClientId  can be derived as Hidden that on InitIncoding entered meaning from Cookies to call Submit with no parameters
• OnSuccess - realize after successful submit finish
  • Trigger Incoding to containerId  - start the whole IML code for Container element (description below)

note: Anticipating phrases like “Hey, this is not serious, codes are much bigger, you need to copy everywhere, look at other people do it!!!” I’ve an argument – there are “ C# extensions ” which permit to wrap IML constructions. Further in the article I’ll give alternative variants of tasks decision (also “repository” on GibHub  with a revised code) using C# extensions

• • Form reset  - make a reset of form elements
• AsHtmlAttributes - collect IML code in convenient for asp.net mvc (RouteValueDictionary)

• ToBeginTag - – pack up getting attribute in the tag “form” ( work principle as Html.BeginForm)

note: Html.BeginForm may be used (“action”,”controller”,Post,iml.AsHtmlAttributes())

The form for TODO adding ( alternative variant )

@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 = "" })
}

note: code became smaller and the most important thing now you can expand method for concreate project needs (validation, redirect after submit and etc. ) 

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);
}

Note: Most of you are acquainted with asp.net mvc, but it is necessary to point out that in place of “usual” parameters, we propose anonymous method, that gets setting class.

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())

WHAT’S WHAT?

• When(JqueryBind.InitIncoding | IncChangeUrl) - – specifies target events
  • InitIncoding - – works at first appearance of element on a page (doesn’t matter ajax or usually)
  • IncChangeUrl - – works at “hash” changing
• Do - behavior of event
• AjaxGet - indicate the url, which will be send to ajax request
  • ClientId - get the value from “cookies”
  • Type - get the value from “Hash Query String”
• OnSuccess - realize after successful AjaxGet finish
  • Insert data to self by template - put in findings from request ( json ) through template ( Todo_List_Tmpl below) in current element.

Note: template can be got through any available Selector, ex. earlier Jquery.Id was basic but uploading on ajax is preferable

• • Trigger incoding to footerId -  start entire IML code for footer element (description below )
• AsHtmlAttributes -collect IML code and set value containerId ( guid ) to Id attribute

note: the use of guid as Id vouch for unique of element of page, especially relevant for single page application

• ToDiv - pack up getting attributes in the tag div

note: ToDiv is C# extensions over RouteValueDictionary, that’s why it is easy to write necessary variant

Container ( alternative way )

@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;
             })

Note: in the future it’s necessary to add block ui or other actions, now you can do it centralize 

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())

What’s what?

• When(JqueryBind.None) - indicate target events
  • None - When allows to indicate any user’s event as a line “MySpecialEvent”, but experience has shown that for manu scripts one is enough.
• Do - behavior of event
• Direct - can be examined as bib of action that perform no actions, but can work with data
  • AllCount - get the number of objects with “toggle” class

noteе: enhancing Method ( in place of Length ) could be used to call any jquery method and to write C# extensions over JquerySelectorExtend

• • IsCompleted  - check up for tagged objects with “toggle” class

note: if opportunities of ready-made jquery selector are not enough, so you can use Selector.Jquery.Custom(“your jquery selector”)

• • CompletedCount - get the numer of tagged objects with “toggle” class

note: to get the JS function value:

Selector.JS.Call("MyFunc",new []
                              {
                                  Selector.Jquery.Self(),
                                  "Arg2"                 
                              })

• OnSuccess - realize after successful finish of AjaxGet
  • Insert prepare data to self by template  - put in prepared data ( prepare ) from Direct through template (Todo_Footer_Tmpl below ) in the current element

note: before to put data in “prepare” fulfil selectors, that are in the fields.

• AsHtmlAttributes - collect IML code
• ToDiv - pack up getting attributes in the tag div

Todo List Tmpl

Template markup for todo list building

@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>
}

Note: back code is more than shown in the example (logic of elements is deleted). It’s made for comfortable explanation of template

What is what?

• Html.Incoding().Template() -  open the context ( in the context of using) template building
• template.ForEach() - start to iterate through elements ( in the context of using)
• using(each.Is(r=>r.Active)) - start to iterate through elements ( in the context of using)
• createCheckBox - anonymous function C# функция for making checkbox (description below)
• each.IsInline(r=>r.Active,"completed") - if after Active true so get back “completed”

note: there are also IsNotLine and IsLine.

• each.For(r => r.Title) - depict the value of Title field

note: all accessing to fields happens on the base indicated model (Yep, I’m again about typification)

Other elements

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(""))

What is what ?

• When(JqueryBind.Click) - – indicate target event
• Do - behavior of event
• AjaxPost- indicate Url, which will be send to ajax request
  • Id- value from Todo
  • AssemblyQualifiedName - get the name of element type ( or another C# code )
• OnBegin- take before the beginning of action (AjaxPost)

Note: of course it’s better to use OnSuccess, because may happen a mistake on the server( timeoutor something else ) and transaction will not complete because OnBegin works before a call of AjaxPost, but the TodoMVC examples on js framework use local storage ( which is faster than ajax) and that’s why I’ve dodged in order not to lose operation speed.

• • Remove closest LI   - delete the closest LI
  • Trigger incoding to footer id - start the whole IML code for element footer (description above)
  • Trigger none to toggle all - start IML code (only None chain) for element Toggle All (description below)

Note: if for both to call the same trigger, so it would be possible to use the following variant

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

• AsHtmlAttributes - collect IML code
• ToButton- pack up getting attribute in tag button

Note: ToButton allows to indicate contents, but in this case it’s not necessary because the picture installs through CSS

Button Del ( alternative variant )

@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" };
       })

Note: OnBegin take Action, that allows to scale easily your “extensions” instill in it IML. ( more examples further )    

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);
}

note: as long Verb uses in some scripts, it'’ easy to make optional parameters. I check them on “null” and assign a value on default 

 Checkbox Completed

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);

note: as long Verb uses in some scripts, it'’ easy to make optional parameters. I check them on “null” and assign a value on default

What is what ?

• When(JqueryBind.Change) - indicate target event
• Do - – behavior of event
• AjaxPost - indicate Url, which will be send to ajax request

Note: AjaxPost and AjaxGet is “denominate“ version of Ajax, which has many additional tuning OnBegin – take before the start actions (AjaxPost)

• OnBegin - take before the start actions (AjaxPost)
  • Remove class on closest LI -  delete class “completed” at the nearest LI
  • Add class on closest LI  if self is true- add class “completed”

Note: now in IML doesn’t realized a possibility “else” , but in 2.0 version is planted

• AsHtmlAttributes - collect IML code and install the value “toggle” to attribute “class”
• ToCheckBox - pack up

Filter by type todo

@{
    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>

Note: one more example how to realize anonymous functions in the context of “razot view”

What is what?

• When(JqueryBind.InitIncoding) - indicate target event
• Do - – behavior event
• Direct - realize noting
• OnSuccess - realize after successful finish

Note: there is no differences between “OnBegin” and “OnSuccess” for”Direct”, but OnError and OnBreak works in the same way as for others.

• • var type - declare a variable that we will use in expressions.
  • add class to self if IsFirst is true And type is Empty - add class if current element is the first and in “type” is empty
  • add class to self if type is current type - add class to current element if “type” is equal to argument typeOfTodo
• When(JqueryBind.Click) - indicate target event
• Do - behavior of event

Note: we don’t cancel behavior of hyperlink because we need the browser to update location

• Direct - take noting
  • remove class - delete class selected at all A, that are in the nearest UL
  • add class to self - add class selected to the current element
• AsHtmlAttributes - collect IML code and install attribute “href”

 

Filter by type todo ( alternative method )

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

public class LiHashSetting
{            
    public bool IsFirst { get; set; }

    public string SelectedClass { get; set; }

    public GetTodoByClientQuery.TypeOfTodo Type { get; set; }
}

public MvcHtmlString LiHash(Action configure)
{
    var setting = new LiHashSetting();
    configure(setting);

    return helper.When(JqueryBind.InitIncoding)
                 .Do()
                 .Direct()
                 .OnSuccess(dsl =>
                                {
     var type = Selector.Incoding.HashQueryString(r => r.Type);
          if (setting.IsFirst)
     dsl.Self().Core().JQuery.Attributes.AddClass(setting.SelectedClass)
                             .If(s => s.Is(() => type == ""));

     dsl.Self().Core().JQuery.Attributes.AddClass(setting.SelectedClass)
                             .If(s => s.Is(() => type == setting.Type.ToString()));
                                })
                 .When(JqueryBind.Click)
                 .Do()
                 .Direct()
                 .OnSuccess(dsl =>
                                {
     dsl.WithSelf(r => r.Closest(HtmlTag.Ul).Find(HtmlTag.A))
        .Core().JQuery.Attributes.RemoveClass(setting.SelectedClass);
     dsl.Self().Core().JQuery.Attributes.AddClass(setting.SelectedClass);
                                })
                 .AsHtmlAttributes(new { 
                       href = "#!".AppendToHashQueryString(new { Type = setting.Type })
                                       })
                 .ToLink(setting.Type.ToString());
}

Absolute advantages !

The advantages of IML I’ve tried to show in the last article, but it wasn’t convincing, that’s why I will try again:

• Typification - of course, each looks at typification from its own point of view. Somebody think that hier you have to write more codes (that’s right), others doesn’t have enough flexibility that is inherent to non-typification languages, but IML is first of all C#, so those developers who chose it, I think, will appreciate this advantage
• Powerful extensions - in the article I gave some of them, but there are much more in practice. I give some more examples to put the words into action:
  • Drop down

@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<IIncodingMetaLanguageCallbackDsl>, что позволяет легко масштабировать ваш 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"; };
                         })

note: OnInit takes Action<JqueryUIDialogOptions>, that allows to scale easily your extensions instill in it IML.   The list could be endless, but the main idea is that IML allows to perform any task, while html extensions solves a problem with design reuse.

• Much more powerful extensions
  • Grid - build entirely on IML (source code and documentation)

@(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.Staff.FirstAndLastName).Title("Staff")
                                                 .HtmlAttributes(new { @class = classVerticalTop });   
            dsl.Bound(r => r.PrintDate).Title("Date");
            dsl.Bound(r => r.Comment).Raw();
               })
      .AjaxGet(Url.RootAction("GetCTRPrintLogModel", "CTR")))

• •  Tabs - 

@(Html.Rap()
      .Tabs<Enums.CarePlanTabs>()
      .Items(dsl =>
             {
   dsl.AddTab(Url.Action("GapsAndBarriersInc", "GapsAndBarriers"), Enums.CarePlanTabs.GapsAndBarriers);    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);        
             }))

 Note: every developer who knows html extensions can build such element for his project needs

• • The Work with hash - in this article was examined only on IncChangeUrl level, but we have:
  •  Hash.Fetch - put values from hash into ( sandbox ) elements
  •  Hash.Insert/Update - – put values into hash from elements
  •  Hash.Manipulate - allows delicately ( set/ remove by key ) tune current hash
  • AjaxHash - is an analog of Submit, not for form, but for Hash
• The Work with Insert - – for TOSO realization I didn’t have to use, but in real projects it’s used everywhere
  • Insert Generic  - all the examples above were built on one model, but it’s often happens that scripts where findings are “containers”. In this case in Insert is an possibility to indicate with what part of model we work through For and also “template” for each its own

Html.When(JqueryBind.InitIncoding)
    .Do()
    .AjaxGet(Url.Action("FetchComplex", "Data"))
    .OnSuccess(dsl =>
                   {
         dsl.WithId(newsContainerId).Core()
            .Insert.For<ComplexVm>(r => r.News).WithTemplateByUrl(urlTemplateNews).Html();
         dsl.WithId(contactContainerId).Core()
            .Insert.For<ComplexVm>(r => r.Contacts).WithTemplateByUrl(urlTemplateContacts).Html();
                   })
    .AsHtmlAttributes()
    .ToDiv()

• The Work with validation (server as a client)  - there are instrument for validation in may js framework, but IML has integration with server and backing any validation engine ( FluentValidation, standart MVC) with no necessary to write an additional code.
  • Код command

if (device != null)
   throw IncWebException.For<AddDeviceCommand>(r => r.Pin, "Device with same pin is already exist");

• •  Код view

.OnError(dsl => dsl.Self().Core().Form.Validation.Refresh())

 Note: handler OnError must be attached to the element that causes action ( submit , ajaxpost or etc )

• Less scripts - with increase of project js framework demands lots of js files, but IML has fixed set of libraries (plug-ins not counted)
• Typificated template - about typification by kind, but for template constructing it’s very important
• template replace by engine - choose any of them, syntax is the same
• Complex solution - IML is a part of Incoding Framework and in contrast to js framework we have full infrastructure (server/client/ unit testing ) for projects developing that is tightly integrated with each other

Conclusion

At realization of IML I’ve followed the rule: less updates to the page, I mean I recounted this all on the client, but in practice (of ours projects) often the weak part is server, because a lot of actions are impossible or preferable on client. For example Impossible (because of productivity):

• Paginated - of the base consists of hundreds of thousands of recordings, it’s wrong to deliver capacity on client
• Order - the same reason
• Where - the same reason
• And other actions that connects with the data base

Difficult calculation on the base of values of fields (total amount of order including tax) could be not preferable. It’s better send on server an request (with values of fields) and put in results  

 In the context of IML calculation could be solved by following ways:

• Single value

var val = Selector.Incoding.AjaxGet(url);
dsl.WithId(yourId).Core().JQuery.Attributes.Val(val);

• Data set

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();

I can continue to tell you about IML possibilities (and Incoding Framework) but the article as already long. That’s why those who want to learn more about our tool can find the materials in the Net. I understand to prove that IML is able to solve tasks not worse than popular js framework is rather difficult, but in the next articles I will make a review of autocomplete, Tree View, grid and other popular scripts realization, that will show more possibilities of our toll.