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, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">    <span style="color: #0000ff">&lt;</span><span style="color: #800000">Scripts</span><span style="color: #0000ff">&gt;</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, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">        <span style="color: #0000ff">&lt;</span><span style="color: #800000">asp:ScriptReference</span> <span style="color: #ff0000">Path</span><span style="color: #0000ff">=&quot;~/js/jquery-1.2.6.min.js&quot;</span> <span style="color: #0000ff">/&gt;</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, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">    <span style="color: #0000ff">&lt;/</span><span style="color: #800000">Scripts</span><span style="color: #0000ff">&gt;</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, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none"><span style="color: #0000ff">&lt;/</span><span style="color: #800000">asp:ScriptManager</span><span style="color: #0000ff">&gt;</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, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">    <span style="color: #0000ff">&lt;</span><span style="color: #800000">script</span> <span style="color: #ff0000">src</span><span style="color: #0000ff">=&quot;../js/jquery-1.2.6-vsdoc.js&quot;</span> <span style="color: #ff0000">type</span><span style="color: #0000ff">=&quot;text/javascript&quot;</span><span style="color: #0000ff">&gt;&lt;/</span><span style="color: #800000">script</span><span style="color: #0000ff">&gt;</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, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none"><span style="background-color: #ffff00">&lt;%</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, &#39;Courier New&#39;, 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">%&gt;</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.

5 Comments

Comments have been disabled for this content.