Using jQuery with ASP.NET – Why is it not working??

Posted on June 24th, 2009 in ASP.NET, jQuery by Jeffrey

jQuery? What?

jQuery is a powerful JavaScript library which aims to reduce the time and effort for writing JavaScript code, and to support Unobtrusive JavaScript. Take the following line of code as an example:

$("table tr:nth-child(even)").addClass("yellow");

The above line highlights every other row in a table with a yellow color (assume you have a style called “yellow”). If you use raw JavaScript, it may take you dozens of lines of code to accomplish the same task. For more information about jQuery and how it works, check jQuery’s web site.

jQuery with ASP.NET

Since basically jQuery is a JavaScript library, it can be used in any web languages including ASP.NET. Let’s start with a “Hello world” example to show how to use jQuery with ASP.NET.

1. Download jQuery library from jQuery web site, unzip the file and add/include the file in your project.

2. Create a simple ASPX page called jqueryDemo.aspx, and add <script> tag in the header section to reference the jQuery library.

<script type="text/javascript" src="../Common/jquery.js" />

3. Create an ASP:HyperLink control as follows

<asp:HyperLink ID="hlClickMe" runat="server" href="javascript:void(0);">Click Me</asp:HyperLink>

4. Add the following code snippet in the <head> section of the page

<script type="text/javascript">
    $(document).ready(function() {
       $("a").click(function() {
         alert("Hello world!");
       });
     });
</script>

$(document).ready() will check if the document structure is fully parsed and the DOM tree is ready before executing the script in the function block. It has the same effect as the following line:

<asp:HyperLink ID="hlClickMe" runat="server" href="javascript:void(0);"
    onclick="alert('Hello world!');">Click Me</asp:HyperLink>

The benefit of using jQuery is that we don’t need to add “onclick” call for each HyperLink control (if there are multiple HyperLink controls on the page that calls the same JavaScript function), and also this implementation separates the behavior from the document structure: Unobtrusive JavaScript.

Why is it not working?

Put all pieces together, we have an ASPX page as follows:

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">
    <title>Using jQuery with ASP.NET - Why It Is Not Working?</title>
    <script type="text/javascript" src="Common/jquery.js" />  

    <script type="text/javascript">
        $(document).ready(function() {
           $("a").click(function() {
             alert("Hello world!");
           });
         });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:HyperLink ID="hlClickMe" runat="server"
        href="javascript:void(0);">Click Me</asp:HyperLink>
    </div>
    </form>
</body>
</html>

However, when you load the above page in browser, you may find that there is no alert box when clicking on the hyperlink. So what is going on here?

Next Page »