• Ajax Control Toolkit
  • Download
  • Tutorials
  • FAQ
  • Contribute
  • Ajax Minifier

• Microsoft Ajax CDN

jQuery Tutorial Dibs

Please claim tutorials below by clicking Edit and putting your name in parenthesis after the tutorial name. For example, I already claimed dibs on the Creating an Autocomplete TextBox tutorial in the jQuery and MVC section below.

jQuery Content Plan

Principles:

• Tutorials are short (around 4 pages of text)
• Tutorials are cookbook style – structured as PROBLEM/SOLUTION
• Tutorials are self-contained
• Tutorial page names should start with jquery_ For example, the jQuery tutorial on the AutoComplete plugin that appears in the MVC section is named jquery_mvc_autocomplete
  

Sections:

• Introduction to jQuery
• jQuery and ASP.NET Web Forms
• jQuery and ASP.NET MVC
• jQuery UI and ASP.NET Web Forms
• jQuery UI and ASP.NET MVC
• jQuery Application Building Walkthroughs
  

Introduction to jQuery

1. How Do I Start Using jQuery? (James Chambers)
   1. Explains how to get jQuery
   2. jQuery vs jQuery UI vs jQuery Plugins
2. How Do I Use jQuery in a Page? (Ralph Whitbeck)
   1. Explains document ready
   2. Performance issues with script placement in page
3. How Do I Use jQuery Selectors? (Ralph Whitbeck)
4. How Do I Use jQuery to Handle Events? (Ralph Whitbeck)
5. How Do I Handle jQuery Errors and Display them on the Client? (Elijah Manor) *Needs Review (2nd Revision)
6. How Do I get Intellisense for jQuery? (James Chambers)
   1. Explains the VSDoc file
   2. Explains that you get Intellisense from the CDN with VS 2010
   3. Explains how you can add comments to your scripts and get intellisense
7. How Do I debug jQuery Scripts? (Ralph Whitbeck)
   1. Explains how to set JavaScript breakpoints and step through your application
   2. Explains how to use Fiddler/Firebug with jQuery
      

jQuery and ASP.NET Web Forms

1. How Do I Add jQuery to an ASP.NET Web Forms Application?
   1. Using the ScriptManager with jQuery
   2. Using jQuery from the CDN
2. How Do I Use jQuery Selectors with ASP.NET Web Forms?
   1. Explains jQuery selectors
   2. Explains Web Forms Static IDs
3. How Do I Use jQuery Animations with ASP.NET Web Forms? (Rick Strahl)
   1. Simple examples of animations with Web Form controls (sliding login form)
4. How Do I Load Page Content Dynamically with jQuery? (Rick Strahl)
   1. Explains how to use jQuery $.load() to load page content dynamically.
5. How Do I Retrieve Data from a Page Method? (Rick Strahl)
   1. Explains how to call static page methods with jQuery.
6. How Do I Serialize Dates with JSON? (Rick Strahl)
7. How Do I Display Data with jQuery Templates? (Rick Strahl)
   1. Explains how to use jQuery templates to format the data retrieved from a page method.
8. How Do I Post Data to a Page Method? (Rick Strahl)
   1. Explains how to do a form URL encoded post with jQuery
   2. Explains how to serialize a form post into JSON.
9. How Do I Display a jQuery Animation with an UpdatePanel (Rick Strahl)?
10. How Do I use jQuery Plugins with ASP.NET Web Forms (Rick Strahl)
    1. Provides simple samples of using plugins with Web Form controls (for example, the TableSorter with the ListView)
11. How Do I use JSONP to Retrieve Data from a Remote Website? (Ralph Whitbeck)
    

jQuery and ASP.NET MVC

1. How Do I Add jQuery to an ASP.NET MVC Application? (James Chambers)
   1. Adding a static script reference
   2. Using jQuery from the CDN
2. How Do I Retrieve Data from a Controller Action? (James Chambers)
   1. Using the JsonActionResult
   2. Using GET versus POST (security issues)
   3. Using JSON Serialization
3. How Do I Serialize Dates with JSON?
4. How Do I Use jQuery Templates? (Dave Ward)
5. How Do I Page and Sort Ajax Data?
   1. Use a jQuery paging plug-in with data returned from a controller action
   2. Sort data returned from JsonActionResult
6. How Do I Post Data to a Controller Action? (James Chambers)
   1. Posting using Form-URL-Encoded values
   2. Posting using JSON (currently very hard)
7. How Do I Represent URLs in JavaScript?
   1. Generate an array of URLs from the routing rules in a JavaScript array.
   2. Eilon has concrete suggestions here.
8. How Do I Use jQuery Validate with ASP.NET MVC? (Elijah Manor)
   1. Explains how to use the jQuery Validate adapter from futures
   2. Explains how to do remote validation
9. How Do I Use JSONP to Retrieve Data from a Remote Website? (Elijah Manor)
   

jQuery UI and ASP.NET Web Forms

1. How Do I use jQuery UI with ASP.NET Web Forms? (Ralph Whitbeck)
   1. Explains how to download and install jQuery UI
   2. Explains how to use Theme Roller
2. How Do I Display a Dialog Box? (Ralph Whitbeck)
   1. Example with Web Forms
3. How Do I Create a Popup Date Picker? (Ralph Whitbeck)
   1. Example with Web Forms
4. How Do I Create an Autocomplete TextBox? (Ralph Whitbeck)
   1. Example with Web Forms
5. How Do I Display an Accordion? (Ralph Whitbeck)
   1. Example with Web Forms
6. How Do I Display a Progress Bar? (Ralph Whitbeck)
   1. Example with Web Forms
7. How Do I Display a Slider? (Elijah Manor)
   1. Example with Web Forms
8. How Do I Create Fancy Buttons? (Ralph Whitbeck)
   1. Example with Web Forms
      

jQuery UI and ASP.NET MVC

1. How Do I use jQuery UI with ASP.NET MVC? (James Chambers)
   1. Explains how to download and install jQuery UI
   2. Explains how to use Theme Roller
2. How Do I Display a Dialog Box?(James Chambers)
   1. Example with MVC
3. How Do I Create a Popup Date Picker? (James Chambers)
   1. Example with MVC
4. How Do I Create an Autocomplete TextBox? (Stephen Walther)
   1. Example with MVC
5. How Do Display an Accordion? (James Chambers)
   1. Example with MVC
6. How Do I Display a Progress Bar? (James Chambers)
   1. Example with MVC
7. How Do I Display a Slider? (James Chambers)
   1. Example with MVC
8. How Do I Create Fancy Buttons? (Elijah Manor)
   1. Example with MVC
      

jQuery Application Building Walkthroughs

Progressively Enhancing Web Forms with jQuery

Walks through taking a server-side Web Forms Lookup app and making it a groovy client jQuery app while not violating the principle of Progressive Enhancement.

1. Adding an autocomplete plugin
2. Adding client templating to a GridView
3. Adding browser history support
4. Adding jQuery animations
5. Showing Record Details in a Dialog Plugin – make an Ajax call to get full record details.
   

Progressively Enhancing MVC with jQuery

1. Adding an autocomplete plugin (Elijah Manor) *Needs Review
2. Adding client templating to a GridView (Elijah Manor) *Not Started
3. Adding browser history support (Elijah Manor) *Not Started
4. Adding jQuery animations (Elijah Manor) *Not Started
5. Showing Record Details in a Dialog Plugin (Elijah Manor) *Not Started
   • Make an Ajax call to get full record details