Using jQuery Plugins with ASP.NET
The controls found in the AjaxControlToolkit fit perfectly into the ASP.NET programming model (as to be expected). You can configure the controls properties through the markup which in turn affects how the control's display and behavior on the client. Many of the control's properties support databinding so using the controls within a databound control like a ListView or a GridView is no big deal. Take for example the ProgressBar Toolkit control I blogged about (here and here). One of the places that I use this control is in a GridView's TemplateField. Instead of displaying the percentage as a text value, I use the ProgressBar to display the percentage in a more visual manner. It looks something like this ...
With the Toolkit, setting this up is really simple. Just use a databinding expression to set the Value property of the ProgressBar control to the value of the PercentComplete property of the databound item. Done.
And if I start using and building jQuery plugins I am thinking there will be cases where I am going to miss how simple this is. So after learning about jQuery's metadata plugin, I thought it would be interesting to see explore it a bit more to see if it could be used to enable some of the common scenarios. There are 2 things the metadata plugin has going for it that I think will help it fit into the ASP.NET programming model ...
- If a jQuery plugin supports the metadata plugin in, you can specify the plugin options on a per element basis by using some JSON within the elements class attribute to specify the option properties you would like to use. To me this really doesn't feel too different than pointing a Toolkit control (using TargetControlID) at an existing web control.
Creating the Plugin
Before I show how this can be done using the ListView, I thought I would show what the jQuery plugin looks like (granted it doesn't have nearly as many features as the Toolkit version, but it still very useful for the data grid scenario). Here is how the plugin works ...
- Coalesce the default options together with any options that are explicitly provided when the progressbar plugin is applied (Line #5)
- Inject the DIV elements that are used for styling the progress bar (Line #9)
- Check to see if the metedata plugin is available. If it is override any of the element specific options (Line 12)
- Finally, use find to locate the progress_indicator DIV whose background image is set to the progress image (this is applied via the stylesheet). Set the title attribute of this element and animate the width to the specified value. (Lines #16-#20)
Could it get any simpler?
Using the jQuery progressbar Plugin with the ListView
Then, I can use databinding expressions to encode the tooltip and value options using the databinding expression. It isn't as pretty, but it defiantly works. All of the magic happens in line #16. And if you set the control to runat server, you could populate this value from the codebehind as well.
Applying the Plugin
And the only remaining bit of awkwardness is that the progressbar plugin needs to be applied twice. Once when the page first loads.
And then again just after an UpdatePanel is refreshed (I apply it to the panels new contents) ...
CSS: 2 KB
That's it. Enjoy!