Getting started with jQuery and ASP.NET

October 15, 2008 By: Dave

As promised, I am starting a series on jQuery. Today our goal is to get a project setup in Visual Studio that uses jQuery. We won’t be explaining much in the way of syntax, but we will get our first “hello world” application up and running.

To start off, the first thing you’ll want to do is to create a new project. Once you’ve finished this example you’ll have a pretty good idea of how to add jQuery to an existing project. So even if your goal is to add jQuery to an existing project, for now just create a new project and follow along.

Once you’ve created the new project, the first thing you’ll want to do is to create a new subdirectory for the jQuery javascript file. I just called my directory “js.”

Once you’ve created the directory, go ahead and download the jQuery library from www.jquery.com. You can either download it directly into the js directory we created or you can copy it into that directory once you’ve completed the download.

Since you will probably want jQuery available to you in all of the files you will be using, I suggest that you create a Master Page for this project. If you are using Visual Studio 2008, the Master Page will have two content sections in it–one in the head and another in the body. You’ll want both.

Drag and drop the jQuery js file into the head section of the master page. This will automatically create the

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

code that will allow the jQuery library to be loaded.

The next thing we will want to do is to delete the default.aspx(.cs/.vb) file that was created for us when we created the project and create a new one that uses the Master Page we just created.

The final thing we will want to do is to create a javascript file that can be used by this Default file. I would recommend a separate javascript file for each ASPX file (or HTML file) in your application. You can either keep them under the js directory, or in the same directory as the ASPX file. Personally, I think it will make things easier to find if you put the JS file in the same directory as the ASPX file and give it the same name as the ASPX file. That is, Default.aspx will have a js file named Default.js.

Once you’ve created that file, add this code snippet to it.

$(document).ready(function() {
    alert("jquery is working");
});

Don’t worry about what it does. For now all you have to know is that the application will display “jquery is working” in a message box when we run the default.aspx page if everything is working correctly.

The last step is to add the default.js file to the Default.aspx page. We can do that by dragging and dropping the default.js file into the ContentPlaceHolder control that replaces the content in the head of the Master Page.

If you’ve done everything correctly, you can run the default.aspx page and a dialog will display “jquery is working” once the page has loaded.