jQuery in an ASP.net MVC application using Master Pages

Question

I am trying to get simple jQuery to execute on my Content page with no luck below is what I am trying to do:

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

   <script src="../../Scripts/jquery-1.2.6.js" type="text/javascript"></script>
   <script type="text/javascript">

       $(document).ready(function() {
           alert("hi");
       });   
   </script>

</asp:Content>

I have also tried getting the following to work:

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

   <script src="../../Scripts/jquery-1.2.6.js" type="text/javascript"></script>
   <script type="text/javascript">
       function onload()
       {
          $("#myDiv").css("border", "1px solid green");
       }
   </script>

   <div id="myDive">
      Hello
   </div>

</asp:Content>

Answer 1

It may be that the JQuery file can't be found, try this for the script reference:

<script src="<%= Url.Content ("~/Scripts/jquery-1.2.6.js") %>" type="text/javascript"></script>

The Url.Content will build the correct path regardless of whether the app is running in the root or a sub-directory.

Also, if you've installed the hot-fix for the JS intellisense, you can use this in addition to the above:

<% if (false) { %>
    <!-- Don't wrap this is a Url.Content call, it's like this so we get intellisense! -->
    <script src="../../Scripts/jquery-1.2.6-vsdoc.js" type="text/javascript"></script>
<% } %>

Edit:

Since the release of the RC 1 Refresh, there's been a know bug about placing elements with code blocks in the header, Philip Haacked has a nice article about solving it...

Edit 2:

Apparently this has been fixed since RC 2 was released...

• Code nuggets that are direct children of the head element do not cause an exception if the runat="server" attribute is added to them.

Edit 3:

The hot-fix referenced earlier is only applicable to VS2008 and is available here - check out the blog post by the VS Web Dev Team here for details. VS2010 has it built in.

Answer 2

Try putting the javascript references in your Master Page. Then you don't have to worry about attempting to load the scripts multiple times.

Answer 3

Have to use to publish the site right, but is a pain when you work with a designer that just know how to use photoshop and dreamweaver