ASP.net 4.0 introduces a new feature which allows the user to only download the client-side file if it is needed. This feature is handled by the script loader which is responsible for triggering the download off the client-side file. In this article we are going to demonstrate how to use the script loader to download client-side script files on user action and also to download dependent JavaScript files.
Leveraging the Power of Script Loader Control in ASP.net 4.0:
Before using this script loader we must download start.js file which contains all the logic for the script loader control. The start.js file is hosted at the following URL:
It is a good idea to download the start.js file to your local server since the above URL is not very reliable.
It is recommended that you download the start.js file and add to your project. This way you will remove the dependency on the third party URL. Let's first see how we can use the JQuery library by injecting it dynamically using the script loader.
We have created a HTML DIV element which is shown below:
We want to change the color of the DIV from blue to yellow using the JQuery library. We have not reference the JQuery library in our page. The library will be added to the page using the script loader feature feature of the.net framework 4.0.
Our next task is to add a button which when clicked will change the color of the div element. The implementation of the button is shown below:
As you can see the button calls a change color function which is responsible for changing the color of the div element. The change color implementation is shown below:
Notice that we are using Sys.require function and passing it the JQuery script parameter. The second parameter is a callback function which will be fired when the script is loaded. Inside the function we are changing the color of the div element from blue to yellow.
Now run the application and click on the change color button. You will notice that first JQuery script is downloaded and then the div element color is changed from blue to yellow.
Downloading Custom Scripts Using Script Loader:
Just like the JQuery library we can also ask the script loader to download our custom scripts. In this section we are going to demonstrate how you can download your custom scripts and also create dependencies between custom scripts.
We have a custom script called animal.js and the implementation is shown below:
Next add a button to the page which will invoke the following function:
Now we need to define the animal script this can be performed as an in-line code but we have separated it out into a separate JS file. The JS file is called AppScriptRegister.js and it is referenced by the page in the head section. The implementation of AppScriptRegister.js file is shown below:
In the code above we are telling the script loader that we have some custom scripts which needs to be loaded when required. The second script which is called dog.js has a dependency on the animal script. This means that when fetching the dog script it is necessary to first fetch the animal script. The scenario is quite useful when the dog script calls a function which is contained in the animal script.
The callAnimal() implementation is shown below:
Run the page and click on the call animal button and you will notice that first the animal.js file is downloaded and then an alert box is displayed on the screen.
Similarly, if you call any function from dog.js file then you will notice that first animal.js file is downloaded then dog.js file is downloaded and finally the function is invoked.
Resources:
1) Screencast: Introduction to the ScriptLoader in .NET 4.0
Conclusion:
In this article we learned how to use the script loader feature of ASP.net 4.0. Script loader allows the user to download the client-side script file only when it is needed. This ensures that no client-side file is downloaded without the purpose. This will result in increased performance and smaller load times of the page.
