Home » jQuery » Getting started with jQuery and ASP.NET

Getting started with jQuery and ASP.NET

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 post in jQuery

Related Post

  • DotNetNuke Modules – Creating Base ModulesDotNetNuke Modules – Creating Base Modules Now that we have DotNetNuke installed into Visual Studio we can go ahead and create our first modules. Actually, creating the modules is pretty simple. But it is even easier to do it […]
  • Does jQuery Make Us Lazy?Does jQuery Make Us Lazy? Yesterday I read a post that proposed that using jQuery as the answer to every JavaScript problem makes us lazy programmers. This is not what I was expecting to hear since the post was […]
  • jQuery – DialogjQuery – Dialog Ever since pop-up windows became “evil” in the web development world, developers have been looking for other ways to achieve the same effect.  The most common method is to use some […]
  • jQuery – Creating Plug-insjQuery – Creating Plug-ins Last week we looked at how to have jQuery execute our own functions. I suggested at the time that if you were going to need to use that function in multiple applications, you might want […]
  • jQuery – class manipulationjQuery – class manipulation So, now that we've fully exhausted the topic of how to select elements using jQuery, what can we do with it?Well, one thing we can do is use the two built-in methods, addClass and […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer. His commitment to quality through test driven development, vast knowledge of C#, HTML, CSS and JavaScript as well as his ability to mentor younger programmers and his passion for Agile/Scrum as defined by the Agile Manifesto and the Scrum Alliance will certainly be an asset to your organization.

One Pingback/Trackback