EMBED JAVASCRIPT FILE IN ASP .NET ASSEMBLY
PREFACE
With the release of ASP .NET 2.0 AJAX AJAX AJAX
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 AJAX
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.
Select “Add Reference…” from Project Menu and add reference to “System.Web” assembly.
Open “AssemblyInfo.cs” file and add following two lines at the end of file.
AssemblyInfo.cs
[assembly: System.Web.UI.WebResource("ClientControlLibrary.clientcontrol1.js", "text/javascript")]
[assembly: System.Web.UI.WebResource("ClientControlLibrary.clientcontrol2.js", "text/javascript")]
Setting this attribute tell that embedded file is a web resource so it can be invoked from ASP .NET web form.
First argument is the qualified name of resource file starting with namespace name. In our case which is “ClientControlLibrary.clientcontrol1.js” and “ClientControlLibrary.clientcontrol2.js”.
Second argument is type of web resource. In our case which is “text/javascript”
Build solution from build menu.
DEVELOPING WEBSITE
Create a new website in Visual Studio
Add reference to “ClientControlLibrary.dll” which we have developed in previous section.
Open “default.aspx” and add one “ScriptManager” from tool box.
Modify the “ScriptManager” control in source view of “default.aspx” as follow.
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="ClientControlLibrary"
Name="ClientControlLibrary.clientcontrol1.js" />
Scripts>
asp:ScriptManager>
Above markup dynamically add reference to “clientcontrol1.js“ of “ClientControlLibrary” assembly.
Add following attribute in the body tag of page.
<body onload="hello()">
Press Ctrl + F5 to view page in browser.
You can show the execution of function hello() of clientcontrol1.js.
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.
<body onload="hello()">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="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.
Open firefox and open firebug window from tool menu
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.)
Regards,
Nandip Makwana
