VS2012 - Web Forms - Bundling Confusion

Asked 5/9, 2012 at 22:13 Answered 15/12, 2015 at 18:40

Solved asp.net webforms visual-studio-2012 asp.net-optimization

I created a new ASP.NET Web Forms Project through Visual Studio 2012. Unfortunately, the default Site.Master file is very confusing. (I am posting these questions together because they are very related and reference the same code quite a bit.)

First off, I already understand the purpose of bundling and minification, so no need to discuss that. However I do not understand what is going with the way the scripts are being included in the default master page.

Question 1:
Why is a bundle called "~/bundles/WebFormsJs" being created in the BundleConfig.cs file, and yet in the master page, each of these same individual .js files are being listed out one by one in the ScriptManager?

Inside BundleConfig.cs:

bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include(
              "~/Scripts/WebForms/WebForms.js",
              "~/Scripts/WebForms/WebUIValidation.js",
              "~/Scripts/WebForms/MenuStandards.js",
              "~/Scripts/WebForms/Focus.js",
              "~/Scripts/WebForms/GridView.js",
              "~/Scripts/WebForms/DetailsView.js",
              "~/Scripts/WebForms/TreeView.js",
              "~/Scripts/WebForms/WebParts.js"));

Inside Site.Master:

<body>
<form runat="server">
<asp:ScriptManager runat="server">
    <Scripts>
        <%--Framework Scripts--%>
        <asp:ScriptReference Name="MsAjaxBundle" />
        <asp:ScriptReference Name="jquery" />
        <asp:ScriptReference Name="jquery.ui.combined" />
        <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--%>

    </Scripts>
</asp:ScriptManager>

As you can see.... each of those same .js files are individually listed in the ScriptManager. I don't even see a reference to the "WebFormsJs" bundle that was created anywhere outside of BundleConfig.cs. Why was that bundle ever created if each of these javascript files were going to be referenced individually here in the ScriptManager?

Question 2:
Why is a ScriptManager being used in this way at all? I was under the impression ScriptManager was required for Microsoft's version of Ajax such as using UpdatePanels. What is the purpose of using ScriptManager here... just to simply register javascript files?

Question 3:
What is the difference in registering javascript files through the ScriptManager versus up at the top of Site.Master where it uses the following approach instead?

<%: Scripts.Render("~/bundles/modernizr") %>

Question 4:
Inside the ScriptManager I also noticed these:

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

... I can at least recognize "MsAjaxBundle" from BundleConfig.cs, but where are jquery and jquery.ui.combined defined? I did a search and found a reference to them in packages.config.

<package id="jQuery" version="1.7.1.1" targetFramework="net45" />
<package id="jQuery.UI.Combined" version="1.8.20.1" targetFramework="net45" />

But I don't understand what is going on here either. I thought packages.config was used for NuGet. Plus... I don't even see a path listed here for the location of these jQuery .js files. They are just listed here and strangely associated with a particular version of the .NET Framework (4.5 in my case). Why a javascript resource would be associated with a version of the .NET Framework is beyond me.

Anyway, question 4 is this: How is the resource "jquery" in the ScriptManager being added/used? Why don't I see the jQuery .js files being bundled up together in BundleConfig.cs like all the other bundles??

Question 5:
Can I remove the following script reference from Site.Master if I am not planning on using UpdatePanel and those sort of Microsoft Ajax controls? I am a little confused as to why this is even included here by default.

<asp:ScriptReference Name="MsAjaxBundle" />

Filibertofilibuster answered 5/9, 2012 at 22:13 Comment(0)

UPDATE: This is a new blog post which also talks about this more: ASP.NET article

Basically webforms + bundling looks like this due to a bunch of legacy behavior that we weren't able to change in scriptmanager.

In regards to your specific questions:

Basically this is so deduping works correctly, script manager has a limitation for the origional script resources which prevents them from being scriptmapped, so they need to be mapped to disk which then gets properly deduped because the files are already included in the bundle. The WebformsBundleJs is a script mapping that is created inside of the PreAppStart code inside of the ScriptManager nupkgs. (I agree this is nearly impossible to discover)
New 4.5 features like unobtrusive validation required jquery(via scriptmanager), which is why script manager was used to ensure jquery doesn't get rendered out twice.
This will work fine, but it will never dedupe with ScriptManager. So for modernizr it won't be an issue.
The jquery packages drop the jquery files to disk in your Scripts folder.
That reference pulls in the msajaxbundle which contains all of the ajax scripts, if you don't need/want them, I think its safe to remove.

Chalfant answered 6/9, 2012 at 21:23 Comment(5)

Adding to question 3, the use of jquery for validation is great, but it is conflicting with jquery code that I already have in my sites. I also posted about this here: <#12065728> I can't use the following reference in the head (along with accompanying jquery code) because the scriptmanager reference to jquery is duplicating it: <%: Scripts.Render("~/bundles/jquery") %> What does Microsoft recommend in this scenario? Do I need to move my jquery code out of the head and into the web form? – Auberon 8/9, 2012 at 20:21

For question 1, why is ~/bundles/WebFormsJs never referenced anywhere else in the web project (outside of creating the definition in BundleConfig.cs)? It seems like this bundle is defined, but not referenced anywhere when I do a "Find In Files" search through entire solution. – Filibertofilibuster 2/10, 2012 at 15:44

Its done inside the WebForms ScriptManager preapp start code via a ScriptMapping: ScriptManager.ScriptResourceMapping.AddDefinition("WebFormsBundle", new ScriptResourceDefinition { Path = "~/bundles/WebFormsJs" }); – Chalfant 3/10, 2012 at 17:14

Does any of this seem ludicrous to anyone else? – Renee 30/11, 2013 at 20:6

Link in answer is dead – Tomlinson 21/4, 2021 at 12:33

I had more or less the same questions also...

However regarding question 4 I have a different opinion.

the WebFormsBundle and MsAjaxBundle are both Script references that have been defined in the PreAppStatCode (like you I cannot find where is this file).

So, I have the feeling that in the same place (ScriptManager.WebForms PreAppStartCode) by default there is another definition for jquery and jQueryUI script reference. These references are used in the script manager.

This process is quite important since because in this way you take advantage of some important feature such as CDN etc. In the definition of jquery in the PreAppStartCode for this specific reference there is a defined CDN path that will be used in case that you activate the EnableCDN in the script manager of your master page (EnableCdn="true")

Earvin answered 6/6, 2013 at 10:21 Comment(0)

Just to clarify something from the accept answer explanation for Question 1:

The reason for the script references for the individual web forms js files is to allow the local files (such as "~/Scripts/WebForms/WebForms.js") to override the same files that exist in the System.Web.dll (If you reflect the System.Web.dll and look in the references folder you will find the same .js files).

Surrounding answered 15/12, 2015 at 18:40 Comment(0)

Recommended topics

Hot tags