Use jQuery and quickSearch to interactively search any data

AJAX, ASP.NET, UI, jQuery By Dave Ward on October 31st, 2008

While reviewing my latest post’s outbound click-through stats, I noticed that most of you found Rik LomasquickSearch more interesting than the rest. In light of that interest, I’ve decided to show you an example of how you might implement its functionality in conjunction with ASP.NET.

For this demonstration, I’m going to use Delicious as a source of sample data to apply the technique to. I’m sure you’re getting tired of my RSS feed as demo data, and the Delicious API provides an abundance of topical data via jQuery tag feeds.

In this post I will show you how to use LINQ to XML to query the Delicious API, display that data in a table, apply the quickSearch plugin to that table, work around a problem that arises when using quickSearch with ASP.NET, and lay the groundwork for a “no results” state.

Click here to read the rest of this post »

7 of my favorite jQuery plugins for use with ASP.NET

AJAX, ASP.NET, UI, jQuery By Dave Ward on October 19th, 2008

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.

Click here to read the rest of this post »

Using jQuery to display a modal UpdatePanel confirmation

AJAX, ASP.NET, UI, jQuery By Dave Ward on October 11th, 2008

A screenshot of the modal confirmation dialogAfter the previous example of integrating jQuery and ASP.NET AJAX to display modal progress indication, there were requests that I follow it up with an example of also displaying the confirmation modally. So, I’m going to expand the original post with a technique for doing exactly that.

If you missed my first post on the topic, do be sure to read it first. Otherwise, this continuation may be difficult to follow.

Click here to read the rest of this post »

Using jQuery to enhance ASP.NET AJAX progress indication

AJAX, ASP.NET, UI, jQuery By Dave Ward on October 4th, 2008

Animated example of using jQuery's BlockUI with an UpdatePanelIn the spirit of Microsoft’s official embrace of jQuery last week, I’d like to show you an example of how easily you can add jQuery functionality to existing ASP.NET AJAX applications. jQuery allows you to achieve exceptional results with minimal difficulty, and integrating it with ASP.NET is not an exception.

My previous posts about jQuery have been somewhat lower level, incorporating JSON, web services, and the like. While these are important tools to have at your disposal, the realities of software development sometimes leave us scrambling for something quick and dirty.

In those situations, you may find yourself using the UpdatePanel.

To that end, I’m going to show you how easily you can use jQuery’s BlockUI plugin to display a modal progress indicator during an UpdatePanel’s partial postback.

Click here to read the rest of this post »

Easily build powerful client-side AJAX paging, using jQuery

AJAX, ASP.NET, JavaScript, UI, jQuery By Dave Ward on August 20th, 2008

A book's pages blowing in the wind

When I suggest that developers consider using web services and a more client-centric approach to solve their UpdatePanel performance problems, the lack of paging is often their first objection.

Conventional ASP.NET wisdom seems to hold that the GridView/UpdatePanel combo is king when asynchronously paging through a data source. If you’ll give me a few minutes of your time, I’d like to challenge that notion!

Click here to read the rest of this post »

How to easily enhance your existing tables with simple CSS

AJAX, ASP.NET, CSS, UI, jQuery By Dave Ward on August 13th, 2008

In two of my recent posts, I demonstrated using ASP.NET AJAX in conjunction with jQuery or ASP.NET AJAX 4.0′s templating features to generate client side tables from JSON data. However, what I neglected to show you was how to make them look even remotely presentable.

In this post, we’ll continue where those posts left off. I’m going to show you how you can improve the table’s presentation in three steps:

  • Setting basic styles for the page and table.
  • Improving the table header by using strong contrast.
  • Adding subtle gridlines to the table body.

Click here to read the rest of this post »

A sneak peak at ASP.NET AJAX 4.0′s client-side templating

AJAX, ASP.NET, JavaScript, UI By Dave Ward on July 23rd, 2008

Hot on the heels of the recent ASP.NET AJAX roadmap, Bertrand and team have released a limited preview of the new AJAX functionality coming in ASP.NET 4.0.

To see how the new functionality stacks up, I decided to recreate my recent jTemplates example, using only ASP.NET AJAX and its new templating features. Eventually, I settled on using the DataView class, which offers more advanced, repeater-like functionality.

Having successfully completed the exercise, I thought it seemed like something that you might find interesting too. The solution boils down to four easy steps:

  • Creating a page method to return JSON data.
  • Setting up a ScriptManager to coordinate script and page method access.
  • Defining the client-side template that will render the JSON data.
  • Using JavaScript to render the template, using the page method’s return.

Click here to read the rest of this post »

PostBack Ritalin Updated (v0.10)

AJAX, ASP.NET, PostBack Ritalin, UI By Dave Ward on June 30th, 2008

After a long beta period, PostBack Ritalin v0.10 is finally ready for release. This is absolutely the best version yet. Many edge case issues have been resolved, and the code is leaner and more efficient than ever before.

Changes include:

  • Complete rewrite of the JavaScript component of the control. Instead of global variables and functions, PostBack Ritalin is now a proper JavaScript object. This significantly minimizes its namespace impact on the DOM.
  • JavaScript embed is now minified.
  • By popular demand, added support for disabling LinkButtons.
  • Added optional image pre-loading for WaitImages. Previously, disabled ImageButtons could take a bit too long to show their disabled image the first time, due to HTTP delay. Enabling pre-loading will cause the browser to pre-fetch and cache the disabled images, resulting in instant feedback for the disabled state.
  • Several bug fixes, thanks to your invaluable feedback.

I’m especially happy with the JavaScript rewrite. Using the object oriented approach on the client side, I’ve added the beginnings of a client-side API similar to the AJAX Toolkit controls (get_property, set_property, etc). Currently, this won’t be of much use to you, but I’ll be expanding and documenting the client-side API in future versions.

The one feature that I wasn’t able to add yet is support for disabling all buttons on the page or within the triggering container. Considering the sweeping changes to the entire client-side portion of the control, I decided to avoid adding significantly more complexity to it in the same release.

I haven’t forgotten about it though, and will add the feature soon.

As always, the free download is available on the PostBack Ritalin project page.

Use jQuery and ASP.NET AJAX to build a client side Repeater

AJAX, ASP.NET, JavaScript, UI, jQuery By Dave Ward on June 26th, 2008

There was some interesting discussion on Matt Berseth‘s blog recently, regarding methods for building and displaying markup on the client side. Though I haven’t posted any examples here before, rendering markup on the client is a technique that I use often and recommend.

By sending only data to the client, you can profoundly reduce the size of what you send and see a substantial increase in performance. You also allow yourself the ability to easily add features like light-weight sorting and paging on the client. This can not only improve your users’ experience, but reduce server load and bandwidth requirements.

To that end, I’m going to walk you through these four steps to effectively implementing a client side Repeater, using ASP.NET AJAX and jQuery:

  • Create an RSS Reader page method to return JSON data to the client.
  • Call that page method with jQuery.
  • Use the returned data to build a table on the client side.
  • Improve upon the table creation with a templating plugin.

Click here to read the rest of this post »

Inline Edit Box on CodePlex and new PostBack Ritalin beta

AJAX, ASP.NET, PostBack Ritalin, UI By Dave Ward on May 16th, 2008

I’ve decided to open source Mike Davis’ ever-popular Inline Edit Box .NET control. Neither of us have enough time to maintain it properly, and several of you have expressed interest in contributing if it were open source. So, its new home is CodePlex: http://www.codeplex.com/InlineEditBox

You’ll have to bear with me, because this is my first CodePlex project and I’m still familiarizing myself with the admin functionality of the site. If you have any trouble contributing to the project, contact me directly and I’ll do my best to resolve it quickly.

Click here to read the rest of this post »