:::: MENU ::::

Monday, June 23, 2008

Leverage the power of ASP .NET server controls and the rich capacity of JavaScript.

Introduction

Before ASP .NET, there was ASP; before ASP, there was JavaScript. While ASP has been gradually marginalized by the rapid succession of ASP .NET 1.x, 2.x and now 3.x, JavaScript remains the sole source and foundation of snappy client-side user experience.

If the time of existence is of any indication, the already gigantic and still rapidly growing repertoire of JavaScript is a force we cannot afford to ignore. The successes of various Google applications offer the best testimony (a testimony for Ajax too).

On the other hand, ASP .NET, especially the vastly improved ASP .NET 2.0 is undeniably a powerful and flexible development environment. The suite of systems (such as membership, role and profile, health monitoring), server controls (GridView, DataList, etc.) and master page, skin and theme relieve programmers much of the burden of doing the same plumbing over and over again, and allow them to concentrate on individual site-based business logic instead.

However the flip side of the coin is the server-centric-ness of ASP .NET. It relies almost exclusively on the server to deal with user interactions. With a slow network connection, ASP .NET applications would seem to be slow responding or not responding at all; if you have a deep-colored background, you get very unpleasant fits of white-flashes. Yes, ASP .NET has taken great effort to address the issues, introduced methods and properties to handle common tasks such as popping up alert or confirmation boxes, setting focus on server controls; created ClientScript class to allow JavaScript to be included with a page or server controls. You may refer to JavaScript with ASP .NET Pages for more details. However, its highly encapsulated declarative-based syntax still poses great challenges for programmers to go beyond the pre-cut patterns and practices and inject into server controls individualized client side responses.

So how do we leverage the power of ASP .NET and the nimbleness of JavaScript to create a powerful website with rich UI experience?

You may say: ASP .NET AJAX.

Yes. And No.

ASP .NET AJAX, or AJAX, is the hotly pursued technology. I, like everyone else, has jumped on this train of Mr. popular. However, like any other technology, ASP .NET technology can be misused and abused.

In a blog article entitled "Past the AJAX Hype - Some things to think about" in 2005 (while outdated it still has a grain of truth), Rick Stahl writes about the reasons why AJAX should not be the answer to every prayer.

  1. "Grafting AJAX onto existing applications adds another layer of complexity to your application”
  2. "With AJAX, the client code gets large very quickly".
  3. "You should also consider what impact AJAX has on your application’s scalability. AJAX tends to increase the number of requests on a back end application considerably."

ASP .NET AJAX does not offer a fix in every situation for everyone either. ASP.NET AJAX, formerly code-named Atlas, is a set of extensions to ASP.NET developed by Microsoft for implementing Ajax functionality, including both client-side and server-side components.

There are scenarios where AJAX offers the only acceptable solution. That is when server data retrieval is needed and a whole-page refreshing to be avoided. However in other common-place scenarios, such as show and hide a page section based on user input, zoom in and out of an image in responding to a user's mouse movement, AJAX should not be rushed in an ASP .NET page as the rescue. Client-side only reactions should be left to client-side only scripts.

And there is a whole world of JavaScript for us to take advantage of.

So let's jam with ASP .NET and JavaScript code with examples. To demonstrate how we can take advantage of the tons of snappy JavaScript that is out there, I downloaded most of the script for my examples (JavaScript source for this article is mostly from Dynamic Drive DHTML).

Check out the live demo for this article here.

Download Sample Code

More

 

Categories: