Note: This post is part of a long-running series of posts covering the union of jQuery and ASP.NET: jQuery for the ASP.NET Developer.
Topics in this series range all the way from using jQuery to enhance UpdatePanels to using jQuery up to completely manage rendering and interaction in the browser with ASP.NET only acting as a backend API. If the post you're viewing now is something that interests you, be sure to check out the rest of the posts in this series.
One of jQuery’s greatest strengths is its thriving plugin ecosystem. Hundreds of plugins are available at plugins.jquery.com alone, with even more hosted on author sites. If you think of a feature, chances are there’s a jQuery plugin to implement it in just a few lines of code (if that).
Having used jQuery with ASP.NET for over a year now, I’ve discovered that some plugins are more easily combined with ASP.NET than others. In fact, one popular plugin even fails completely when used with ASP.NET AJAX.
Without further ado, here are seven of my favorites. I couldn’t begin to rank them preferentially, so I ordered them by how long I’ve been using them with ASP.NET.
A highly configurable plugin that adds datepicker functionality to your pages. You can restrict the functionality in various ways, you can select date ranges, and you can provide the date in picker in a number of languages.
Datepicker is one of the jQuery plugins that I’ve been using the longest. In fact, it is what initially caused me to start using jQuery with ASP.NET, due to the lack of a good DHTML calendar control for ASP.NET at the time.
Originally an independent effort, Datepicker is so good that it was recently rolled into the official jQuery UI project. It’s definitely worth checking out.
One thing to watch out for when using Datepicker with ASP.NET AJAX is that an UpdatePanel’s refresh wipes out the DOM inside its <div> and $(document).ready() doesn’t fire on partial postbacks. You’ll need to use an EndRequest handler or the pageLoad shortcut to ensure that Datepicker’s events are rewired afterwards.
Download: http://jqueryui.com/download/ (don’t forget UI Core also)
InnerFade is a great way to add tasteful pizzazz to your pages, without resorting to technologies such as Flash or Silverlight. The effect is of the same quality, while retaining search engine optimization and accessibility.
ASP.NET’s ListView control makes quick work of rendering the unordered list that InnerFade requires.
Demos and download: http://medienfreunde.com/lab/innerfade/
The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.
Enter BlockUI. BlockUI brings a plethora of modal dialog functionality to the table. It facilitates everything from simple popups to modal, multistep forms.
Its flexibility is especially useful when mixing it with ASP.NET. For example, see my recent examples of using it to provide progress indication during a partial postback and displaying a modal confirmation dialog after an UpdatePanel refresh.
Demos and download: http://www.malsup.com/jquery/block/
Tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. Tablesorter can successfully parse and sort many types of data including linked data in a cell.
The premise behind Tablesorter is simple, but its nearly flawless execution is what really shines. If you have a reasonably sized dataset, client-side sorting may be the best solution. Its speed is impossible to match with server-side functionality.
WinScrabble.com is an example of putting Tablesorter to good use in an ASP.NET application. Just type a few letters in the large text box and click “Find Words”. A web service’s JSON result is rendered on the client side. Finally, Tablesorter is applied to that table, so that clicking any column header instantly re-sorts it.
It’s worth noting that you can’t directly use this plugin with the GridView, since it doesn’t render a THEAD element. However, you can use the CSS Friendly Control Adapters to rectify that problem in both ASP.NET 2.0 and 3.5.
Demos and download: http://tablesorter.com/docs/
jTemplates makes rendering the JSON result of ASP.NET AJAX web services trivial. If you’re using jQuery with ASP.NET AJAX, jTemplates is a perfect companion to simplify that common task.
One ASP.NET specific caveat: IIS will not serve files with unknown extensions. Since many jTemplates examples use the .tpl convention, confusion often ensues when IIS intervenes in the request.
Be sure to either enable the .tpl file type in IIS or use another extension for your template files, such as .htm.
Demos and download: http://plugins.jquery.com/project/jTemplates
Rick Strahl has an excellent tip in his recent templating article, describing what I believe is the current best practice for defining a template inline. Nice find, Rick!
Creates enhanced Suckerfish-style dropdown menus from existing pure CSS dropdown menus. Works with multiple-tiered menus and multiple menus per page. Great for both drop-down menus and and multi-tier horizontal nav bars. Very light-weight and degrades gracefully.
This plugin turns an unordered list into a full-fledged menu, complete with hover effects, simple animation, and keyboard accessibility. It can be configured both horizontally and vertically. Since styling is CSS based, its result can be infinitely customized to match any design.
Combined with the ASP.NET Menu control and the CSS Friendly Control Adapters, it can be used to automatically generate navigation for your ASP.NET website, based solely on an XML Web.SiteMap file. Great for ease of maintenance.
It’s also interesting to note that Media Temple hosts the jQuery websites. It’s a small Internet.
Of all the plugins on this list, quickSearch is the one that I have discovered most recently, yet it is quickly becoming one of my all-time favorites.
It works by attaching to a table, list, or set of paragraphs, displaying a search field above or below the targeted elements, and then filtering those elements in real-time as characters are typed in the search field.
You really have to try it to appreciate how well it works. Every time that I’ve implemented it, it has received rave reviews. Blinding speed plus precise accuracy equals happy users.
Demos and download: https://github.com/DeuxHuitHuit/quicksearch
Update: If you’re interested in using this with ASP.NET, be sure to check out the post I’ve written with an example of using quickSearch to interactively search items in a table.
I hope you find these plugins as useful as I have, and that this list serves to save you the time it took me to find and test them.
Have I omitted your favorites? Feel free to leave a comment below with your picks.
6 Mentions Elsewhere
- Dew Drop – October 20, 2008 | Alvin Ashcraft's Morning Dew
- Reflective Perspective - Chris Alcock » The Morning Brew #205
- jQuery Quicksearch « Hermoso día…
- 2008 October 24 - Links for today « My (almost) Daily Links
- Enlaces a 22 de Octubre: ASP.NET, Visual Studio, WPF y Silverlight « Thinking in .NET
- 10 most Useful resources for Jquery across the web | TechArtifact