[New! Check out ScottGu's blog on jQuery support for Visual Studio. I think this proves what a great library jQuery really is.
ScottGu Blog w/jQuery]
I had the opportunity to attended STPCon Fall 2008 (http://www.stpcon.com/) test conference in Boston last week. The thrilling 6.5 hour plane ride back to Seattle gave me an opportunity to see if I could get one of my favorite jQuery plugins integrated with an ASP.net GridView.
As a starter for this project I hijacked an example that Matt Berseth (http://mattberseth.com/) had listed on his site for building GridViews. He writes a fantastic blog with examples that are far better than I could ever write. I’d highly recommend spending some time on his blog. I’d also suggest hitting up jQuery.com and poking around there as well. The jQuery plugin library is where I found Facebox which is actually a nice Facebox style popup div (fade in, out, static positioning, transparent borders) . It’s proven to be flexible on pretty much every major browser which is why I use it here.
I had two goals for this post. #1 was to show how easy it is to use jQuery (again, if you’re not familiar with jQuery, read up on it. It’s a great script library that has saved me hundreds of dev hours over the years) with ASP.net and #2 to show how to use ASP.net AJAX to build template HTML based on web user controls.
Below is the resulting screen of this post.
The original grid is nothing special, it simply shows a bunch of orders. The coolness starts where I added the details button to the grid that launches the Facebox jQuery plugin that behind the scenes spins up an ASP.net user control and renders the controls HTML to a ScriptService (.ASMX) AJAX call and renders it in the Facebox div.
The JavaScript behind this is super easy. You can see it ALL here.
I won’t go into depth on the in’s and out’s of the code. It would take eons considering it includes ASP.net AJAX, xPath, jQuery, and Facebox.
Feel free to download the project from my Skydrive space here:
Subscribe