Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery in an ASP.net MVC application using Master Pages

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>
like image 399
jwarzech Avatar asked Dec 16 '08 15:12

jwarzech


People also ask

HOW include jQuery in ASP.NET MVC?

After the ASP.NET MVC Framework is installed a new ASP.NET MVC Web Application project should be created. Next, download jQuery, get the Packed or Minified version and place it into the Content folder of the the new web application project. Add a reference to the jQuery file put in the Content folder.

What is master page in ASP.NET MVC?

In asp.net we all are familiar with Master page. Master page is used to create a common layout for the web based application. In Master page we use Content Place Holder where we want to place other pages content. Similarly we use the concept of Master page in MVC. We create a View which will be common to every page.

What is jQuery in ASP.NET MVC?

ASP.NET MVC is a technology used to create websites that run on Microsoft Internet Information Services (IIS). JavaScript is a computer language used to add interactive operations to a webpage. jQuery is a library based on JavaScript to enhance the language to create highly functional websites and webpages.


1 Answers

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.

like image 120
Kieron Avatar answered Sep 23 '22 21:09

Kieron