Proper way to use JQuery when using MasterPages in ASP.NET?

Asked 8/4, 2009 at 19:8 Answered 12/5, 2015 at 1:12

Solved asp.net jquery master-pages fancybox

I have no issues when doing using JQuery in a aspx page without a masterpage, but when I try to use it in pages that have a masterpage, it doesn't work, so I end up putting the jquery files and other script files in the page instead of the master. Now if I have 10 pages, I am doing this for all 10, which I know is incorrect. In the sample masterpage below, where would I put my script files.

<html>
<head runat="server">
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <asp:ContentPlaceHolder ID="ContentPanel" runat="server">
    </asp:ContentPlaceHolder>            
</body>
</html>

I recently used the fancybox plugin and what I did was instead of putting the jquery script and fancybox scripts in the masterpage because I got frustrated on getting it to work, I just put it in the page where I wanted the script to run, specifically at the bottom, right before the closing asp:Content. Of course, now I have the issue of, if I wanted to use the fancybox plugin in other pages, I would put the jquery script and fancybox script on all 5 pages instead of just the masterpage. When dealing with masterpages, where does everything go using my example above?

Buckskins answered 8/4, 2009 at 19:8 Comment(0)

You would declare your main jQuery scripts within the master page, as you would normally:

<head runat="server">
  <link href="/Content/Interlude.css" rel="Stylesheet" type="text/css" />
  <script type="text/javascript" src="/Scripts/jquery-1.3.2.min.js"></script>
  <asp:ContentPlaceHolder ID="head" runat="server">
  </asp:ContentPlaceHolder>
</head>

And then any page specific JS files could be loaded within the Content controls that reference the Head ContentPlaceholder.

However, a better option would be to look into the ScriptManager and ScriptManagerProxy controls - these can provide you with a lot more control over the way your JS files are served to the client.

So you would place a ScriptManager control in you master page, and add a reference to the jQuery core code in that:

<body>
  <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
      <Scripts>
        <asp:ScriptReference Path="/Scripts/jquery-1.3.2.min.js" />
      </Scripts>
    </asp:ScriptManager>

Then, in your page that requires some custom JS files, or a jQuery plugin, you can have:

<asp:Content ID="bodyContent" ContentPlaceholderID="body">
  <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
      <Scripts>
        <asp:ScriptReference Path="/Scripts/jquery.fancybox-1.2.1.pack.js" />
      </Scripts>
  </asp:ScriptManagerProxy>

The ScriptManager allows you to do things like control where on the page scripts are rendered with LoadScriptsBeforeUI (or better yet, after by setting it to False).

Slavonic answered 8/4, 2009 at 19:44 Comment(0)

I use this method.

<script type="text/javascript" language="javascript" src='<%=ResolveUrl("~/scripts/jquery.js") %>' ></script>

Just place it above your tag...

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

Forworn answered 11/2, 2010 at 1:40 Comment(2)

+1 but i got a warning when include the language attribute saying invalid attribute – Estimation 4/7, 2014 at 19:13

I prefer this one since it doesn't require ScriptManager or extra component. – Bomb 3/6, 2017 at 2:48

Alright use a different contentplaceholder for your script. It should look like this

<script type="text/javascript" src="myscript.js" />
<asp:ContentPlaceHolder ID="ScriptContent" runat="server">

</asp:ContentPlaceHolder>

Place this tag at the bottom of your masterpage, close to the </body> tag. This will allow you add scripts on the masterpage and also on your pages as well. Make sure that your scripts are loading in the right order by viewing the page source and ensuring the HTML rendered in the right way. Good luck.

Oh one more thing, make sure jQuery and then FancyBox load up before any other js you may have out there or else it won't work. Javascript loads in the order it was called, jQuery must load first!

Archaism answered 8/4, 2009 at 19:19 Comment(0)

This is what will work inside a Master page:

For Script file:

<script type="text/javascript" src="<%= ResolveUrl("~/script/scriptFile.min.js") %>"></script>

For CSS file:

<link rel="stylesheet" href="~/styles/CssFile.min.css" runat="server" />

Additional Notes:

Use the minified versions as could as possible (FileName.min.js) and (FileName.min.css) to reduce loading time and improve SEO.
Put the CSS before the </head> and the script before the </body> to enhance performance and improve SEO.
The tile character (~) in the path will resolve automatically to the root of your website.
Do not forget to use runat="server" for the stylesheet only. The script must not have runat="server" because it already uses server operators <%= %>.
You can use the online http://jscompress.com/ to compress your javascript and https://csscompressor.net/ to compress your CSS files.

Latrishalatry answered 12/5, 2015 at 1:12 Comment(0)

Recommended topics

Hot tags