Frankly, I’m surprised that it took until page 12 of the jQuery Cookbook to mention putting JavaScript at the bottom of the page before the closing tag. Pages load faster with the JavaScript at the bottom, and it removes the need to use the ready() function. This is great advice. Using a ContentPlaceHolder helps keep the scripts in their optimal location.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
</head>
<body>
<div>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<asp:ContentPlaceHolder ID="ScriptContent" runat="server" />
</body>
</html>
Then, I’m able to include an element inside of my View and use it freely. Notice that I was able to include jquery.min.js above the ContentPlaceHolder, which means jQuery will already be warm for any JavaScript in my ScriptContent.
<asp:Content ID="Content3" ContentPlaceHolderID="TitleContent" runat="server">
About
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="MainContent" runat="server">
<h2>About</h2>
<div class="about-message"></div>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="ScriptContent" runat="server">
<script type="text/javascript"> $('.about-message').text("This is the About Page!");</script>
</asp:Content>
Another added perk to this ContentPlaceHolder approach is that it lets me include other JavaScript libraries that individual Views might depend on. Pretty simple, but I hope you enjoy it!