Click here to Skip to main content
11,813,974 members (49,577 online)
Click here to Skip to main content

Tagged as

How Does a LightSwitch HTML Client Application Work?

, 11 Jun 2013 Ms-PL 9.3K 5
Rate this:
Please Sign up or sign in to vote.
How a LightSwitch HTML client application works.


After using the Visual Studio LightSwitch HTML Client, you may wonder, how does it work? How does it turn the program we designed into an actual web application?…


After using the Visual Studio LightSwitch HTML Client, you may wonder, how does it work? How does it turn the program we designed into an actual web application?


We will explore the application created in the tutorial: Online Ordering System (An End-To-End LightSwitch Example).


The tool that will be most helpful will be Fiddler, available here: This program will allow us to monitor the traffic that is transmitted between the web server running the LightSwitch application and our web browser.


When we run Fiddler and monitor the web traffic created by the End-To-End application (running at:, we  see that is loads a number of files.

Note: the 404 errors in the image above are due to the sample application not employing any Localization.


All of these files are required to display the first page. We will also see that as we use the application, it will transmit only a small amount of information. Primarily, only the data required to display or update the application.

The HTML Page


Everything starts with the HTML page.


When we look at the contents of the page, we see that it loads the .css files and .js scripts that the LightSwitch application requires.

The JavaScript library files that it loads are:

  • jquery/
    • JavaScript libraries that provide cross browser functionality
  • msls
    • The primary LightSwitch framework library that provides the application functionality
  • winjs
    • A helper library for things such as Promise objects that handle asynchronous calls
  • datajs
    • Used to provide OData communication

msls.js and winjs.js


The msls.js library is the heart of the LightSwitch framework. There is an enormous amount of functionality in this file. Much of it you can reference in your custom code.


The best way to explore it, is to open the msls-vsdoc.js file in the Scripts directory and read the comments.

There is a project by Soft Landing, inc that is documenting this library. You can get more information about that project at this link:



During the application start-up process, the msls.js library makes a call to the SecurityData.svc service to determine what the authentication type for the application is. If Forms Authentication is detected, the LightSwitch client will display the logout button.

generatedAssets.js / usercode.js


The generatedAssets.js file is referenced in the default.htm page.

It contains code that loads other required JavaScript libraries and files.


The usercode.js file (loaded by the generatedAssets.js file) loads the JavaScript files that contain custom code that we have created.



In the LightSwitch Silverlight client, the structure of the application is contained in .lsml files. In the running LightSwitch HTML Client, the structure of the application is contained in the model.json file.


The model.json file is created each time we build the LightSwitch application.


The file is in JSON format and describes the entire application. When this is loaded, the application has all the information it needs to run, except for the data.

The Screen


When we look at a screen in the LightSwitch designer, we see that it consists of Properties, Collections and Commands. This is consistent with the MVVM (Model-View-View Model) structure of the Silverlight Client.


When we look at the same screen in the model.json file we see that it defines the structure of the screens.


The viewModel.js library defines the JavaScript representation of the screens and allows programmatic access to the screens.

The Data


The data.js library contains a representation of all the data assets in the LightSwitch application.

It also contains the location of the .svc services that are used to actually retrieve the data from the server.


The msls.js library, at this point, has access to all the information needed to obtain the data needed by the application.

In this example, it knows from the model.json library that the first page contains the orders collection. It constructs a query using properties from the data.js library to retrieve the data.

Updating Data


The application is very efficient at this point. It only needs to contact the server to retrieve data and images.

Clicking the save button, when adding a single order detail…


… causes only one small request to the server.


Inserting, or updating in the application requires only a small data payload.


After inserting and updating several records, only the data service calls are needed.

Special Thanks

A very special thanks to LightSwitch team member Stephen Provine for his valuable assistance.


This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)


About the Author

Software Developer (Senior)
United States United States
Michael Washington is a Microsoft MVP. He is a ASP.NET and
C# programmer.
He is the founder of

He has a son, Zachary and resides in Los Angeles with his wife Valerie.

He is the Author of:

You may also be interested in...

Comments and Discussions

QuestionGreat article Pin
abdurahman ibn hattab14-Jun-13 16:17
memberabdurahman ibn hattab14-Jun-13 16:17 
AnswerRe: Great article Pin
defwebserver14-Jun-13 16:29
memberdefwebserver14-Jun-13 16:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.151002.1 | Last Updated 11 Jun 2013
Article Copyright 2013 by defwebserver
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid