CODEWITHSUNDEEP
javascriptjqueryasp.netbundling-and-minification
jibboo
jibboo

Reputation: 101

How do I load an individual .js file that requires jQuery with ASP.NET 4.51?

My normal pattern for my sites has been to have one javascript file for each page's functionality. And having the master page load the required jQuery and jQuery UI files.

I just started using ASP.NET 4.5 in VS2013 ... and it has a great bundling/minifying feature built in. However, when I "add" my page.js to page.aspx ... it fails to run because the "bundled" javascript files in the master page (which contain jquery) load after my page.js file.

I considered loading all of the individual pages into the bundle, but that requires me to map out all of the form fields etc because the all of my individual javascript files will now be loaded.

I would also assume that this is highly inefficient since jquery will be trying to bind events to DOM objects that don't exist (since page.js, page2.js, page4.js, etc will be loaded in the bundle while the browser is on page3.js)

What is the correct way to do this?

My other option is eliminate the bundling, but I would like to take advantage of the single js/css file.

Thoughts?

Upvotes: 1

Views: 1779

Answers (2)

Nirav Vyas
Nirav Vyas

Reputation: 131

Ans 1) When your jquery is coming from bundle or linked directly in master page:

You can use ContentPlaceHolder to render your page.js after your bundled js. Please make sure to add ContentPlaceHolder below bundle line.

1) In your master page

<head runat="server">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title></title>

    <%: System.Web.Optimization.Scripts.Render("~/Bundles/js") %>

    <asp:ContentPlaceHolder ID="cphPageJs" runat="server">
    </asp:ContentPlaceHolder>
</head>

2) In your page

<asp:Content ID="Content1" ContentPlaceHolderID="cphPageJs" runat="server">
    <script src="/js/myPage.js"></script>
</asp:Content>

Ans 2) When jquery is rendering from ScriptManager:

In this case you will need to use ScriptManagerProxy in your content page. Make sure you use this control in Content and ContentPlaceHolder is added after ScriptManager in MasterPage.

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <asp:ScriptManagerProxy ID="smp" runat="server">
        <Scripts>
            <asp:ScriptReference Path="~/js/myTest.js" />
        </Scripts>
    </asp:ScriptManagerProxy>
</asp:Content>

Upvotes: 1

jibboo
jibboo

Reputation: 101

So, after adding a HeadContent section at the bottom of my tag, it appears that the jquery.js file gets rendered from the Scriptmanager instead of the bundle (even though it is registered in BundleConfig.cs)

See below how Scriptmanager by default is placed in the tag. Can I move this to the head? Is this default asp.net site.master layout junk? I can't believe that others haven't run into this problem.

So, my page.js file is now in the headcontent output below the modernizer bundle file (which contains who knows what since it appears that a lot of js files are still rendered line by line from scriptmanager). However Scriptmanager is placing jquery below my headcontent output.

<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Website Title - <%: Page.Title %></title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>
    <webopt:bundlereference runat="server" path="~/Content/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

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

Upvotes: 2

Related Questions