Proper way to use JQuery when using MasterPages in ASP.NET?
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?
Answer
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).