Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to use AJAX module of ASP .Net for animating a web form

In this article, we learn the process of animating the web form using AJAX module of ASP.NET.

Let us begin with various screen shots which are placed in sequence which illustrate the experience of the user.

Shows the web form

Figure 1: Shows the web form

Shows the interface of the form when the user fails to submit the 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:

  • Firstly, the JavaScript of the client-side is used to trigger the first three steps of the animation as soon as the submit button is clicked by the user.
  • 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.

Now, if the user tries to do it then he/she will get to see that an invalid form is simply animated without any real post-back happening. So, as a solution to the above posed question, or we can say problem, we will "call" the animation sequence at our discretion rather than trigger it with a click event and at the same time assigning the animation extender to another control such as the proxy panel. Now, as we use proxy panel, the client-side JavaScript comes into action.

Listing 2: Shows the code for the client-side JavaScript

<script type="text/javascript">     
function pageLoad()
{
var manager = Sys.WebForms.PageRequestManager.getInstance();
manager.add_beginRequest(OnBeginRequest);
manager.add_endRequest(OnEndRequest);
}

var GlobalSubmitButtonID="btnSubmit";
var SubmitButtonID;
var AnexElementID;
 
function OnBeginRequest(sender, args)
{
SubmitButtonID = args.get_postBackElement().id.toLowerCase();
if (SubmitButtonID === GlobalSubmitButtonID.toLowerCase())
{
AnexElementID=$find("AnimationExtender1");
AnexElementID.OnClick();
}
}
function OnEndRequest(sender, args)
{
//Optional:Re-enable submit button 
//$get(GlobalSubmitButtonID).disabled = false; 
}
</script>

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.

Here, other thing to be noticed is that the ID value of the submit button is cached in a global JavaScript variable.

  • 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.

After discussing the AnimantionExtender, animation sequence, proxy panel and the client-side JavaScript, the only that lefts is the Server side code which completes this process. In our discussion on the server side code, we have greatly simplified it in order to have complete emphasis on the animation sequence. As we know, that the data received from the web form is copied over to a couple of label controls as a part of the most of high-tech business processes. So, for this the server side latency is simulated by putting the execution thread to sleep for a few seconds or to be precise around 5-6 seconds.

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.

Conclusion

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.



I am well versed with Computer Programming languages and possess good working knowledge on software languages such as C, Java, PHP, HTML and CSS

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login