>

Single Page Application Framework

The Data Moving Plug-in contains everything is needed to implement an advanced Single Page Application. A view engine based on knockout.js and powered with Razor Views, advanced tools for client server synchronization, and a powerful validation framework. The SPA View engine handles automatically virtual pages and virtual links. Virtual pages may be connected to the browser history, so the user may navigate among them with the back and forward browser buttons.

Virtual pages may be stored in a page store to keep their state so that when the user returns back to the same virtual page he finds it in exactly the same state he left it. This feature enhances the user experience and makes the SPA similar to a native windows application.

The SPA framework includes also an authorization framework that coordinates the virtual pages and views framework with the standard asp.net authorization system. If a user can't access a virtual page it is automatically redirect to the login virtual page. It is also quite easy to implement a menu that shows only the virtual pages that may be accessed by the current user.

AMD modules are built dynamically by Mvc controllers by using razor views so that their content may depend on context-related information, such as selected language and logged user. Moreover, this way javascript data structures may be created by serializing their equivalent .Net data structures, thus avoiding the duplication of code in both javascript and .Net.

Context rules specified with a simple syntax by the developer in javascript files supervision the addition of parameters to the AMD and template calls to the server to adapt them to the current context (logged user, selected language, etc.) and define virtual page redirection criteria that adapt the navigation to the current context (user authorizations, and global application state).

Play live with the software in the video above here

Views are Data Moving Plug-in templates, in particular they may be Mvc partial views that contain not only html, but also complex Data Moving Plug-in controls such as Grids and TreeViews, and also third parties widgets. Views are grouped into deployment units called templates modules and are cached in order to reduce the round-trips to the server.  Each time a view is required the View engine first search its template module in a modules cache, and then requires it to the server. Templates modules are returned by standard Mvc Controllers, either by inserting them in partial views or by using an ad hoc action results.

View selection is data driven: "placeholders" are filled with views that are selected by applying a template selection function to the data item bound to the "placeholder". More specifically any attempt to render a data item in a placeholder results in the request of both a templates module and a javscript AMD module. Once both modules have been retrived either from the server or from the view engine cache the selected View is bound to the data item and  javascript  transformations possibly returned by the javascript AMD module are applied both to the original data item and to the newly created Html.  Loading and transition  animations may be triggered in the callbacks attached to all relevant events of the javascript-module/view selection process. 

As soon as a data item changes a new view is automatically selected to render it. Thus, changes in the data and/or new data received from the server automatically trigger changes in the User Interface because of the loading of new Views and and of the execution of the associated javascript code.

Views PlaceHolders are specified with the ClientTreeIteratorFor,  RecurIterationOnSingle, and RecurIterationOn Html extensions (views are basically mvc Views). A view that is loaded in a placeholder may, in turn, contain   other placehoders. Thus, in general, View loading is a recursive process that creates a tree of nested views from  hierarchical data, where each view of the tree is bound to  the corresponding data item in the parallel data hierarchy. The ClientTreeIteratorFor helper defines the root of the tree,   RecurIterationOnSingle bind a placeholder to a single data item, and RecurIterationOn bind a several views placeholder to an IEnumerable.

The whole private are of this web site has been implemnted with the Data Moving Plug-in SPA Framework. See a demo video here.

For a preliminary tutorial on the Data Moving Plug-in SPA View Engine read Data Moving Plug-in SPA View Engine,  and refer to all SPA step by step video tutorials.