.NET Answers

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.

Other Related Items:

Heater Trend Sports Starting Pitcher Pitching Machine and PowerAlley Batting CageImprove your batting average from the privacy of your own backyard! The Starting Pitcher Pitching Machine and PowerAlley Batting Cage from Trend Sport... Read More >

Illustrated C# 2008 (Windows.Net)

The unique, visual format of Illustrated C# 2008 has been specially created by author, and teacher of development methods, Daniel Solis. The concis... Read More >

AXIOM 20MB PC CardPC Card 20 MB AXCS-ASP-FLC20M www.axiommemory.com 5 Year PC Card Axiom Memory Solutions 20MB PC Card Axiom 1

If you're new here, you may want to subscribe to the mailing list to get notifications of new post and a virtual tour of past topics. Thanks for visiting!

Related Post

• Do you Need My Help?
• Does jQuery Make Us Lazy?
• Test Sending Email without a Server in ASP.NET
• VB.NET and CSharp Refactoring
• jQuery – Dialog

Bookmark to:

Hide Sites

One Response to “Getting started with jQuery and ASP.NET”