Power selector 2

disclaimer: for the effective use of IML, we need to understand how selectors work and where they are to be applied that is going to be the problem of the following article and we are going to cover all aspects related to selectors’ work

Runtime

IML  is a declarative programming language that describes the way a code runs on the client side (browser) at the moment of the event indicated in When that allows to obtain the values of DOM elements in runtime, which can then be used in expressions and operations.

If we use firstValue variable on the North side (controller, query or command), instead of the expected value of DOM element, we will get only the path (jquery selector) to it but not the value itself. When this variable is used within the IML, which is executed in runtime (on the client), then we will obtain the value of the item at the moment of execution of code.

note: for interactive acquaintance you can use the test panel.

Where to apply?

Range of places where Selector can be applied is limited and below we draw a list of all supported scenarios:

  1. With – allows you to select the element to which actions in callback body will be applied, we will demonstrate it with the following example

2. Self – Self() method is a “quick″ version of With(r=>r.Self())

3. Url – is an important feature of the IML, in order to understand how it works look at the example, which shows a part of the IML construct that makes Ajax request for url PostDischarge / Get with parameters

Note: Of all the parameters only isReadOnly is valid for asp.net mvc parameter, because all the rest is links (jquery selectors) to DOM elements. Construction of address will occur at the moment of event indicated in When (for instance, it is Click), that allows you to dynamically build an address based on user input data

  4. Paramenters – most of methods support selectors:

 5. Conditions – allow the use of values in expressions:

What data is available?

Incoding Selector covers all Jquery major scenarios, namely Id, Name, Tag, Expression sampling, a work with tree (filter, find, closets, parent), in addition to jquery, there are tools for work with specific data, such as hash, cookies, query string.

1. Values of DOM elements

  • val for input
  • val for select
  • val, as array for select[multiple=”multiple”]
  • is(“:checked”) for checkbox
  • If under one name there are many checkbox, then is  value

Note: IML determines the type of element found by selector and basing on that decides which way to get the value that abstracts you from this problem

2. Method

Note: You can use C # extensions to write their implementation that is on the client side you write Jquery function over a collection of objects and by C #you will cause it. 

3. Special selector

Special selectors do not have analogues in jquery, so below we will describe each of them separately.

  • Selector.Jquery.Self() – IML construct always integrates into the DOM element that allows you to get an access to it, according to principle of its work, self is an analogue of event.target
  • Selector.Incoding – is responsible for receiving data that is stored not in the DOM elements, but in location, cookies or is available on request to the server.

Note: The Url in Selector.Incoding.Ajax is to return IncJson (IncodingResult.Success) or IncView.

  • Selector.JS – is used to get the value available in JavaScript, such as DateTime, Document, GeoLocation, and for execution of JavaScript code

Best practices

This section comprises recommendations, which have been developed in the process of Incoding Framework applying to real projects

 1.Typing – the difference between IML’s applying and  applying of JavaScript during the building of  jquery selector is that in the first case you can use all abilities of C #, and in particular generic.

[table sort=”desc,asc”]
Usual,Generic

Selector.Jquery.Name(“password”), Selector.Jquery.Name<T>(r=>r.Password)

Selector.Jquery.Id(“password”), Selector.Jquery.Id<T>(r=>r.Password)

Selector.Incoding.QueryString(“code”), Selector.Incoding.QueryString<T>(r=>r.Code)

[/table]

above is shown a comparison of the two methods for recording, which shows that the length of the typing construct is bigger, but the benefits of support of Intellisense and ReSharper Refactor completely cover this deficiency.

Note: In version 2.0 it will become possible to use the current model announced in View (inc-195)

справка: в версии 2.0 появится возможность использовать текущую модель объявленную во View ( inc-195 )

2. Jquery.Self() –  in the section on special selectors I dwelled in detail on Self and so now I am going to give examples of scenarios where  one using Self  can avoid  adding of id for the DOM elements:

    • dsl.Self().Core().Insert.Html()  – insertion into current element
    • dsl.Utilities.Window.Alert(“Element not checked”).If(r=>r.Is(() => Selector.Jquery.Self() == false)) – current value of element in condition.
    • Url.Action(“Search”, “Customer”,new{ name = Selector.Jquery.Self() }) – current value of element in query.
    • dsl.With(r=>r.Self().Closest(selector=>selector.Tag(HtmlTag.Tr)))  – find Tr tag, which will be the first from the current element. Self can also be applied to Filter, Parent, and others.

3. Группировка – to apply to several DOM elements the same set of executors, it is possible, by analogy with Jquery to collect a set of target elements.

Note: The code demonstrates how to apply an action (set up: style diplay = “none”) to multiple sets of jquery selector. The Add method is an analogue of jquery add, just as many selectors allow you to draw a sample for several values, such Selector.Jquery.Id (“id1”, “Id2”) or Selector.Jquery.Class (“class1”, “class2”)

4. Complex selectors  – IML selector allows you to build all selectors supported by Jquery, but I try not to build very complex ones, because you can always replace any of them by Id

5.  Does not support? – IML has a lot of ready-selectors that cover most of the scenarios, it but also has the ability to expand and add its own ones.

        5.1  C# extensions 

 Note: This code is taken from Incoding Framework source

      5.2   Selector Jquery  Custom

     5.3  Selector JS Eval

 6. Variables – allow you to remove copy&paste by using C # variables on View

Note: The example shows one of the ways to harness the power of C # to simplify the code.    

Conclusion

Incoding Selector covers most scenarios, but also it has the ability to write your own extensions or use low-level Eval and Custom methods.

 

 

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

2 thoughts on “Power selector

  1. Vnuuk 13.10.2013 09:54 AM

    По поводу Selector.Js.Call.. первый параметр – имя функции на javascript. За что отвечает второй параметр “key”?

    • Vlad Kopachinsky 13.10.2013 10:21 AM

      “Key” я привел в качестве примера, произвольных параметров для
      функции, подчеркнув тот факт, что используя Eval ( или Call ) всегда
      можно решить проблему не достающего функционала.

Leave a Reply