Setting up jQuery for ASP.NET Web Forms projectsPosted: March 28, 2009
During my recent presentation to the Victoria.NET DevSIG on jQuery, I talked about how to get started using jQuery with ASP.NET Web Forms projects. Part of this was around how I like to set up my projects with jQuery to take advantage of the script management features that ASP.NET & Visual Studio 2008 provide out of the box.
<asp:ScriptManager runat="server"> <Scripts> <asp:ScriptReference Path="~/script/myScript.js" ScriptMode="Inherit" /> </Scripts> </asp:ScriptManager>
So we have three file types in all as follows:
- Release mode file: myscript.js
- Debug mode file: myscript.debug.js
- VSDoc file: myscript-vsdoc.js
When you download jQuery, you have the option of the standard file (jquery-1.3.2.js at time of writing) as well as the “production” file, which is minimised (jquery-1.3.2.min.js). Microsoft have also contributed a VSDoc file which you can download from the official jQuery source repository on Google Code.
So there are three types of jQuery files that match up with what ASP.NET & Visual Studio support, just two of them have the wrong extension. All we need to do is rename the files to match the features in the platform & tools:
- jquery-1.3.2.js => jquery-1.3.2.debug.js
- jquery-1.3.2.min.js => jquery-1.3.2.js
I have this files in a location on my hard drive where I can always get to them for new projects:
To use them in a project, just create a folder to hold them and right-click in solution explorer and choose Add –> Existing Item…
Now simply add a script reference for the jQuery files in the same way as you would for your own script. ASP.NET will use the large debug version when the app is in debug mode & the minimised version when it isn’t, plus you’ll get great IntelliSense support from Visual Studio 2008:
<asp:ScriptManager runat="server"> <Scripts> <asp:ScriptReference Path="~/script/jquery-1.3.2.js" ScriptMode="Inherit" /> <asp:ScriptReference Path="~/script/myScript.js" ScriptMode="Inherit" /> </Scripts> </asp:ScriptManager>
It would be nice if the next version of ASP.NET included support for jQuery’s default file extensions in the ScriptManager control, but until then this works very well.