{"id":2164,"date":"2012-09-21T02:08:00","date_gmt":"2012-09-21T02:08:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/webdev\/2012\/09\/21\/asp-net-4-5-scriptmanager-improvements-in-webforms\/"},"modified":"2022-08-10T06:16:31","modified_gmt":"2022-08-10T13:16:31","slug":"asp-net-4-5-scriptmanager-improvements-in-webforms","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/asp-net-4-5-scriptmanager-improvements-in-webforms\/","title":{"rendered":"ASP.NET 4.5 ScriptManager Improvements in WebForms"},"content":{"rendered":"

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<\/a> feature. This post will highlight the changes that have happened to this control<\/p>\n

Easy Integration with JQuery and JQueryUI<\/h2>\n

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

These packages add the following ScriptMappings<\/a> for jquery and jqueryUI in the PreApplicationStart<\/a> method of the application<\/p>\n

JQuery<\/h3>\n
\n
\n
string<\/span> str = \"1.7.1\"<\/span>;<\/pre>\n
<\/p>\n
    ScriptManager.ScriptResourceMapping.AddDefinition(\"jquery\"<\/span>, new<\/span> ScriptResourceDefinition<\/pre>\n
<\/p>\n
    {<\/pre>\n
<\/p>\n
        Path = \"~\/Scripts\/jquery-\"<\/span> + str + \".min.js\"<\/span>, <\/pre>\n
<\/p>\n
        DebugPath = \"~\/Scripts\/jquery-\"<\/span> + str + \".js\"<\/span>, <\/pre>\n
<\/p>\n
        CdnPath = \"http:\/\/ajax.aspnetcdn.com\/ajax\/jQuery\/jquery-\"<\/span> + str + \".min.js\"<\/span>, <\/pre>\n
<\/p>\n
        CdnDebugPath = \"http:\/\/ajax.aspnetcdn.com\/ajax\/jQuery\/jquery-\"<\/span> + str + \".js\"<\/span>, <\/pre>\n
<\/p>\n
        CdnSupportsSecureConnection = true<\/span>, <\/pre>\n
<\/p>\n
        LoadSuccessExpression = \"window.jQuery\"<\/span><\/pre>\n
<\/p>\n
    });<\/pre>\n
<\/div>\n<\/div>\n
JQuery.UI<\/h3>\n
\n
\n
string<\/span> str = \"1.8.20\"<\/span>;<\/pre>\n
<\/p>\n
    ScriptManager.ScriptResourceMapping.AddDefinition(\"jquery.ui.combined\"<\/span>, new<\/span> ScriptResourceDefinition<\/pre>\n
<\/p>\n
    {<\/pre>\n
<\/p>\n
        Path = \"~\/Scripts\/jquery-ui-\"<\/span> + str + \".min.js\"<\/span>, <\/pre>\n
<\/p>\n
        DebugPath = \"~\/Scripts\/jquery-ui-\"<\/span> + str + \".js\"<\/span>, <\/pre>\n
<\/p>\n
        CdnPath = \"http:\/\/ajax.aspnetcdn.com\/ajax\/jquery.ui\/\"<\/span> + str + \"\/jquery-ui.min.js\"<\/span>, <\/pre>\n
<\/p>\n
        CdnDebugPath = \"http:\/\/ajax.aspnetcdn.com\/ajax\/jquery.ui\/\"<\/span> + str + \"\/jquery-ui.js\"<\/span>, <\/pre>\n
<\/p>\n
        CdnSupportsSecureConnection = true<\/span><\/pre>\n
<\/p>\n
    });<\/pre>\n
<\/div>\n<\/div>\n
 <\/p>\n
These SciptMappings are registered with ScriptManager as follows<\/p>\n
\n
\n
<asp:ScriptManager runat=\"server\"<\/span>><\/pre>\n
<\/p>\n
        <Scripts><\/pre>\n
<\/p>\n
            <asp:ScriptReference Name=\"jquery\"<\/span> \/><\/pre>\n
<\/p>\n
            <asp:ScriptReference Name=\"jquery.ui.combined\"<\/span> \/>            <\/pre>\n
<\/p>\n
        <\/Scripts><\/pre>\n
<\/p>\n
    <\/asp:ScriptManager><\/pre>\n
<\/div>\n<\/div>\n
 <\/p>\n
Now you can enjoy all the benefits of having ScriptManager such as<\/p>\n
Debug\/Release Support<\/h3>\n
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”<\/p>\n
CDN Support<\/h3>\n
If your set EnableCDN=true on the ScriptManager control, then all the Scripts will be served from the CDN path such as “http:\/\/ajax.aspnetcdn.com\/ajax\/jquery-1.7.1.js<\/a>”<\/p>\n
Override Script Mappings<\/h3>\n
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<\/p>\n
\n
\n
string<\/span> str = \"1.7.1\"<\/span>;<\/pre>\n
<\/p>\n
    ScriptManager.ScriptResourceMapping.AddDefinition(\"jquery\"<\/span>, new<\/span> ScriptResourceDefinition<\/pre>\n
<\/p>\n
    {<\/pre>\n
<\/p>\n
        Path = \"~\/Scripts\/jquery-\"<\/span> + str + \".min.js\"<\/span>, <\/pre>\n
<\/p>\n
        DebugPath = \"~\/Scripts\/jquery-\"<\/span> + str + \".js\"<\/span>, <\/pre>\n
<\/p>\n
        CdnPath = \"http:\/\/code.jquery.com\/jquery-\"<\/span>+ str + \".min.js\"<\/span>, <\/pre>\n
<\/p>\n
        CdnDebugPath = \"http:\/\/code.jquery.com\/jquery-\"<\/span>+ str + \".js\"<\/span>, <\/pre>\n
<\/p>\n
        CdnSupportsSecureConnection = true<\/span><\/pre>\n
<\/p>\n
    });<\/pre>\n
<\/div>\n<\/div>\n
 <\/p>\n
Updating Jquery\/JqueryUI libraries<\/h3>\n
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<\/p>\n
LoadSuccessExpression<\/h2>\n
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.<\/p>\n
Following is how the script tag looks like for jquery(assuming that you are serving scripts from CDN)<\/p>\n
\n
\n
<script src=\"http:\/\/ajax.aspnetcdn.com\/ajax\/jQuery\/jquery-1.8.1.js\"<\/span> type=\"text\/javascript\"<\/span>><\/script><\/pre>\n
<\/p>\n
<script type=\"text\/javascript\"<\/span>><\/pre>\n
<\/p>\n
\/\/<![CDATA[<\/span><\/pre>\n
<\/p>\n
(window.jQuery)||document.write('<script type=\"text\/javascript\" src=\"Scripts\/jquery-1.8.1.js\"><\/script>'<\/span>);\/\/]]><\/span><\/pre>\n
<\/p>\n
<\/script><\/pre>\n
<\/div>\n<\/div>\n
 <\/p>\n
Remapping Framework scripts<\/h2>\n
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<\/p>\n
Serving Framework Scripts from inside the application<\/h3>\n
We created the following 2 packages “Microsoft.AspNet.ScriptManager.MSAjax<\/a>” “Microsoft.AspNet.ScriptManager.WebForms<\/a>” which do the following<\/p>\n
Install the Scripts into your application so it looks like follows<\/p>\n
\"fxscripts\"<\/a><\/p>\n
These packages also create the following scriptmappings so that they can be registered with ScriptManager as follows<\/p>\n
MicrosoftAjax scripts<\/h3>\n
We are registering all the scripts and we are bundling them together as “MsAjaxBundle”<\/p>\n
\n
\n
ScriptManager.ScriptResourceMapping.AddDefinition(\"MsAjaxBundle\"<\/span>, new<\/span> ScriptResourceDefinition<\/pre>\n
<\/p>\n
    {<\/pre>\n
<\/p>\n
        Path = \"~\/bundles\/MsAjaxJs\"<\/span>, <\/pre>\n
<\/p>\n
        CdnPath = \"http:\/\/ajax.aspnetcdn.com\/ajax\/4.5\/6\/MsAjaxBundle.js\"<\/span>, <\/pre>\n
<\/p>\n
        LoadSuccessExpression = \"window.Sys\"<\/span>, <\/pre>\n
<\/p>\n
        CdnSupportsSecureConnection = true<\/span><\/pre>\n
<\/p>\n
    });<\/pre>\n
<\/p>\n
    PreApplicationStartCode.AddMsAjaxMapping(\"MicrosoftAjax.js\"<\/span>, \"window.Sys && Sys._Application && Sys.Observer\"<\/span>);<\/pre>\n
<\/p>\n
    PreApplicationStartCode.AddMsAjaxMapping(\"MicrosoftAjaxCore.js\"<\/span>, \"window.Type && Sys.Observer\"<\/span>);<\/pre>\n
<\/p>\n
    PreApplicationStartCode.AddMsAjaxMapping(\"MicrosoftAjaxGlobalization.js\"<\/span>, \"window.Sys && Sys.CultureInfo\"<\/span>);<\/pre>\n
<\/p>\n
    PreApplicationStartCode.AddMsAjaxMapping(\"MicrosoftAjaxSerialization.js\"<\/span>, \"window.Sys && Sys.Serialization\"<\/span>);<\/pre>\n
<\/p>\n
    PreApplicationStartCode.AddMsAjaxMapping(\"MicrosoftAjaxComponentModel.js\"<\/span>, \"window.Sys && Sys.CommandEventArgs\"<\/span>);<\/pre>\n
<\/p>\n
    PreApplicationStartCode.AddMsAjaxMapping(\"MicrosoftAjaxNetwork.js\"<\/span>, \"window.Sys && Sys.Net && Sys.Net.WebRequestExecutor\"<\/span>);<\/pre>\n
<\/p>\n
    PreApplicationStartCode.AddMsAjaxMapping(\"MicrosoftAjaxHistory.js\"<\/span>, \"window.Sys && Sys.HistoryEventArgs\"<\/span>);<\/pre>\n
<\/p>\n
    PreApplicationStartCode.AddMsAjaxMapping(\"MicrosoftAjaxWebServices.js\"<\/span>, \"window.Sys && Sys.Net && Sys.Net.WebServiceProxy\"<\/span>);<\/pre>\n
<\/p>\n
    PreApplicationStartCode.AddMsAjaxMapping(\"MicrosoftAjaxTimer.js\"<\/span>, \"window.Sys && Sys.UI && Sys.UI._Timer\"<\/span>);<\/pre>\n
<\/p>\n
    PreApplicationStartCode.AddMsAjaxMapping(\"MicrosoftAjaxWebForms.js\"<\/span>, \"window.Sys && Sys.WebForms\"<\/span>);<\/pre>\n
<\/p>\n
    PreApplicationStartCode.AddMsAjaxMapping(\"MicrosoftAjaxApplicationServices.js\"<\/span>, \"window.Sys && Sys.Services\"<\/span>);<\/pre>\n
<\/div>\n<\/div>\n
Here is the Bundle definition for these scripts<\/p>\n
\n
\n
bundles.Add(new<\/span> ScriptBundle(\"~\/bundles\/MsAjaxJs\"<\/span>).Include(<\/pre>\n
<\/p>\n
                \"~\/Scripts\/WebForms\/MsAjax\/MicrosoftAjax.js\"<\/span>,<\/pre>\n
<\/p>\n
                \"~\/Scripts\/WebForms\/MsAjax\/MicrosoftAjaxApplicationServices.js\"<\/span>,<\/pre>\n
<\/p>\n
                \"~\/Scripts\/WebForms\/MsAjax\/MicrosoftAjaxTimer.js\"<\/span>,<\/pre>\n
<\/p>\n
                \"~\/Scripts\/WebForms\/MsAjax\/MicrosoftAjaxWebForms.js\"<\/span>));<\/pre>\n
<\/div>\n<\/div>\n
 <\/p>\n
Here is the ScriptManger registration for these scripts<\/p>\n
\n
\n
<asp:ScriptManager runat=\"server\"<\/span> ><\/pre>\n
<\/p>\n
        <Scripts><\/pre>\n
<\/p>\n
            <%--Framework Scripts--%><\/pre>\n
<\/p>\n
            <asp:ScriptReference Name=\"MsAjaxBundle\"<\/span> \/><\/pre>\n
<\/p>\n
            <%--Site Scripts--%><\/pre>\n
<\/p>\n
        <\/Scripts><\/pre>\n
<\/p>\n
    <\/asp:ScriptManager><\/pre>\n
<\/div>\n<\/div>\n
 <\/p>\n
WebForms scripts<\/h3>\n
We are registering all the scripts and we are bundling them together as “WebFormsBundle”<\/p>\n
\n
\n
ScriptManager.ScriptResourceMapping.AddDefinition(\"WebFormsBundle\"<\/span>, new<\/span> ScriptResourceDefinition<\/pre>\n
<\/p>\n
    {<\/pre>\n
<\/p>\n
        Path = \"~\/bundles\/WebFormsJs\"<\/span>, <\/pre>\n
<\/p>\n
        CdnPath = \"http:\/\/ajax.aspnetcdn.com\/ajax\/4.5\/6\/WebFormsBundle.js\"<\/span>, <\/pre>\n
<\/p>\n
        LoadSuccessExpression = \"window.WebForm_PostBackOptions\"<\/span>, <\/pre>\n
<\/p>\n
        CdnSupportsSecureConnection = true<\/span><\/pre>\n
<\/p>\n
    });<\/pre>\n
<\/div>\n<\/div>\n
 <\/p>\n
Bundle Definition<\/p>\n
\n
\n
bundles.Add(new<\/span> ScriptBundle(\"~\/bundles\/WebFormsJs\"<\/span>).Include(<\/pre>\n
<\/p>\n
                  \"~\/Scripts\/WebForms\/WebForms.js\"<\/span>,<\/pre>\n
<\/p>\n
                  \"~\/Scripts\/WebForms\/WebUIValidation.js\"<\/span>,<\/pre>\n
<\/p>\n
                  \"~\/Scripts\/WebForms\/MenuStandards.js\"<\/span>,<\/pre>\n
<\/p>\n
                  \"~\/Scripts\/WebForms\/Focus.js\"<\/span>,<\/pre>\n
<\/p>\n
                  \"~\/Scripts\/WebForms\/GridView.js\"<\/span>,<\/pre>\n
<\/p>\n
                  \"~\/Scripts\/WebForms\/DetailsView.js\"<\/span>,<\/pre>\n
<\/p>\n
                  \"~\/Scripts\/WebForms\/TreeView.js\"<\/span>,<\/pre>\n
<\/p>\n
                  \"~\/Scripts\/WebForms\/WebParts.js\"<\/span>));<\/pre>\n
<\/div>\n<\/div>\n
 <\/p>\n
ScriptManager registration<\/h3>\n
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.<\/p>\n
\n
\n
<asp:ScriptManager runat=\"server\"<\/span> ><\/pre>\n
<\/p>\n
        <Scripts><\/pre>\n
<\/p>\n
            <%--Framework Scripts--%><\/pre>\n
<\/p>\n
            <asp:ScriptReference Name=\"WebForms.js\"<\/span> Assembly=\"System.Web\"<\/span> Path=\"~\/Scripts\/WebForms\/WebForms.js\"<\/span> \/><\/pre>\n
<\/p>\n
            <asp:ScriptReference Name=\"WebUIValidation.js\"<\/span> Assembly=\"System.Web\"<\/span> Path=\"~\/Scripts\/WebForms\/WebUIValidation.js\"<\/span> \/><\/pre>\n
<\/p>\n
            <asp:ScriptReference Name=\"MenuStandards.js\"<\/span> Assembly=\"System.Web\"<\/span> Path=\"~\/Scripts\/WebForms\/MenuStandards.js\"<\/span> \/><\/pre>\n
<\/p>\n
            <asp:ScriptReference Name=\"GridView.js\"<\/span> Assembly=\"System.Web\"<\/span> Path=\"~\/Scripts\/WebForms\/GridView.js\"<\/span> \/><\/pre>\n
<\/p>\n
            <asp:ScriptReference Name=\"DetailsView.js\"<\/span> Assembly=\"System.Web\"<\/span> Path=\"~\/Scripts\/WebForms\/DetailsView.js\"<\/span> \/><\/pre>\n
<\/p>\n
            <asp:ScriptReference Name=\"TreeView.js\"<\/span> Assembly=\"System.Web\"<\/span> Path=\"~\/Scripts\/WebForms\/TreeView.js\"<\/span> \/><\/pre>\n
<\/p>\n
            <asp:ScriptReference Name=\"WebParts.js\"<\/span> Assembly=\"System.Web\"<\/span> Path=\"~\/Scripts\/WebForms\/WebParts.js\"<\/span> \/><\/pre>\n
<\/p>\n
            <asp:ScriptReference Name=\"Focus.js\"<\/span> Assembly=\"System.Web\"<\/span> Path=\"~\/Scripts\/WebForms\/Focus.js\"<\/span> \/><\/pre>\n
<\/p>\n
            <asp:ScriptReference Name=\"WebFormsBundle\"<\/span> \/><\/pre>\n
<\/p>\n
            <%--Site Scripts--%><\/pre>\n
<\/p>\n
 <\/pre>\n
<\/p>\n
        <\/Scripts><\/pre>\n
<\/p>\n
    <\/asp:ScriptManager><\/pre>\n
<\/div>\n<\/div>\n
 <\/p>\n
When you run this page you will get script references as follows<\/p>\n
\n
\n
<script src=\"\/bundles\/MsAjaxJs?v=J4joXQqg80Lks57qbGfUAfRLic3bXKGafmR6wE4CFtc1\"<\/span> type=\"text\/javascript\"<\/span>><\/script><\/pre>\n
<\/p>\n
<script src=\"\/bundles\/WebFormsJs?v=q9E9g87bUDaS624mcBuZsBaM8xn2E5zd-f4FCdIk2cA1\"<\/span> type=\"text\/javascript\"<\/span>><\/script><\/pre>\n
<\/p>\n
    <script type=\"text\/javascript\"<\/span>><\/pre>\n
<\/div>\n<\/div>\n
 <\/p>\n
So these were the improvements that happened in the ScriptManager control for registering scripts. In case you want to refresh your memory, ScriptManager<\/a> was greatly enhanced in ASP.NET v4.0 and Dave Reed had a fantastic post about it, which I strongly recommend to go through.<\/p>\n
This is cross posted on http:\/\/blogs.msdn.com\/b\/pranav_rastogi\/archive\/2012\/09\/21\/asp-net-4-5-scriptmanager-improvements-in-webforms.aspx<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":408,"featured_media":58792,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[197],"tags":[31,7413],"class_list":["post-2164","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aspnet","tag-asp-net","tag-scriptmanager"],"acf":[],"blog_post_summary":"
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 […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/2164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/users\/408"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/comments?post=2164"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/2164\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/58792"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=2164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=2164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=2164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}