locked
Bootstrap 4, popper and scriptmanager RRS feed

  • Question

  • User-1242214802 posted

    Hi All: I created a basic webforms site using VS2019, and it added script references to the masterpage scriptmanager for bootstrap and Jquery:

            <asp:ScriptManager runat="server">
                <Scripts>
                    <%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
                    <%--Framework Scripts--%>
                    <asp:ScriptReference Name="MsAjaxBundle" />
                    <asp:ScriptReference Name="jquery" />
                    <asp:ScriptReference Name="bootstrap" />
                    <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>
    

    This installs JQuery 3 and Bootstrap 3 in the project. I to update Bootstrap to version 4, which I did in Nuget, and updated versions of JQuery and Bootstrap were installed. So far so good.

    Trying to use any JQueryUI-derived Bootstrap functions (like popover/dialog), however, fail because the library "popper.js" is not loaded.

    There is a version of Bootstrap 4 called "bootstrapbundle.js" that includes popper.js, so it doesn't have to be loaded separately. How can I modify the script reference "bootstrap" to point to the "bootstrapbundle.js" instead of "bootstrap.js"? Where is this bundle configured? (It's not in bundles.config).

    In packages.config, there are two bootstrap references:

    <package id="AspNet.ScriptManager.bootstrap" version="4.3.1" targetFramework="net45" />

    <package id="bootstrap" version="4.3.1" targetFramework="net45" />

    I presume the first one will manage updating all the references to bootstrap as it's updated in Nuget...according to Nuget "This package contains the AspNet.ScriptManager.bootstrap assembly that will automatically  register bootstrap 4.3.1 with the ScriptManager as "bootstrap"

    Is there any way to override this? or is there any way to build my own package using bootstrapbundle.js, without having to manually manage the versions in bundle.config?

    I've been trying to add popper separately in bundle.config but am having problems adding it to the scriptmanager. If anyone has solved this I would love to know!

    BTW the order the libraries need to load are jquery, popper, bootstrap.

    TIA

    Friday, August 16, 2019 2:31 PM

All replies

  • User-1242214802 posted

    I was able to get it working by adding a direct script reference in the scriptmanager:

                    <asp:ScriptReference Name="jquery" />
                    <asp:scriptReference Path="~/Scripts/umd/popper.min.js" />
                    <asp:ScriptReference Name="bootstrap" />
    

    Just not sure if this is the only way, or best way, to get popper.js into the project?

    Friday, August 16, 2019 3:55 PM
  • User665608656 posted

    Hi dotnetnoob,

    According to your description, if you want to use bundles to load "popper.js" properly, you can try to modify the contents of the BundleConfig.cs file, except for the methods you find yourself.

    You can change boostrap bundles in the BundleConfig.cs file:

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                "~/Scripts/umd/popper.js" // add this reference
                "~/Scripts/bootstrap.js"));

    Then in the ScriptManager,you can follow the original way of writing by simply referring to Name as the ScriptReference for boostrap :

    <asp:ScriptReference Name="bootstrap" />

    You can refer to this link : https://stackoverflow.com/a/56360726

    Best Regards,

    YongQing.

    Monday, August 19, 2019 2:35 AM
  • User-1242214802 posted

    Thanks Yongqing Yu: The problem is, neither Bootstrap nor Jquery are explicitly declared in the bundles.config file. There is a separate NuGet "scriptmanager" package that seems to generate the bundle automatically:

      <package id="AspNet.ScriptManager.bootstrap" version="3.4.1" targetFramework="net472" />
      <package id="AspNet.ScriptManager.jQuery" version="3.3.1" targetFramework="net472" />
      <package id="bootstrap" version="3.4.1" targetFramework="net472" />
      <package id="jQuery" version="3.3.1" targetFramework="net472" />

    This is automatically installed when you create a new webforms project in VS2019, and I believe it handles the different filepaths for "debug" and "release" configurations, as well as mapping the correct versions of the files...but I don't know how to edit it or where it appears in the solution.

    The bundlConfig.cs file just contains the following:

            public static void RegisterBundles(BundleCollection bundles)
            {
                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"));
    
                // Order is very important for these files to work, they have explicit dependencies
                bundles.Add(new ScriptBundle("~/bundles/MsAjaxJs").Include(
                        "~/Scripts/WebForms/MsAjax/MicrosoftAjax.js",
                        "~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js",
                        "~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js",
                        "~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js"));
    
                // Use the Development version of Modernizr to develop with and learn from. Then, when you’re
                // ready for production, use the build tool at https://modernizr.com to pick only the tests you need
                bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                                "~/Scripts/modernizr-*"));
            }
    

    Note that there is no mapping for either JQuery or Bootstrap there!

    I suppose I could remove that "aspnet.scriptmanager.jquery" package and manually recreate the file associations in bundle.config, but I wasn't sure if there was another way to handle it?

    Monday, August 19, 2019 10:32 AM
  • User665608656 posted

    Hi dotnetnoob,

    According to your description, I suggest the better way is what you say.

    You can remove these two packages in your packages.config file, and add the jquery and popper with bootstrap js in your bundles.config file.

     bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));
      
    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                "~/Scripts/umd/popper.js"
                "~/Scripts/bootstrap.js"));

    This is the most common practice and the simplest use.

    Best Regards,

    YongQing.

    Wednesday, August 21, 2019 2:11 AM