Database Search Solution
(New Version) Search Control
Free ASP.NET Controls
ASP.NET Media Player Control
Flash Video Player Control
ASP.NET Telecommute Jobs
Free IP Location Lookup
Test .Net Regular Expressions
CSS/Table/DIV Page Layouts
Article Sites Master List
.NET Windows Forms
General .NET Framework
(New) Better Working Tutorials
Accepting Credit Cards
Make Money with Web Site
Using jQuery With ASP.NET
What is jQuery?
helps to traverse through HTML elements, event handling, effects(animation) and
We will see how to work on jQuery with asp.net and few of jQuery features in this article.
Using jQuery in ASP.NET Page
First of all you will require to link jQuery library to your ASP.NET page. Use below shown code in HTML code to include latest jQuery.
It also can be achieved using server ASP.NET side code like this:
HTML code :
C# Server-side code:
Now you have idea how to include jQuery in ASP.NET page and run script on page load. We will see how to pass data to server and get response from server dynamically using jQuery in sections "Ajax using jQuery" and "jQuery Ajax with JSON"
No we will see few of the jQuery features that are easy to learn and implement with ASP.NET.
Selectors are most useful feature in jQuery, Selectors helps to select element(s) in an HTML document.
jQuery has large number of options for selectors, you can select an element or array of elements by its ID, tag name, class name, with particular attributes. There are lots options to traverse through parent and children to find out an element.
Every selector returns an array of elements rather than single element; I feel this is a very helpful feature in jQuery while working with jQuery.
Userful Selectors Examples:
$("#selectDiv") //will return an array containing element which has id = selectDiv
$("div") //will return an array containing all "div" elements.
$(".header") //will return an array containing elements which has class name = header
$("input[name='emailaddress']") //will return an array containing "input" elements which has name = emailaddress
Go to jQuery Selectors Demo page to see this live.
There are lots of such selectors available in jQuery to help developers. You can check out more of them here: http://docs.jquery.com/Selectors
It's a magical concept in jQuery to make code short and simple. Every jQuery method returns query object itself so it will allow performing function on it and maintaining a chain.
This code will add class "sample" to all divs, will replace its inner HTML with "html changed" and make all divs visible.
jQuery Object Accessors
Object accessors can be used on returned object from any of jQuery selector. The most useful method is each; it will help to loop through every element matched by selector and execute a function with context of this element.
Go to jQuery Object Accessors Demo page to see this sample live.
jQuery has great collection of event related helpers, you can check them out here http://docs.jquery.com/Events. For event handling, bind and unbind is most usable methods.
This code will add onclick event handler to all paragraphs in document and on click of them will append text "clicked" to the clicked paragraph
$("p").bind("click",clickMe); // Will bind clickMe function on click event of paragraphs
$("p").unbind("click",clickMe); // Will unbind clickMe function on click event of paragraphs
jQuery has document ready event which helps to run methods when DOM is ready to be traversed and manipulated.
This will append "This text appended on DOM ready" to paragraphs available in document when DOM is ready.
Go to jQuery Events Demo page to see this example live.
For more details on DOM ready please visit: http://docs.jquery.com/Events/ready#fn
Ajax using jQuery and ASP.NET
Ajax with jQuery is really simple to achieve. There are enough options to get asynchronous reply from server with jQuery Ajax.
"load" method is a simplest form of jQuery Ajax, It will load html content in document element returned from server
Example of jQuery Ajax load method:
// Response from page AjaxCall.aspx will get loaded in
Go to jQuery Ajax Demo page to see it live.
jQuery Ajax with JSON data
There are lots of free code and libraries available for asp.net to generate JSON data. Json.Net is one among them.
I've created simple method using Json.Net which will return JSON representation of a datatable.
Now we will try to parse this JSON data and build a grid out of this data at client side.
It is really simple task using jQuery:
// jQuery ajax with POST method
Go to jQuery Ajax JSON Demo page to see this example live.
Effects with jQuery
jQuery has inbuilt effect methods. Show, hide, slideDown, slideUp, toggle, fadeIn, fadeOut, animate etc. are few of them. Almost effect method has parameter for duration and callback function, callback function will get called after finishing an animation of effect.
jQuery Effects Example:
// will hide the div "divSample", and it will animate
for 1000 miliseconds
jQuery allow us to create our own animation using "animate" method:
// will animate the div "divSample"
Go to jQuery Effects Demo page to see this effects live.