Javascript – Including Javascript and css in Master pages and User Controls in asp.net

asp.netjavascriptmaster-pagesuser-controls

I am trying to include the js and css in my code behind in my master pages and user controls in Page_Load event.

But apparently, js breaks since Page_Load of user controls loads BEFORE Page_Load of a master page. I include my jquery libs used across the site in my master pages, but scripts used in user control are included in user control only. The thing is that user control js scrips uses jquery functionality (as it should), but when it tried to run, it breaks since jquery libs are not loaded yet.
Anwyays, is there a way around this frustrating mess?

I use this to include js in my code behind. relativeResolvedPath is basically ResolveUrl(url)

    HtmlGenericControl js = new HtmlGenericControl("script");
    js.Attributes.Add("type", "text/javascript");
    js.Attributes.Add("src", relativeResolvedPath);
    Page.Header.Controls.Add(js);

Best Answer

Use Page_Init in your MasterPage to make code run before child page and UserControl Page_Load events.

Don't forget to do the occasional "View Source" as a sanity check. You gotta make sure that stuff goes into the response in the order you expect.

The client script used in your UserControls will not execute until the response is sent to the user agent, so as long as the jQuery libraries are included earlier in the response, you should be ok. This is not actually a lifecycle issue unless you have server code mixed in with the client code that you are sending.

I have this in the head of my MasterPage

    <link rel="shortcut icon" href="<%#ResolveUrl("~/favicon.ico" ) %>" />
    <script type="text/javascript">
        var applicationRoot = "<%# webController.AppUrl %>";
    </script>
    <asp:Literal ID="litJqueryMinified" runat="server" /><asp:PlaceHolder id="phjQuery" runat="server"><script src="Script/jquery-1.3.2.js" type="text/javascript"></script></asp:PlaceHolder>
    <asp:Literal ID="litJqueryUIMinified" runat="server" /><asp:PlaceHolder id="phjQueryUI" runat="server"><script src="Script/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script></asp:PlaceHolder>
    <script src="<%#ResolveUrl("~/Script/jquery.fancybox-1.2.1.pack.js" ) %>" type="text/javascript"></script>
    <script src="<%#ResolveUrl("~/Script/jquery.maskedinput-1.2.2.min.js" ) %>" type="text/javascript"></script>
    <script src="<%#ResolveUrl("~/Script/jquery.cycle.all.min.js" ) %>" type="text/javascript"></script>

and this in the codebehind:

        // Swap the jQuery inlcude for the minified version
        phjQuery.Visible = false;
        phjQueryUI.Visible = false;
        string jQueryAddress = currentSettings != null && currentSettings["jQueryLocation"] == "local" ? ResolveUrl("Script/jquery-1.3.2.min.js") : "https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js";
        string jQueryUIAddress = currentSettings != null && currentSettings["jQueryLocation"] == "local" ? ResolveUrl("Script/jquery-ui-1.7.2.custom.min.js") : "https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js";
        litJqueryMinified.Text = "<script src=\"" + jQueryAddress + "\" type=\"text/javascript\"></script>";
        litJqueryUIMinified.Text = "<script src=\"" + jQueryUIAddress + "\" type=\"text/javascript\"></script>";

This allows me to have it minified or hosted by google in production, but use the full version in dev, with intellisense.

Don't forget this in your Page_Load to get ResolveUrl to work:

            Page.Header.DataBind();

Hope this helps. :)

Related Topic