Let us begin with various screen shots which are placed in sequence which illustrate the experience of the user.
Figure 1: Shows the web form
Figure 2: Shows the interface of the form when the user fails to submit the form
Now, let us consider an application with simple web page. For now, I will be considering even more simple form so that the users can understand the basics to the core. The elements that need to be styled are transferred to the ASP .NET theme folder. At the very basic level, the considered web form consist of 4 ASP .NET panel controls which perform different functions. They are as follows:
- Form Panel - Containing the form elements.
- Wait Panel - Containing the animated GIF image.
- Status Panel - Displaying the results received from the server.
- Invisible Proxy Panel - It is the target control of the AJAX AnimationExtender.
The production application in the web form is a reusable user control, so that is why submit button is located on the outside of the panel. The UpdateMode property of the UpdatePanel is set to conditional and is wired to the submit button. This UpdatePanel is wired with the help of a trigger. The function of this panel is to perform a post-back only when the submit button is clicked.
The process begins with working on the AnimationExtender and the Animation Sequence. The animation effect of the web form consists of two important concepts of ASP .NET. These concepts come under the AJAX module. They are as follows:
- Secondly, the last step of the animation is concluded from the server side as soon as the response is given by the server. It is done by inoculating the animation steps into the UpdatePanel. This inclusion is done with the help of server side code.
Listing 1: Shows the code for the markup of the Animation Sequence
<cc1:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="pnlProxy"> <Animations> <OnClick> <Sequence> <EnableAction Enabled="false" AnimationTarget="btnSubmit"/> <FadeOut Fps="24" Duration="1.5" AnimationTarget="pnlStatus" /> <Parallel> <FadeOut Fps="24" Duration="1.5" AnimationTarget="pnlForm" /> <FadeIn Fps="24" Duration="1.5" AnimationTarget="pnlWait" /> </Parallel> </Sequence> </OnClick> </Animations> </cc1:AnimationExtender>
The coding done for the animation sequence markup is very simple and easy to understand. Inspite of this straightforward coding, there is an important point that needs to be kept in mind. Here, the series of steps that are listed within the animation sequence markup must be followed in the order listed for the user to get the desired effect. A brief overview of the coding done is as follows:
- In the beginning, the proxy panel is wired around the extender. This wiring is done by specifying the ID of the panel. This process of specifying is done by valuing the TargetControlID characteristic.
- By the first step, the complete animation arrangement is specified under the section.
- Then, the user will never get the opportunity to have the animation triggered directly. The reason being the proxy panel which the user will never be click.
- The process of animation begins from the first step. At this step, the submit button is disabled.
- Then, after receiving a response from the server, the status panel will be the last one to show up on the screen. This point needs to be kept in mind because it is important to make sure that the status panel is hidden before the form inaugurates to fade out.
- As indicated by the parallel section, the next step in this cycle will be a subset of two important steps which are done in parallel. They are as follows:
- The first step being the fading away view of the form panel on the screen.
- The second step being the fading into view of the wait panel on the screen.
After working on the animation extender and the animation sequence, we will now move on to the proxy panel and the client-side server. Before going into the details of it, there will be a very simple question that is needed to clear here. The question being “Why there is a need of proxy panel, when the process of wiring the animation extender to the submit button can be done directly by the user?”
The answer is very simple. The process of directly wiring the animating sequence to the submit button can be done. But this process has certain limitation which needs to be taken care of. This process of wiring runs effortlessly & effectively till the time user does not add any client side validator to his/her form. As soon as it is done, then the validators control starts to influence the submit action, but at the same time stops its process of influencing the animation sequence. So, in this case if the user attempts to submit the invalid data, then the animation is triggered regardless of the fact and form will fail in the validation process and render error messages on the screen.
Here, in this step, writing the code is not too difficult. The important point is to understand the things and processes that are begin happened in it. Some of them are as follows:
- In the above coding, as soon as the post-back is initiated, the OnBeginRequest handler is triggered. This code will not be executed until or unless the form validator controls have cleared the form to allow post-back.
- Here, the animation will never get called if the form fails validation because the process of wiring the animation extender and the submit button is not done directly. This point verifies the use of proxy panel.
- Once the user has a successful validation, a check is performed to see if the post-back is from the submit button. This is done by comparing the postbackElementID value and ID value of the submit button against each other.
- Now, if the validation is confirmed, an explicit call is made by the script to the OnClick event handler. This call is used to implement the AnimationExtender which will be triggering the animation sequence.
- Now as the call is about to end, the form will be seen as fading out to the user. Along with this, the animated GIF will be displayed on the screen as the page waits for the server to respond. After this, the whole process depends on the server side.
Listing 3: Shows the basic server code for the click event of the submit button
Protected Sub btnSubmit_Click1(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click If Page.IsPostBack Then '--For now data is just copied to a couple of labels--' lblFirstName.Text = txtFirstName.Text lblLastName.Text = txtLastName.Text '--Simulate Latency of Database Interaction--' System.Threading.Thread.Sleep(5000) ... Else '--Render Form on Page Load--' pnlForm.Visible = True pnlWait.Attributes.Add("Style", "z-index: -1;") pnlStatus.Attributes.Add("Style", "z-index: -2;") End If
Here, one important point needs to keep in mind by the users that the fading out of the panels is just a visual effect and will last only until the end of the post-back. During the time, the page is reloaded; the panels that are supposed to be stay hidden will change their mode to visible again. This has happened because all those panels are part of the UpdatePanel and this UpdatePanel is asynchronously refreshing. Because of this, in the next step, the form panel must be concentrated as invisible. Now, after all this, it is time for the wait panel to be in the hidden mode as well because the server has already completed the business process and is ready to respond.
Now, the final and most tricky step of this coding is to introduce the animation. This step would "fade in" the status panel into view on the browser during the period of page loads.
Listing 4: Shows the code for the complete server side
If Page.IsPostBack Then '--For now data is just copied to a couple of labels--' lblFirstName.Text = txtFirstName.Text lblLastName.Text = txtLastName.Text '--Simulate Latency of Database Interaction--' System.Threading.Thread.Sleep(5000) '--The Form and Wait Panels must not be rendered --' pnlForm.Visible = False pnlWait.Visible = False '--Add <OnLoad> Animation to the Status Panel --' Dim anex As New AjaxControlToolkit.AnimationExtender() anex.TargetControlID = "pnlStatus" anex.Animations = "<OnLoad><Sequence><FadeIn Duration=""2.5"" Fps=""10"" /></Sequence></OnLoad>" Dim UpdPanel1 As New UpdatePanel UpdPanel1 = Me.form1.FindControl("UpdatePanel1") UpdPanel1.ContentTemplateContainer.Controls.Add(anex) Else '--Render Form on Page Load--' pnlForm.Visible = True pnlWait.Attributes.Add("Style", "z-index: -1;") pnlStatus.Attributes.Add("Style", "z-index: -2;") End If
There are two most important things in this coding that are needed to discuss here. They are as follows:
- Firstly, as we know, unlike the set of animations are wired to an OnClick event, here the extender of this is wired to OnLoad event. The reason for this is that we want after postback; the animation should run when the page reloads.
- Secondly, this time instead of adding the animation sequence directly to the page, we will be adding it to the UpdatePanel.
- Now, if the user does something like this: Me.Controls.Add (anex), then it will result in a runtime error as soon as the submit button is clicked. The complete situation will look like this: “An extender can't be in a different UpdatePanel than the control it extends.” The reasons for this being:
- Firstly, this type of action is an asynchronous postback which has taken place through the UpdatePanel.
- Secondly, the animation has to be added to the parent of the control that we are trying to animate unlike the proxy panel or submit button and the parent for the proxy panel control is the UpdatePanel.
After doing all this, we will see that the status panel is fading into the view of the screen and the submit button which is outside the UpdatePanel, will remain disabled. The procedure of re-enabling the button is to reload the entire page in the browser window.
In this article, we have learnt to animate the web form using ASP .NET. During the process of leaning, we went through the detailed discussion of AnimationExtender, animation sequence, Proxy Panel, Clent-side server and the server side code.