ASP.NET 4.5 ScriptManager Improvements in WebForms

ASP.NET 4.5 ScriptManager Improvements in WebForms

Rate This
  • Comments 20

The ScriptManger control has undergone some key targeted changes in ASP.NET 4.5 which makes it easier to register, manage and combine scripts using the ASP.NET weboptimization feature. This post will highlight the changes that have happened to this control

Easy Integration with JQuery and JQueryUI

The default templates for WebForms ship with the following packages “AspNet.ScriptManager.jQuery” and “AspNet.ScriptManager.jQuery.UI.Combined”. These packages make it easier to bring in jquery and jqueryUI libraries  and also register them with the ScriptManager. Here is how it works.

These packages add the following ScriptMappings for jquery and jqueryUI in the PreApplicationStart method of the application


string str = "1.7.1";
    ScriptManager.ScriptResourceMapping.AddDefinition("jquery", new ScriptResourceDefinition
        Path = "~/Scripts/jquery-" + str + ".min.js", 
        DebugPath = "~/Scripts/jquery-" + str + ".js", 
        CdnPath = "" + str + ".min.js", 
        CdnDebugPath = "" + str + ".js", 
        CdnSupportsSecureConnection = true, 
        LoadSuccessExpression = "window.jQuery"


string str = "1.8.20";
    ScriptManager.ScriptResourceMapping.AddDefinition("jquery.ui.combined", new ScriptResourceDefinition
        Path = "~/Scripts/jquery-ui-" + str + ".min.js", 
        DebugPath = "~/Scripts/jquery-ui-" + str + ".js", 
        CdnPath = "" + str + "/jquery-ui.min.js", 
        CdnDebugPath = "" + str + "/jquery-ui.js", 
        CdnSupportsSecureConnection = true


These SciptMappings are registered with ScriptManager as follows

<asp:ScriptManager runat="server">
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="jquery.ui.combined" />            


Now you can enjoy all the benefits of having ScriptManager such as

Debug/Release Support

If you are debugging your application(debug=true) in web.config then ScriptManager will serve the scripts from debug path(non minified scripts) such as “~/Scripts/jquery-1.7.1.js”

CDN Support

If your set EnableCDN=true on the ScriptManager control, then all the Scripts will be served from the CDN path such as “

Override Script Mappings

Let’s assume that you wanted to override the scriptmappings to change the CDN path where these scripts are served from. You can do so by changing the scriptmapping before the page is accessed. Typically doing this in Global.asax is better

string str = "1.7.1";
    ScriptManager.ScriptResourceMapping.AddDefinition("jquery", new ScriptResourceDefinition
        Path = "~/Scripts/jquery-" + str + ".min.js", 
        DebugPath = "~/Scripts/jquery-" + str + ".js", 
        CdnPath = ""+ str + ".min.js", 
        CdnDebugPath = ""+ str + ".js", 
        CdnSupportsSecureConnection = true


Updating Jquery/JqueryUI libraries

Let’s say a new version of Jquery or JqueryUI comes along. Traditionally you would have to download the jquery packages for these libraries and then update the script references everywhere on your pages. With the above integration of AspNet.ScriptManager.Jquery packges this scenario really becomes easy since when you update Jquery/JqueryUI you will get corresponding versions of AspNet.ScriptManager.Jquery/AspNet.ScriptManager.Jquery.UI which will update the scriptmappings to the current version of jquery that was downloaded and you do not have to change anything in your application


This is a new property which is added to the ScriptMapping and it takes care of the following use case. Imagine that you are serving your scripts from a CDN path and if there is an outage in the CDN, your site will be affected because you will not be able to serve any scripts. This property takes in an expression which evaluates whether the script was loaded correctly and if it fails then it renders the script from the local application path.

Following is how the script tag looks like for jquery(assuming that you are serving scripts from CDN)

<script src="" type="text/javascript"></script>
<script type="text/javascript">
(window.jQuery)||document.write('<script type="text/javascript" src="Scripts/jquery-1.8.1.js"><\/script>');//]]>


Remapping Framework scripts

One neat improvement that happened in ASP.NET 4.5 is the decoupling of the “Microsoft Ajax script files(MicrosoftAjaxCore etc)” and the WebForms scripts(GridView.js etc). We did the work in this release so you can serve these scripts from your application Scripts folder rather than load then up from System.Web This makes the scripts easily redistributable and updateable. The following section explains on how you can use these scripts and combine them with WebOptimization feature

Serving Framework Scripts from inside the application

We created the following 2 packages “Microsoft.AspNet.ScriptManager.MSAjax” “Microsoft.AspNet.ScriptManager.WebForms” which do the following

Install the Scripts into your application so it looks like follows


These packages also create the following scriptmappings so that they can be registered with ScriptManager as follows

MicrosoftAjax scripts

We are registering all the scripts and we are bundling them together as “MsAjaxBundle”

ScriptManager.ScriptResourceMapping.AddDefinition("MsAjaxBundle", new ScriptResourceDefinition
        Path = "~/bundles/MsAjaxJs", 
        CdnPath = "", 
        LoadSuccessExpression = "window.Sys", 
        CdnSupportsSecureConnection = true
    PreApplicationStartCode.AddMsAjaxMapping("MicrosoftAjax.js", "window.Sys && Sys._Application && Sys.Observer");
    PreApplicationStartCode.AddMsAjaxMapping("MicrosoftAjaxCore.js", "window.Type && Sys.Observer");
    PreApplicationStartCode.AddMsAjaxMapping("MicrosoftAjaxGlobalization.js", "window.Sys && Sys.CultureInfo");
    PreApplicationStartCode.AddMsAjaxMapping("MicrosoftAjaxSerialization.js", "window.Sys && Sys.Serialization");
    PreApplicationStartCode.AddMsAjaxMapping("MicrosoftAjaxComponentModel.js", "window.Sys && Sys.CommandEventArgs");
    PreApplicationStartCode.AddMsAjaxMapping("MicrosoftAjaxNetwork.js", "window.Sys && Sys.Net && Sys.Net.WebRequestExecutor");
    PreApplicationStartCode.AddMsAjaxMapping("MicrosoftAjaxHistory.js", "window.Sys && Sys.HistoryEventArgs");
    PreApplicationStartCode.AddMsAjaxMapping("MicrosoftAjaxWebServices.js", "window.Sys && Sys.Net && Sys.Net.WebServiceProxy");
    PreApplicationStartCode.AddMsAjaxMapping("MicrosoftAjaxTimer.js", "window.Sys && Sys.UI && Sys.UI._Timer");
    PreApplicationStartCode.AddMsAjaxMapping("MicrosoftAjaxWebForms.js", "window.Sys && Sys.WebForms");
    PreApplicationStartCode.AddMsAjaxMapping("MicrosoftAjaxApplicationServices.js", "window.Sys && Sys.Services");

Here is the Bundle definition for these scripts

bundles.Add(new ScriptBundle("~/bundles/MsAjaxJs").Include(


Here is the ScriptManger registration for these scripts

<asp:ScriptManager runat="server" >
            <%--Framework Scripts--%>
            <asp:ScriptReference Name="MsAjaxBundle" />
            <%--Site Scripts--%>


WebForms scripts

We are registering all the scripts and we are bundling them together as “WebFormsBundle”

ScriptManager.ScriptResourceMapping.AddDefinition("WebFormsBundle", new ScriptResourceDefinition
        Path = "~/bundles/WebFormsJs", 
        CdnPath = "", 
        LoadSuccessExpression = "window.WebForm_PostBackOptions", 
        CdnSupportsSecureConnection = true


Bundle Definition

bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include(


ScriptManager registration

The reason we have the Assembly and the Path attribute here is because ScriptManager special cases these scripts when it tries to load them, so we had to make some special arrangements with ScriptManager code to make this work Smile This is a process which is called deduping. Basically when the ScriptManager tried to load up these scripts, it can load them up from System.Web or the path attribute and eventually in this case, the ScriptManager dedupes the script references and serves the scripts from the path attribute. This is part of the “special arrangement” that we did in ScriptManager. We were very cautious when doing this given this code path was on a very critical path for mainline ScriptManager scenarios which we did not want to regress.

<asp:ScriptManager runat="server" >
            <%--Framework Scripts--%>
            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
            <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
            <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
            <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
            <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
            <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
            <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
            <asp:ScriptReference Name="WebFormsBundle" />
            <%--Site Scripts--%>


When you run this page you will get script references as follows

<script src="/bundles/MsAjaxJs?v=J4joXQqg80Lks57qbGfUAfRLic3bXKGafmR6wE4CFtc1" type="text/javascript"></script>
<script src="/bundles/WebFormsJs?v=q9E9g87bUDaS624mcBuZsBaM8xn2E5zd-f4FCdIk2cA1" type="text/javascript"></script>
    <script type="text/javascript">


So these were the improvements that happened in the ScriptManager control for registering scripts. In case you want to refresh your memory, ScriptManager was greatly enhanced in ASP.NET v4.0 and Dave Reed had a fantastic post about it, which I strongly recommend to go through.

This is cross posted on

Leave a Comment
  • Please add 7 and 1 and type the answer here:
  • Post
  • Good Article.

  • We're trying to deploy a site to a new server, for some reason the script bundle references return a 404, ie /bundles/MsAjaxJs?v=J4joXQqg80Lks57qbGfUAfRLic3bXKGafmR6wE4CFtc1 can't be referenced.

    The site runs fine locally, we only see the issue when trying to deploy, is there something we have to configure on the site specifically in IIS?

  • @LJ: The reason you may get that error is if the scripts are not present in the Scripts folder in the published website. Was publishing successful without any errors or warnings ?

  • Still no support for including scripts in a page without a server form?

    Probably 70% of my WebForms pages don't need a server form, but none of the registered scripts get included in the page if I don't have one.

  • Nice post...

  • NIce

  • Great post indeed. I really like that you are providing information on .NET for freshers , Being enrolled  at i found your information very helpful indeed. Thanks for it.

  • Very good blog. It helps me alot. I found one website Which is also very good site for the developers.

    Please continue the script updates.


  • What does this even do?  How do you include a script?

  • You guys keep changing the methodology so many times - it gets really confusing! Let me guess - .NET 5.0 is going to introduce entirely new approach to better handle popular 3rd party client side frameworks? Your show us how to do it in every so new way without real explanation of benefits and migration path.

  • This is the worst explanation ever. How do I add a reference to the thing? I am trying to add jquery ui, and it seems I've looked in 4 different files and cannot piece it together... seems like duct tape to me.

  • Hey Ben, it seems like you and I are doing the same thing and I am pretty sure I just figured out how to make JQueryUI work in VS2013 ASP.NET WebForms via NuGet and ScriptManager. For some reason, the latest (2015Feb) VS2013 ASP.NET template doesn't have JQueryUI included. I played around with this for hours since yesterday and I believe I got it working within the MS coding format.

    So I think the first step is to download the JQueryUI package from NuGet. This NuGet download action adds an entry for JQueryUI in the packages.config file in the root of the project. That entry creates the package id of "jQuery.UI.Combined" which is apparently not case sensitive.

    Then I added code at the beginning of the Application_Start method in the global.asax.cs file in order to create a ScriptManager mapping for "jquery.ui.combined". This mapping is very similar to the code on this MS Blog page that associates the values Path, DebugPath, CdnPath, CdnDebugPath, and CdnSupportsSecureConnection with path values for JQuery UI. In other words, this tells your app where the JQuery files are located in your project and on the internet.

    I also altered this code with a "jqueryuiversion" string variable so I can manually update it to the latest JQueryUI version whenever I download an updated JQueryUI package from NuGet into Visual Studio. Apparently, MS has internal ASP.NET code that does this automatically for JQuery.

    After inserting this code into global.asax.cs, I was then able to add an entry into the <asp:ScriptManager control on the master page of my project. This entry is the following code: "<asp:ScriptReference Name="jquery.ui.combined" />"   I put this entry right after the "jquery" ScriptReference in case the order is important since JQueryUI is obviously dependent upon having JQuery installed.

    Also, I tried to get VS2013 to automatically add the JQueryUI css style theme by creating an entry in the BundleConfig.cs file for the JQueryUI styles, but I don't think I got this working because my JQuery DatePicker didn't have a theme style when it ran, althought it did run without an error. But I was able to use a JQueryUI theme by adding a stylesheet link on the page where I put my JQueryUI DatePicker. In other words, I added the theme manually to the page where my JQueryUI DatePicker is located using the following code "<link rel="stylesheet" href="//">" in the head of the aspx page. This is obviously a hack, so I need to figure out how to get a theme bundled into VS2013.

    I will subject add a code listing for everything I did to this Blog in a few minutes. I will also comment that I am probably considered to be an above average coder, especially since I used to work at MS in Redmond, but I am not an ASP.NET expert, so it took me some time to figure this out. I am guessing an average coder would have a lot of trouble figuring this out.

  • I had a couple typos in my previous post: 3rd paragraph "JQuery" should be "JQueryUI", and in the last paragraph, "subject add" should be "submit". (I am on a tight schedule right now)

    The following code snippets and coding actions are how I got JQueryUI to work in VS2013 ASP.NET WebForms using the ScriptManager and NuGet. Hopefully, I won't leave anything out since I am typing this very fast:

    Step One:

    Download JQueryUI Combined from Nuget into VS2013. This installs JQueryUI package(s) into the project and puts the following code entry in the packages.config file in the root of my project

    <package id="jQuery.UI.Combined" version="1.11.2" targetFramework="net451" />

    NuGet put this line of code right after the JQuery package, which possibly indicates that JQueryUI is dependent upon JQuery

    Step Two:

    I added the following code at the top of the Application_Start method in the global.asax.cs file in the root of my project

    string jqueryuiversion = "1.11.2";

    ScriptManager.ScriptResourceMapping.AddDefinition( "jquery.ui.combined", new ScriptResourceDefinition


    Path = "~/Scripts/jquery-ui-" + jqueryuiversion + ".min.js",

    DebugPath = "~/Scripts/jquery-ui-" + jqueryuiversion + ".js",

    CdnPath = "" + jqueryuiversion + "/jquery-ui.min.js",

    CdnDebugPath = "" + jqueryuiversion + "/jquery-ui.js",

    CdnSupportsSecureConnection = true


    I put this code in the Application_Start method because this might be the first (timewise) place where I can insert code into my project. In the future, I will need to remember to manually change the string "1.11.2" to match whatever future version of JQueryUI that I download. This code tells my project where the JQueryUI files are physically located.

    Step Three:

    I added the following code in the <asp:ScriptManager runat="server" control  right after the "jquery" reference code in my project site.master file:

    <asp:ScriptReference Name="jquery.ui.combined" />

    Adding this entry to the ScriptManager control causes ScriptManager to load JQueryUI into my output HTML page. I know this works because I used FireBug (FireFox browser) to see which scripts are loaded on my HTML page.

  • Step Four:

    I added the following code to the RegisterBundles method in the BundleConfig.cs file to get JQueryUI to use its styles, and a style theme:

    bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(













    However, this code entry does not seem to work completely, because I didn't get a style theme.

    Step Five:

    Since I already know how to code JQuery and JQueryUI pretty well in an HTML/Javascript/CSS page environment, I use the following code on my ASP.NET aspx page at the top of the <asp:BodyContent placeholder in order to test JQueryUI in my ASP.NET app:

    <script type="text/javascript">

    $( document ).ready( function( )


    $( "#datepicker" ).datepicker( );



    The dollar sign symbol in this code is interpreted as "JQuery" because that's how JQuery works. And the #datepicker string identifies the following HTML element on my ASP.NET aspx page:

    <p>Date: <input type="text" id="datepicker"></p>

    The code that I am using on my aspx page, to test my JQueryUI install, is very similar to the JQueryUI sample code for DatePicker as shown on the JQueryUI website.

    Step Six:

    As I said above: I had to add the following line of code on my aspx page, in the Head section, to choose and show a JQueryUI DatePicker theme:

    <link rel="stylesheet" href="//">

    This line of code is a hack since I am pulling the theme from the jquery internet server instead of using the MS CDN system as built into ASP.NET. I might need to play with the ASP.NET Bundle styles system to get this to work in VS2013. Also, the JQueryUI Combined NuGet download only includes one default theme, which I probably don't want to use anyway. So I need to figure out how to install the theme I want from NuGet.

  • Hi Steve - thanks for posting your method.   If it helps... you can add

    <include path="~/Content/themes/base/all.css" /> in Bundle.config to save adding all the CSS refs within your webpage.  The all.css does what is says- loads all the base CSS for jqueryui



Page 1 of 2 (20 items) 12