7 of my favorite jQuery plugins for use with ASP.NET
AJAX, ASP.NET, UI, jQuery By Dave Ward on October 19th, 2008One 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.
Datepicker
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.
Demos: http://ui.jquery.com/demos/datepicker/
Download: http://ui.jquery.com/download_builder/ (don’t forget UI Core also)
InnerFade
InnerFade is a small plugin for the jQuery JavaScript library. It’s designed to fade you any element inside a container in and out.
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/
BlockUI
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.
When building modern web applications, modal popup functionality is a common requirement. JavaScript’s alert() and confirm() modals aren’t visually compelling enough to use for much, and are not customizable.
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
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
jTemplates is a template engine 100% in JavaScript.
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!
Superfish Menus
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.
Demos: http://users.tpg.com.au/j_birch/plugins/superfish/#examples
Download: http://users.tpg.com.au/j_birch/plugins/superfish/#download
It’s also interesting to note that Media Temple hosts the jQuery websites. It’s a small Internet.
jQuery quickSearch
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: http://rikrikrik.com/jquery/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.
Conclusion
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.
Similar posts
What do you think? Your comments are welcome.
I appreciate all of your comments, questions, and other feedback, but please try to stay on topic. If you have a question unrelated to this post, I recommend posting on the ASP.NET forums instead.
If you're replying to an existing comment, please use the threading feature. To do this, click the "Reply to this" link underneath the comment you're replying to.
14 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
- Weekly Link Post 65 « Rhonda Tipton’s WebLog
- gearhed.com » Blog Archive » Best of the web - my pick for October 2008
- Best of the web - my pick for October 2008 | zbStudio.net
- Jquery – a new javascript « Easytech Life Blogs
- Weekly Web Nuggets #35 : Code Monkey Labs
- Tagz | "7 of my favorite jQuery plugins for use with ASP.NET | Encosia" | Comments
- 10 most Useful resources for Jquery across the web | TechArtifact
- uberVU - social comments
- October 22nd Links: ASP.NET, Visual Studio, WPF and Silverlight | OOP – Object Oriented Programing
Nice collection, Dave!
Good plugins collection .
how about jqgrid?
http://www.trirand.com/jqgrid/jqgrid.html
jqGrid looks potentially great to me.
I’ve been meaning to give it a try, but haven’t had a chance to try it with ASP.NET myself. Have you used it with a .NET service supplying the data?
Wow. Great post, Dave. I wasn’t familiar with most of these. I checked out the quickSearch demo. That looks amazing. Great find.
my favorite is jquery.ajaxdotnet to call any web services, or WCF. I also use nyroModal for all modal call. It’s really flexible, and has few callback event that can be helpful to complete the modal windows. I really like your page and check it out regularly.
Dave,
There is an add on to the tablesorter plugin that provides filtering along the lines of the quickSearch plugin that may be worth looking at. I wrote about a few days ago http://beckelman.net/post/2008/10/16/Client-Side-ASPNET-ListView-Sorting-via-jQuery-TableSorter-Plugin-Demo.aspx.
Thanks for the collection.
Bill
I like your menu on http://mediatemple.net/ .
Great stuff! Thanks!
For the record, I haven’t worked on Media Temple’s website. I just noticed that they were using jQuery and Superfish on it, and thought it was a good example of what can be done with the plugin.
Ok Dave, this article is really cool!
There are many JQuery plugins. Here are some of my favorites and where it makes sense to use them.
JQGrid – This is a GridView on steriods. It uses Json to communicate data via a web service or WCF. It allow for parent child in the grid. User has ability to filter rows on any of the columns. This is similar to what Matt Berseth has done with the listview. Has a row Editor, but this is not inline. It looks like detailsView. You can hook to jval for validation. Although it has everything including the kitchen sink, you do have to play with it to get it to play with ASP.NET. Definitely not the first plugin to play with.
BabySteps – This is like a Wizard control with no postback. It even has a hook so you can run a validation before moving to the next page.
JVal – Very pretty validation. Will put a red line around the box that has the problem, and a fly out message will tell the user how to correct. It uses regular expressions for validation with some predefines for you. Jval will limit the input type if you set it. Like nothing but digits.
LyteBox – I have used this in two ways. On my website way is to display a page of thumbnails. User click on thumb and a popup of a new asp page appears. You can see an example at http://www.snapsintime.com/Everyone/WorkedWithOverview.aspx. This allows me to promote the model by display contact details about the model. I use lytebox again with a diffrent effect. This time when user click a thumbnail a larger version of the picture pops up. The larger picture will fall into a slide show. This plugin is great for photo websites. All of these features comes with plugin
Lifecycle – This is simular to the InnerFade that you mentioned. I really don’t know the diffrent between the two. I know that LifeCycle has a huge number of fade in choice ( which I am not making use of). The main page of http://www.SnapsInTime.com has an example.
Rating – Got to have one of these on a Photographers website right? This guy is so cool. In my example I have a set of thumbnails with a star rater under each picture. When user clicks on a star, then “Rating” does the Ui stuff and sends a message to a webservice. Webservice updates the db. There is no delay to user.
There are so many plugs out there. With Microsoft adopting jquery I foresee the number of plugins exploding. For example ASP.Net programmers are use to webforms and Server Controls. In MVC there is no more Server Controls. jquery plugins may take over the duties of the Server Controls.
Great stuff…
quickSearch is awesome, thanks for this post. Although it would be nice to have a “nothing found” message option.
That would be handy.
For now, you could use an “onAfter” callback to display the nothing found message if no elements were visible after filtering.
Very Nice Post Dave !!Really appreciate your efforts.
It would be best if you can demonstrate how to develop a jQuery pluggin for ASP.Net or How to use a jQuery pluggin in ASP.Net. Something which is above a demo. Just like a step by step guide to use/develop jQuery pluggin in ASP.Net.
Shail
I think this video is a good start Shail.
http://blog.dmbcllc.com/2008/10/15/getting-started-with-jquery-and-aspnet/
And this one is for building new plugin for jQuery from scratch.
http://webcloud.se/article/Building_jQuery_plugins
Thank you so much Ramil :)
These are very helpful
no worries Shail! :) I am glad you like it.
Great post!! Really usefull. A few plugins i´ve been using:
jqModal: http://dev.iceburg.net/jquery/jqModal/
Accordion Content: http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm
Leo
I couldn’t live without the “official” Autocomplete plugin
http://docs.jquery.com/UI/Autocomplete
Point the url parameter at a generic handler (ashx), pass back plain text with your results on per line, and bam, an autocomplete solution that’s super smooth
Somebody should tell about any Popup plugin also also ;) if there is any :D
Please !!!!
I don’t know why but the jQuery quickSearch doesn’t work with listview. :-(
It’s working !!! My mistake. Sorry.
I started using jLINQ for jQuery. It’s been pretty handy so far…
http://plugins.jquery.com/project/jLINQ
Very nice collection Dave. I personally find the last one (quickSearch) very useful since I never heard about it before. Thanks!
Try Flexigrid, even though it is still in beta version but it’s nice and hope gain popularity and be the official grid for JQuery
very nice
thnks alot foe collection.!!! It’s usefull :d
Excellent article Dave. Just one note though, the GridView has a UseAccessibleHeader property that when set to true will render the ‘th’ tags without using the CSS Control Adapters
Unfortunately, UseAccessibleHeader renders those <th> elements in a <tr> instead of a <thead>. So, it doesn’t work with Tablesorter.
see this page to add thead to gridview headers. so that you can use tablesorter with gridview also.
http://ponnu.net/index.php/2008/10/09/sortable-gridview-using-jquerys-tablesorter/
Hi Dave,
Thanks for your kind comments about my quickSearch plug-in, I’m planning to add a “no results” option to it very soon
Rik
thanks, also to ones commented.
I would suggest PikaChoose if you’re looking to build an image gallery easily.
Having ASP generate a unordered list of images and combining it with PikaChoose is a quick and easy way to increase your users experience.
nice article. i’m using jqgrid with asp.net in a project right now and it works great. there are some tweaks you have to do to the serialization/deserialization of json for it to work properly with .net, but everything else is smooth (and faster than flexigrid).
This code renders a gridview correctly
protected void GridView1_DataBound(object sender, EventArgs e)
{
if (this.GridView1.Rows.Count > 0)
{
GridView1.UseAccessibleHeader = true;
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
}
}
Thank you sir. They are great :)
Just to let you know, we have created a server control for ASP.NET that handles almost all logic with jqGrid client-side communication. The experience is similar to what you have with asp:GridView.
Beta is availavable here (demo)
http://www.trirand.net/demo.aspx
There are also download bits (DLL assembly) and sample projects available.
Rumen Stankov
jqGrid
You should check out my jQuery plugin I created that will take a table and convert it to JSON for simple use with JSON.NET. Additionally, you can customize the fields and use custom attributes for building the JSON string…all fully configurable and unobtrusive. It works perfectly with the asp.net grid as well as other controls that render as tables.
http://fletchzone.com/post/jQuery-Convert-HTML-Table-to-JSON.aspx
I am learning. Thank you ~Debbie:)