[tips ‘n’ tricks] Storing javascript code in an external file using asp net web forms

It’s a best practice storing scripts like js, or css, in an external file, the only exception to this rule is for lightweight script specific for a page like the following example:

$(function() {
alert('do something');
});

in the other cases the external file is the best choice for scalability, maintainability, degradability of your code. Asp.Net Web Forms is not supports the special grapheme ~ for including external file .js using tag <script></script>.

The Visual Studio compilator not signs this syntax like an error or like a warning:
<script type=”text/javascript” src=”~/Scripts/jquery-1.4.1.min.js”></script>

But running our appliaction on Cassini we have this run-time error: $ undefined.

How can we solve this problem?

We have many ways to solve the problem with advantages and disadvantages.

Solution nr. 1 : using absolute path

Using syntax: <script src=”/Scripts/jquery-1.4.1.min.js” type=”text/javascript”></script> the script is include correctly.

This are the advantages:

1. Standard HTML code
2. Easy solution

This is the disadvantage:

1. If the root of your application is different when will deploy it, the problem will not to be resolve.

Solution nr. 2: resolve the script with ResolveUrl

ResolveUrl is a method (of namespace System.Web.UI), supported by .Net Framework 1.0,  for converting a URL into one that is usable on the requesting client. We can solve, therefore, our problem with follow syntax:

<script src='<%=  ResolveUrl(“~/Scripts/jquery-1.4.1.min.js”) %>’ type=”text/javascript”></script>

the advantages of this choice are:

1. easy solution
2. solution indipendent by root of application

the disadvantage is that the solution is not a standard and performances of the page decrease because we are using server function inside a client declaration.

Solution nr. 3 : using ASP-NET Ajax

ScriptManager is the first aspnet control inside a web page. For MSDN It manages ASP.NET Ajax script libraries and script files, partial-page rendering, and client proxy class generation for Web and application services. We can use it for all application that we have written with MS Framework 3.0+ based on Asp.Net Ajax technology.

Using ScriptManager control we can solve our problem with this markup:

<form runat="server">
<asp:ScriptManager ID="sm1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.4.1.min.js" />
</Scripts>
</asp:ScriptManager>
<script type="text/javascript">
$(function () {
alert('Do something');
});
</script>

//

It’s a best practice (only for internet applications)  add commons libraries, like jQuery core, from a web repository. With ASP.NET 4.0 we can do this with simple two steps.

1. Insert this code into the section Application_Start of Global.asax.cs

void Application_Start(object sender, EventArgs e)
{
// map a simple name to a path
ScriptManager.ScriptResourceMapping.AddDefinition("jQuery", new ScriptResourceDefinition
{
Path = "http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.1.min.js",
DebugPath = "http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.1.js"
});

}

2. Change the script manager mark up with this declaration:


<form runat="server">
<asp:ScriptManager ID="sm1" runat="server">
<Scripts>
<asp:ScriptReference Name="jQuery" />
</Scripts>
</asp:ScriptManager>
<script type="text/javascript">
$(function () {
alert('Do something');
});
</script>


the advantage of this solution is the easy implementation on asp.net ajax web application. The disadvantage is that the ScriptManager load many libraries and than the page will be heavier than simple HTML page.

The CDN solution not working if your application is an intranet asp net project with some with limitations in web surfing.

rien ne va plus and happy coding  =)