I've got a little something I'm doing and I wanted to take control over some scripts that were being added by ASP.NET WebForms. Remember that ASP.NET WebForms is designed around a control/component model, so you don't get 100% control over your markup. When you drag a control onto the page in WebForms, you expect it to work.
ScriptManager Basics
For example, if I'm going to do so stuff with GridView and an UpdatePanel, I might do this:
and this will cause some Web- and ScriptResources to be added to the generated HTML of my page, something like this:
Basically, ScriptResource.axd?d=blob&t=timestamp...these are JavaScript files that you don't need to deploy as they live inside the assemblies. They are managed by the ScriptManager tag/control in my source above.
Overriding ScriptResource and Hosting Static JavaScript Files
However, I might want to put them in static files and manage them myself. I can override their paths like this:
This will give me HTML like this:
NOTE: There're a few controls that don't use the ScriptManager, so they can't have their JavaScript suppressed. So far the Validators are the main culprits. I'm talking to the team and we'll see if we can't get that fixed in 4.0.
NEW IN 4.0: In 3.5 you also can't use the ScriptManager to suppress or set the path of WebResource.axd, but in 4.0 you will be able to by using ScriptReference. WebResource.axd is for non-Ajax scripts that use the Page.ClientScript.RegisterX APIs. It'll be nice to be able to use ScriptReference as the ScriptManager is smarter and gzip compresses as well.
In .NET 4.0 using the ScriptManager to suppress both ScriptResource and WebResource will allow you to get your pages down to a single script. We're looking also at a CDN (Content Distribution Network) option to get that static script hosted elsewhere as well. I'll show Script Combining in a second.
The name="" attribute has to line up with the name of the resource the script is stored in. I used Reflector to figure them out. There's a few like MicrosoftAjaxTimer.js, MicrosoftAjax.js, MicrosoftAjaxWebForms.js in System.Web.Extensions, and DetailsView.js, Focus.js, GridView.js, Menu.js, SmartNav.js, TreeView.js, WebForms.js, WebParts.js and WebUIValidation.js in System.Web.dll.
Remember, these ARE NOT ALL NEEDED. You only want these on an as-needed basis. When a control needs one, it'll ask for it. Just do a view-source on your resulting HTML and take control of the ones you want.
ScriptCombining in 3.5 SP1
Now, if I want to combine those 3 scripts into one, I can do this:
I've wrapped the scripts in a CompositeScript control and I get a single GZipped automatically combined script. I'll save that combined script away and host it at http://www.example.com/1.js statically. Now, I'll add the path attribute:
While not a direct feature of .NET 3.5, I'm able to greatly reduce the number of scripts and take control using a few simple techniques.
ScriptManager and CDNs in .NET 4.0
In .NET 4.0 we're trying to make this more formal and possibly get the page down to a single script that's hostable on a CDN. That will probably look something like this. Just enable CDN (Content Delivery Network) and all your ASP.NET Ajax scripts will come from a CDN that you can configure in global.asax once:
Pretty slick, and nicer than my hacks. For 4.0, the goal is for this to work with ScriptResource AND WebResource making your scripts quite tidy.