Contents tagged with jQuery
-
A Talk by jQuery Creator, John Resig
I’ve you’re going to be in the Boston area this Wednesday the Boston .NET User Group is offering a talk by jQuery creator John Resig. It isn’t often that you have an opportunity see hear a talk by someone with this much influence. And it is even rarer to do so in such an small group (most of these talks have less than 40 people in attendance).
Boston .NET User Group
John Resig, jQuery Creator and Lead Developer
Wednesday Feb. 11, 2009 6:00-8:00 p.m.
MSFT Office, Waltham, MA -
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.