Client Controls & Server Controls

From a conceptual point of view all controls may be classified into two big categories: Client Controls and Server Controls. Client Controls are bound to client side javascript data and create their Html dynamically on the client side, while the Html of Server Controls is rendered on the server side using data contained in a server side ViewModel.

The main advantages of server controls are:

  • Their ”static” Html is visible to the search engines,
  • They require less “job” on the client side so they are efficiently rendered also by low performance browsers (such as the browsers of low quality mobile devices).

On the other side client controls offer:

  • More flexibility, and a better interaction with all other html elements of the page, which, in turn, implies a richer user experience,
  • Less round-trips to the server, and a  lower bandwidth consumption since less data are exchanged with the server less frequently.

 The Data Moving Plug-in contains both type of controls, in order to fit better all developer needs.

Data Moving Plug-in Server Controls send their input to the server, through standard or ajax posts. They support changes tracking either natively, or through the use of the TrackedListRendering and TrackedObjectRendering helpers.

Data Moving Plug-in Client Controls are based on an enhancement of knockout.js and send their input to the server, either through standard or ajax posts like Server Controls, or by exchanging JSon with the server. They support changes tracking through the javascript updatesManager class. Using Client controls with the Data Moving Plug-in is easy:

As a first step we transfer the server model to the client, and we get a Client ViewModel aware html helper:

Client ViewModel aware html helper

and then we use ch as an usual html helper to render our client controls:

rendering a client control

Some controls like the SimpleGrid and the Form may work both as client control and as server controls, with exactly the same developer interface. They "feel" their environment and render as appropriate.