Creating a Filtering User Interface With jQuery In a Web Forms Application: Part 1

Posted by: 4GuysFromRolla.com Headlines, on 07 Oct 2009 | View original | Bookmarked: 0 time(s)

jQuery is a lightweight, cross-browser JavaScript library designed to ease JavaScript's most common tasks, including inspecting and manipulating the Document Object Model (DOM) and making out of band HTTP requests to support AJAX functionality. In plain English, jQuery makes it easy to perform client-side tasks like adding or removing attributes or CSS classes to elements in the DOM, or showing or hiding elements on the page in response to a user action (such as clicking a button). jQuery is used by many popular Web 2.0 sites to help implement rich, interactive features. jQuery can certainly be used in an ASP.NET application, although integrating client-side script into a Web Forms application can sometimes be a bit trying. JavaScript development fits more naturally with ASP.NET MVC applications; in fact, the ASP.NET MVC framework includes the jQuery libraries. What's more, Microsoft has announced that jQuery will be included with Visual Studio 2010 and beyond.

I recently had the opportunity to use jQuery in a intranet-based line of business Web Forms application. This application has a number of reporting screens that use a GridView control to display the report results. Users often want to filter the results to get a more concise snapshop of the data they are interested in, and to that end many of these reports include a filtering user interface, which is a series of drop-downs, checkboxes, and textboxes, through which they can apply various filtering criteria.

Some of these filtering user interfaces have gotten so expansive that nearly an entire screen of real estate is chewed up by the filtering user interface alone! We needed a way to collapse this filtering interface and only expand it upon user request. Using jQuery, some CSS, and a few lines of JavaScript, I was able to implement an entirely client-side approach to expanding and collapsing the filtering interface. This article, Part 1, walks through the nuts and bolts of this functionality. The upcoming Part 2 looks at how to extend the collapsible filtering user interface functionality so that it remembers the collapsed/expanded state on a user-by-user basis. Read on to learn more!
Read More >

Category: ASP.NET | Other Posts: View all posts by this blogger | Report as irrelevant | View bloggers stats | Views: 2580 | Hits: 63

Similar Posts

  • Creating a Filtering User Interface With jQuery In a Web Forms Application: Part 2 more
  • Announcing the WebsiteSpark Program more
  • Accessing Images On Flickr From An ASP.NET Website Using The Flickr.Net Library more
  • Announcing the Microsoft AJAX CDN more
  • Auto-Start ASP.NET Applications (VS 2010 and .NET 4.0 Series) more
  • Unit Testing - Do Repeat Yourself more
  • Telerik Launches RadControls for Silverlight 3 for Line-of-Business Application Development more
  • Update to Logging in to DotNetNuke from a Silverlight Application with RIA Authentication more
  • ASP.NET Membership Tip: Requiring New Users To Change Their Password When Logging On For The First Time more
  • Session State Not Working? Check Your Web Garden! more

News Categories

.NET | Agile | Ajax | Architecture | ASP.NET | BizTalk | C# | Certification | Data | DataGrid | DataSet | Debugger | DotNetNuke | Events | GridView | IIS | Indigo | JavaScript | Mobile | Mono | Patterns and Practices | Performance | Podcast | Refactor | Regex | Security | Sharepoint | Silverlight | Smart Client Applications | Software | SQL | VB.NET | Visual Studio | W3 | WCF | WinFx | WPF | WSE | XAML | XLinq | XML | XSD