[Sample of Mar 15th] Load JavaScript Resources on-demand in ASP.NET

Sample Download: https://code.msdn.microsoft.com/CSASPNETLoadAndExecuteDynam-25a1f05a

Today’s code sample demonstrates how JavaScript resources can be loaded on-demand. The JavaScript file is linked to the page via an Asynchronous web service call which returns the relative location of the JS on the server file and links it to the current page through JavaScript.

The sample is provided by Microsoft engineer Sagar Bhanudas Joshi.

You can find more code samples that demonstrate the most typical programming scenarios by using Microsoft All-In-One Code Framework Sample Browser or Sample Browser Visual Studio extension. They give you the flexibility to search samples, download samples on demand, manage the downloaded samples in a centralized place, and automatically be notified about sample updates. If it is the first time that you hear about Microsoft All-In-One Code Framework, please watch the introduction video on Microsoft Showcase, or read the introduction on our homepage https://1code.codeplex.com/.

Introduction

The sample demonstrates how JavaScript resources can be loaded on-demand. The JavaScript file is linked to the page via an Asynchronous web service call which returns the relative location of the JS on the server file and links it to the current page through JavaScript.

Building the Sample

1. Added a SVC (Ajax enabled web service [WCF] to the project).
2. Added a ScriptManager Object to the Default.aspx page for asynchronously calling the method in the WCF service.
3. We call the method in WCF service Asynchronously using the "$.Ajax()" method. in JQuery
4. The result of the service call is the path to the script object on the server.
5. Server contains a folder named a "Scripts" which is only known to the WCF service.
6. Then dynamically, the demanded script is linked to the page.
7. We add the "Source" of the JavaScript to the string that is returned as relative path from the web service.
8. For sample, we just have a "alert()" in the dynamic script that is loaded and executed.

Running the Sample

1. Open the “CSASPNETLoadAndExecuteDynamicJS.sln” file in Visual Studio 2010.
2. Run the sample.
3. Click the “Load Script stored on Internal Server” button.
4. This will attach the script on-demand to the page.
5. Click the “Call Script stored on Internal Server” button.
6. This will call the method from the dynamically loaded /linked scripts.
7. For external scripts enter the script URL in the text box provided.
8. Valid link will attach the external script to the page.

The following image is the screenshot.

Using the Code

1) The “Default.aspx” page contains a JavaScript method for calling the web method from the “Service1.svc”.

2) We use the “$.ajax()” method from JQuery to asynchronously call the web method.

 function LoadAndExecuteDynamicJS(src1) { 
          
         $.ajax({ 
             type: "POST", 
             url: "Service1.svc/LoadScript", 
             data: JSON.stringify({ source: src1 }), 
             contentType: "application/json; charset=utf-8", 
             dataType: "json", 
             success: function (msg) { 
                 //document.getElementById("ResultId").innerHTML = msg.d; 
                 // document.write(msg.d); 
                 var head = document.getElementsByTagName('head')[0]; 
                 var script = document.createElement('script'); 
                 script.type = 'text/javascript'; 
                 script.src = msg.d; 
                 head.appendChild(script); 
                 alert('Script loaded'); 
  
                 // Do something interesting here. 
             } 
         }); 
     } 

3) The parameter to the service is the name of the script that is to be linked on demand.

4) We call the “Hello()” method from the dynamically loaded script as usual JavaScript method.