- Code on AngularJs is no great shakes - – difficult to disprove, although they are all from web-site and popular instruction
- Weak examples - we stressed on the tasks, not on the scripts. But I agree that more complex decision fulfils a potential (I offered some our projects that are available on “open source”, but they were ignored)
- Do not know AngularJs ? - for obvious reasons it’s hurt the developers AngularJs
- Topic JS - this is an grave error, because if you don’t use asp.net mvc it’s difficult to understand possibilities of typified TextBoxFor or other add-ons.
- 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
Dangerous: further will be a lot of C#-code and the lack of JavaScript, so those who are nervous, please, calm down and don’t get scared at every “using(Html)”
@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
- When(JqueryBind.Submit) - indicate objective event
- DoWithPreventDefault - event behavior (cancel browser evaluator)
- Submit - – send the form through ajax
- 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)
- 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)
@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. )
[wpspoiler name="Under hood" ]
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. [/wpspoiler]
@(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) - – 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.
- 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
- ToDiv - pack up getting attributes in the tag div
@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
[wpspoiler name="Under hood " ]
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(); }
[/wpspoiler]
@(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) - 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
- IsCompleted - check up for tagged objects with “toggle” class
- CompletedCount - get the numer of tagged objects with “toggle” class
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
- AsHtmlAttributes - collect IML code
- ToDiv - pack up getting attributes in the tag div
@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) }Note: back code is more than shown in the example (logic of elements is deleted). It’s made for comfortable explanation of template<li class="@each.IsInline(r=>r.Active,"completed")"> <label>@each.For(r=>r.Title)</label> </li>
</ul> }
- 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”
- each.For(r => r.Title) - depict the value of Title field
@(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) - – 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)
- 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)
dsl.WithId(Model.FooterId, toggleAllId).Core().Trigger.Incoding();
- AsHtmlAttributes - collect IML code
- ToButton- pack up getting attribute in tag button
@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 )
[wpspoiler name="Under hood" ]
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
[/wpspoiler]
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);</pre>
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
- When(JqueryBind.Change) - indicate target event
- Do - – behavior of event
- AjaxPost - indicate Url, which will be send to ajax request
- 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”
- AsHtmlAttributes - collect IML code and install the value “toggle” to attribute “class”
- ToCheckBox - pack up
@{ 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 == ""));Note: one more example how to realize anonymous functions in the context of “razot view”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>
- When(JqueryBind.InitIncoding) - indicate target event
- Do - – behavior event
- Direct - realize noting
- OnSuccess - realize after successful finish
- 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
- 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”
<li> @Html.Todo().LiHash(setting => { setting.IsFirst = true; setting.SelectedClass = classSelected; setting.Type = GetTodoByClientQuery.TypeOfTodo.All; }) </li>
[wpspoiler name="Under hood" ]
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()); }
[/wpspoiler]
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 (documentation will be soon)
@(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")))</pre>
- 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
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
[wpspoiler name="Again IML variant" ]
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();[/wpspoiler]
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.