What is CrazyEngico.com (CE)?

CrazyEngico (CE) is a one-stop solution for interview questions and answers, domain knowledge, e-learning, tutorials, articles and many more learning material.
e-learning - Intelligent e-learning tutorials and articles
Domain Knowledge Learn about various business domains/verticals such as Banking, Financial, Insurance, Healthcare and many more...
Interview Questions and Answers - Post your questions and answers. 1000+ database of ready questions and answers available to prepare for an interview.
Tutorials - 300+ video tutorials from beginner to expert level.
Articles - 300+ technical articles to understand concepts.
Forum - A technical forum to post your queries/responses.

Search Articles
Search Query:

Using jQuery with ASP.NET

Submitted by: Vishwanath Paibir

Abstract: This article gives a brief introduction of jQuery and how it can be used in ASP.NET applications using Visual Studio 2008. In this guide we will see what is jQuery, how to get it, include it in our ASP.NET projects and use it.

  • What is jQuery?
  • How jQuery Works?
  • Get jQuery
  • Include jQuery in ASP.NET project
  • Include jQuery in a Web Page
  • Code Walkthrough
  • Example
  • Conclusion

What is jQuery?

With reference to jQuery website jQuery is
“write less, do more” fast and concise JavaScript library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
The features of jQuery include:
  • Lightweight Footprint (About 19kb in size – Production version)
  • CSS3 Compliant (Supports CSS 1-3 Selectors)
  • Cross-browser (IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome)

How jQuery Works?

The Problem: Sometimes we want some kind of client side logic to be executed on load of the page, so we try to make use of window.onload() event to kick start the client side script but unfortunately we have to wait till everything on the page gets loaded which includes larger image files also.

The Solution: jQuery has a little handy function $(document).ready(fn) which has a capability to launch your JavaScript logic as soon as the Document Object Model (DOM) is ready and DOM loading happens before the page has finished loading, which gives us flexibility to execute a client side logic even before a page is loaded.

Get jQuery

You can download jQuery from jQuery site from the home page. You can get 2 versions of jQuery: Production Version which is just 19kb in size, good in case if you want to just deploy it on production and Development Version which is useful in case if we plan to see the internals or plan to debug the library. The current version is 1.3.2. To see latest version and more updates on jQuery you can visit jQuery site.

Step 1: Go to http://jquery.com

Step 2: On home page look for the below section:

Step 3: Download the version which is most suitable for your requirement. That’s all. Now let’s see how we can use it.

Include jQuery in ASP.NET project

Now since we have downloaded the jQuery library it’s time to add it to our ASP.NET project. So let’s start:

Step 1: Open Visual Studio 2005/2008 (I will demonstrate using VS 2008)

Step 2: Create a new Web Site.

Step 3: Give some name to the website.

Step 4: Below is the folder structure.

Step 5: To add the jQuery script file either you can directly add to the root or create a folder called as ‘Scripts’ and save it to separate our script files. We will do using later approach. Right click the Scripts folder > Add Existing Item > Browse to the path where you downloaded the jQuery library (jquery-1.3.2.min.js) > Select the file and click Add. The structure will look similar to the following:

You can either change the name of the file to jquery.js or leave it the way it is.

That’s all. Now it's time to include jQuery in ASP.NET page.

Include jQuery in a web page

Step 1: Create a New Page, I created ‘Demo.aspx’.

Step 2: Now drag and drop the jquery-1.3.2.min.js file from the Solution Explorer on to your page to create a reference as shown below:

Alright cool! We are ready to write jQuery code now. So let’s write some simple script.

Code Walkthrough

We will create a small <div> control and <a> tag. On click of anchor tag we will call a .slideDown(s, c) function to demonstrate the slide down effect.

Step 1: Create <a> and <div>

Step 2: We will write jQuery code on click of <a>.

  • ‘$’ sign is a shorthand notation to call jQuery .ready function. Instead of $(document).ready(fn) we directly call $(fn).
  • When we click on <a> tag the click function gets called which in turn calls the slideDown function to slide down div of id showMe. ‘slow’ is the parameter passed to tell slide it down slowly. Initially the div control is hidden and on click of anchor tag we display the div.
Step 3: Run the demo here and see.



Well that’s all we need to start using jQuery. This article is just a brief introduction to jQuery and how we can use it in our ASP.NET projects and no way demonstrates the capabilities of jQuery. Let’s learn more about jQuery in future articles.

Copyright © 2018 CrazyEngico.com. All rights reserved.
CrazyEngico.com is not responsible for the content and CrazyEngico.com does not evaluate or guarantee the accuracy of any CrazyEngico.com content.
Please read our terms of service agreement before using this site.