Published: 14 Oct 2009
By: Prashanth Menon
Download Sample Code

In this article you will learn how to animate a webform using asp.net ajax.

Contents [hide]

Introduction

Recently I deployed an ASP.NET 2.0 AJAX application that interfaced with a real-time mailing engine to retrieve content, decode it, and then email the altered content via the same mailing engine. As a result, users of this application had to put up with longer than usual wait times after the submit button was clicked based on how busy the email engine was at certain times of the day.

The problem was solved using the UpdateProgress control and some AJAX code wired to the submit button on the ASPX page to cover up the delay. The solution has been implemented and is working well. Nevertheless, this triggered my search for a solution to animate the entire form instead. Here, I will demonstrate my very first attempt on how I went about doing this.

The User Experience

The following screen shots in sequence illustrate the user experience (I apologize to the readers if my choice of colors is not very appealing)

Figure 1: The Web Form

The Web Form

Figure 2: Form fails to submit on invalid input

Form fails to submit on invalid input

On successful validation, the submit button is disabled, and the form 'fades out':

An animated image 'fades in' as the page awaits server response:

On server response, the animated image disappears and the server response begins to 'fade in':

Interaction with the server is complete and the animation stops:

The Demo Application

The sample demo application consists of a single web page. To make things even simpler, I've kept the form at a basic level to focus on the core concepts. The styling elements of the form controls have been moved to the ASP.NET theme folder.

At the fundamental level, the web form consists of the following 4 ASP.NET Panel controls:

  1. The form panel containing the form elements
  2. The wait panel that contains the animated GIF image
  3. The status panel that displays the results received from the server
  4. The invisible proxy panel that serves as the target control of the AJAX AnimationExtender

The submit button is on the outside of the panel. The reason being, in the production application the web form is a reusable user control with an external submit button. The UpdatePanel has its UpdateMode property set to Conditional and is wired to the submit button via a trigger to perform a post-back only when the submit button is clicked.

NOTE

The proxy panel is not a part of the form per say, but serves as a concealed target of the AnimationExtender with no direct impact on the functionality of the form. In the live application, this panel will occupy a 1-pixel by 1-pixel area and will be positioned on the web page at a location that the user is least likely to click. Obviously, we do not want to wire the AnimationExtender to any other visible element of the web page, lest the user unwittingly trigger the animation sequence by clicking on the visible area of the form! More on this in 'The Proxy panel and the Client-side JavaScript' section later in this article.

The AnimationExtender and the Animation Sequence

The web form animation effect is a combination of two concepts of ASP.NET AJAX:

  • When the user clicks the submit button, client-side JavaScript is called to trigger the first three steps of the animation
  • On server response, the last step of the animation is completed from the server side, by injecting animation steps into the UpdatePanel using server side code

Listing 1: The animation sequence markup

The code is pretty straightforward. But the series of steps listed within the animation markup must be followed in the order listed for us to get the desired effect.

  • To begin with, the extender is wired to the proxy panel by specifying the ID of the panel as value of the TargetControlID attribute. The entire animation sequence is specified under the <OnClick> section.
  • As noted earlier, the user will never get to click on the proxy panel and therefore the animation will never get to be triggered directly.
  • The animation begins with the first step where the submit button is disabled.
  • The status panel is the last one to show up on the screen after having received a response from the server. Therefore, we make sure that this is hidden before the form begins to fade out.
  • The next step is a subset of two steps in parallel as indicated by the <Parallel> section. As the form panel begins to "fade away", the wait panel will "fade into" view on the screen.

The Proxy panel and the Client-side JavaScript

A question on our minds would be, "Why do we need the proxy panel when we can wire the animation extender directly to the submit button?"

You can dispense the entire proxy panel and wire the animation extender directly to the submit button. The whole process works smoothly until you start adding client side validators to your form. Validator controls influence the submit action, but not the animation sequence. When there is an attempt to submit invalid data, the form will fail validation and render error messages on the screen, but the animation is triggered regardless.

If you try it out, you'll see that an invalid form is simply animated without any real post-back happening. As a solution to the problem, we will need to assign the animation extender to another control such as the proxy panel and "call" the animation sequence at our discretion rather than trigger it with a click event. This is where the client side JavaScript comes in:

Listing 2: The client-side JavaScript

  • The OnBeginRequest handler is triggered when a post-back is initiated. This code will not be executed unless the form validator controls have cleared the form to allow postback.
  • As the animation extender is not wired directly to the submit button, the animation never gets called if the form fails validation. This is exactly why we have a proxy panel!
  • On successful validation, a check is performed to see if the postback is from the submit button by comparing the postbackElementID value against the ID of the submit button cached in a global JavaScript variable.
  • If confirmed, the script makes an explicit call to the OnClick event handler implementation of the AnimationExtender triggering the animation sequence.
  • At the end of this call, the user will see the form fade out, and the animated GIF displayed on the screen as the page waits for response from the server. The rest is now up to the server side code.

The Server side code

The Server side code is greatly simplified here with emphasis on the animation sequence. As part of the 'high-tech' business process, the data received from the web form is copied over to a couple of label controls The server side latency is simulated by putting the execution thread to sleep for a few (5) seconds.

Listing 3: Basic server side code for the Click Event of the submit button

We must remember that fading out the panels is just a visual effect and will last only until the end of the post-back. Once the page reloads, the panels that were supposed to stay hidden will be rendered visible again because they are part of the UpdatePanel that is asynchronously refreshing. Therefore, as the next step, the form panel must be rendered invisible. As the server has already completed the business process and is ready to respond, it is time for the wait panel to be hidden as well.

The final (and tricky) step would be to introduce animation that would "fade in" the status panel into view on the browser when the page loads. This is achieved by injecting a series of animation steps on the fly into the UpdatePanel. Listing below shows the completed server-side code:

Listing 4: The complete server side

Two important points to note here are, first, unlike the first set of animations wired to an Onclick event, this extender is wired to the OnLoad event because we want this animation to run when the page reloads after postback. And second, the animation sequence must be added to the UpdatePanel and not directly to the page. Doing something like this:

Me.Controls.Add(anex)

will result in a runtime error after the submit button is clicked that looks like this:

An extender can't be in a different UpdatePanel than the control it extends.

This is for two reasons. First, this is an asynchronous postback that has taken place through the UpdatePanel. And second, unlike the proxy panel or the submit button, the animation has to be added to the parent of the control we are trying to animate. And in this case, the parent of the status panel control is the UpdatePanel.

At this point in the execution, the user will see the status panel fading into view on the screen with the values submitted to the server being displayed on the screen. As the submit button is outside of the UpdatePanel, it will stay disabled. The button can be re-enabled by commenting out the code in the OnEndRequest handler in the client-side JavaScript or by reloading the entire page in the browser window.

Conclusion

This concludes our discussion on animating an ASP.NET web form. Thank you for reading through my article. Any improvements to this exercise from readers are welcome. In the meantime, I'll be working towards improving my application in the following areas:

  • Replace the web form with the reusable web user control
  • Add server-side validation code before the form can pass on the values for further processing.
  • If the server side validation fails then animation must be injected on the fly to render the form panel visible on to the web page.
  • Alter the status panel to display a meaningful message after the intended function completes successfully.
<<  Previous Article Continue reading and see our next or previous articles Next Article >>

About Prashanth Menon

Prashanth Menon is a Customer Intelligence Database Analyst at International Database Group (IDG) in Framingham MA. He's an MCP, MCSD with a Bachelors Degree in Mechanical Engineering. Although his job majorly involves working with data, he also works on other technologies, primarily Microsoft&...

View complete profile here.

Other articles in this category


Jquery Ajax
JQuery makes communicating with the server very, very easy. JQuery uses get(), getJSON(), and post(...
jQuery Deferred Objects Promise Callbacks
jQuery Deferred/Promise objects untangle spaghetti-like asynchronous code.
jQuery in Action 2nd edition: Queuing functions for execution
This article is taken from the book jQuery in Action, second edition. This segment shows how you can...
Book Review: Pro JavaScript Design Patterns
Brain Mains reviews Pro JavaScript Design Patterns.
Test120Jan
This is my custom article

You might also be interested in the following related blog posts


Q3 2009 Release Week kicks-off November 4th, Free Daily Webinars read more
ASP.NET 4 Web Server Here Shell Extension read more
Upgrade Wizard: auto-upgrades and more read more
Telerik Reporting enters the Silverlight space, adds design-time and performance improvements read more
DevReach Follow-up, Part I read more
ASP.NET 4 Beta 2 - New Version, New Docs, New MSDN Site ! read more
Announcing Microsoft Ajax Library (Preview 6) and the Microsoft Ajax Minifier read more
Why not Classic (Legacy) ASP? read more
Aspose.Total for .NET Q3 2009 Released read more
Ajax Control Toolkit: new controls, bug fixes read more
Top
 
 
 

Discussion


Subject Author Date
placeholder nice post William Shown 6/10/2015 5:28 AM

Please login to rate or to leave a comment.