Total votes: 0
Print: Print Article
Please login to rate or to leave a comment.
Published: 14 Oct 2009
Download Sample Code
In this article you will learn how to animate a webform using asp.net ajax.
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
Figure 2: 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:
- The form panel containing the form elements
- The wait panel that contains the animated GIF image
- The status panel that displays the results received from the server
- 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.
The AnimationExtender and the Animation Sequence
The web form animation effect is a combination of two concepts of ASP.NET AJAX:
- 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
- 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.
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.
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
- 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:
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
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.
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.
You might also be interested in the following related blog posts
Q3 2009 Release Week kicks-off November 4th, Free Daily Webinars
ASP.NET 4 Web Server Here Shell Extension
Upgrade Wizard: auto-upgrades and more
Telerik Reporting enters the Silverlight space, adds design-time and performance improvements
DevReach Follow-up, Part I
ASP.NET 4 Beta 2 - New Version, New Docs, New MSDN Site !
Announcing Microsoft Ajax Library (Preview 6) and the Microsoft Ajax Minifier
Why not Classic (Legacy) ASP?
Aspose.Total for .NET Q3 2009 Released
Ajax Control Toolkit: new controls, bug fixes
Please login to rate or to leave a comment.