Getting jQuery to work with MasterPages - Code Junkie
Jared Roberts asked a question today on his blog about using jQuery with ASP.NET Master Pages (Getting jQuery to work with MasterPages - Code Junkie). Master Pages present some interesting problems. Because the Content Page could live at a different directory level than the Master you can quickly run into issues with relative paths breaking.
The solution is to place your scripts references into a ScriptManager on the Master Page. This ScriptManager will render the proper <Script> tags for you at runtime. For example:
<asp:ScriptManager ID="ScriptManager" runat="server">
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"> <span style="color: #0000ff"><</span><span style="color: #800000">Scripts</span><span style="color: #0000ff">></span></pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none"> <span style="color: #0000ff"><</span><span style="color: #800000">asp:ScriptReference</span> <span style="color: #ff0000">Path</span><span style="color: #0000ff">="~/js/jquery-1.2.6.min.js"</span> <span style="color: #0000ff">/></span></pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"> <span style="color: #0000ff"></</span><span style="color: #800000">Scripts</span><span style="color: #0000ff">></span></pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none"><span style="color: #0000ff"></</span><span style="color: #800000">asp:ScriptManager</span><span style="color: #0000ff">></span></pre>
The downside of this is that your Content Pages will lack Intellisense for the scripts you’ve referenced. The workaround for this is to give the designer a reference it can use at design time but that won’t render at runtime. This is done by placing the following code into your Content Page:
<%if (false) {%>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none"> <span style="color: #0000ff"><</span><span style="color: #800000">script</span> <span style="color: #ff0000">src</span><span style="color: #0000ff">="../js/jquery-1.2.6-vsdoc.js"</span> <span style="color: #ff0000">type</span><span style="color: #0000ff">="text/javascript"</span><span style="color: #0000ff">></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span></pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none"><span style="background-color: #ffff00"><%</span><pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none"><p> } </p></pre><span style="background-color: #ffff00">%></span></pre>
This gives you properly pathed <Script> tags at runtime and JS Intellisense at design time. This also works with User Controls where you’re using a ScriptManagerProxy and want Intellisense support.
As an aside, the <% if (false) { %> trick is useful for other design time content. We’ve used it to reference style sheets when building user controls. It lets the control developer get a good visual of what the final control might look like but allows the final styles to be controlled by the page hosting the control.