EMBED JAVASCRIPT FILE IN ASP .NET ASSEMBLY

PREFACE

With the release of ASP .NET 2.0 AJAX Extensions 1.0, building AJAX application with .NET technology is quite easier without writing single line of JavaScript. But still if we want to develop rich AJAX application then coding in JavaScript is must for greater control over the application.

In this article, I will explain how to embed JavaScript file in Assembly and how to invoke this embedded file from ASP .NET web form. This technique is useful when we have developed multiple client control. At such scenario we can embed all these client control in one assembly and we can invoke only necessary client control from ASP .NET web form which is used in that particular ASP .NET web form.

If you are using Visual Studio 2005 or .NET framework 2.0, you need to install “ASP .NET 2.0 AJAX Extensions 1.0” which can be downloaded from www.asp.net. If you are using Visual Studio 2008 or .NET framework 3.5, you can directly proceed to the example because AJAX extensions are part of .NET framework 3.5.

I am using Visual Studio 2008 and C# in this article example

In this article example, we will embed two JavaScript file in assembly and invoke this two file from different ASP .NET web form. Following are the step to achieve.

DEVELOPING ASSEMBLY

Create a new Class Library project in visual studio named “ClientControlLibrary”

Delete “Class1.cs” by right clicking class1.cs in solution explorer and selecting delete from context menu because in our example we only want to embed JavaScript file in assembly.

Add two JavaScript file by selecting “Add New Item…” from Project menu.

Give appropriate name. In our example, we will give clientcontrol1.js and clientcontrol2.js.

Now we can put client side logic in both added file. For purpose of explaining topic we will just implement simple function which display alert dialogue box in browser. Code for the same is as below.

clientcontrol1.js

function hello()

{

alert('Hello Developer. This function is called from clientcontrol1.js');

}

clientcontrol2.js

function hello()

{

alert('Hello Developer. This function is called from clientcontrol2.js');

}

We have implemented client side logic in both client controls. Now its time to configure our project so both file can be embedded in assembly.

To achieve this select clientcontrol1.js in solution explorer and open properties window by pressing F4

And set “Build Action” property value to “Embedded Resource” as shown in figure - 3. Setting “Build Action” value to “Embedded Resource” tell compiler that embed this file as a resource in assembly.

Also set “Build Action” property to “Embedded Resource” for clientcontrol2.js in same way.

Up to this we have embedded file in assembly. But still our work is not completed. To invoke this file from ASP .NET we need to set attributes of assembly in “AssemblyInfo.cs”

First of all add reference to “System.Web” assembly since we want to invoke embedded file from ASP .NET web form.

The thing to be noticed here is that page “default.aspx” is referencing only “clientcontrol1.js” but not both “clientcontrol1.js” and “clientcontrol2.js”. We will examine this fact in debugging section which I will cover later in this article.

We can reference zero or more file in one page.

Add another web form named “Default2.aspx” in website and modify page markup as follow. In this page we will reference clientcontrol2.js.

<bodyonload="hello()">

<asp:ScriptManagerID="ScriptManager1"runat="server">

<Scripts>

<asp:ScriptReferenceAssembly="ClientControlLibrary"

Name="ClientControlLibrary.clientcontrol2.js"/>

Scripts>

asp:ScriptManager>

Press Ctrl + F5 to view page in browser.

You can show the execution of hello() of clientcontrol2.js.

In the same way as “default.aspx”, “default2.aspx” is also referencing only “clientcontrol2.js” but not both.

DEBUGGING

We have practically performed core aspect of the article. But how can we check that “default.aspx” is referencing only “clientcontrol1.js” and “default2.aspx” is referencing only “clientcontrol2.js”? This section deals with to prove above fact.

I am using firebug for “Mozilla Firefox” to debug website.

We will debug only “default.aspx”. I have left “default2.aspx” for the reader.

Navigate to the website we have created in last section. Now select Net tab in firebug. You can find something similar to as shown in figure – 8

Expand each node. One of node will show the code of clientcontrol1.js as a response text as shown in figure – 9.

Examining each node will show that only clientcontrol1.js is referenced from “default.aspx”. You can check same for “default2.aspx” also.

CONCLUSION

Embedding JavaScript in assembly can result in great flexibility and more secure than placing separate JavaScript file on the web server due to following reason.

We can dynamically reference to only JavaScript file which is necessary in particular ASP .NET web form.

Placing separate JavaScript file on the web server can reveal the path of JavaScript file and in most case one can download file from server. (However, one can see and download embedded file from server by using tool such as firebug as we have seen in previous section. But embedding file can give more security than placing separate file on server. Because web resource and script resource are depended on viewstate field. And these resources are not always available after the end of session.)

Resources & Tools

About Nandip Makwana

Nandip Makwana is passionate about digital world and web. He completed his Masters in Computer Application in June 2011. Currently he is working as a Software Engineer. He has shown great promise and command over ASP.NET and technologies surrounding it during his academic years and professorial life...continue reading