AJAX Client Side Event Life Cycle

1. Page Request

2. Init

3. Load

· initializeRequest

· beignRequest

· pageLoading

· pageLoaded

4. Load

· endRequest

5. unLoad

Interview Question links :

AJAX UpdateProgress control : Avoid multiple updates to Update Panel

This tutorial will demonstrate how UpdateProgress control can be used to avoid multiple updates to Update Panle while one update request is in progress.

To delay the refresh of data , Thread.Sleep of around 18000 milli seconds is introduced.

Steps to be followed are below :

1. Add a Script Manger control

<asp:ScriptManager ID=”ScriptManager1″ runat=”server”></asp:ScriptManager>

2. Add a AJAX Update Panel control . With in UpdatePanel control , add a Label and Button control

<asp:UpdatePanel ID=”updPanel” runat=”server” UpdateMode=”Conditional”><ContentTemplate><asp:Label runat=”server” id=”lblDateTime” ></asp:Label>

</<asp:Button runat=”server” id=”btnUpdateDateTime” text=”Update Date Time” onclick=”btnUpdateDateTime_Click” />ContentTemplate></asp:UpdatePanel>

3. Add a AJAX UpdateProgess control and Set to AssociatedUpdatePanelID to UpdatePanel control id.

<asp:UpdateProgress ID=”updProgess” runat=”server” AssociatedUpdatePanelID=”updPanel” ><ProgressTemplate>Please Wait.Refreshing Data …<br /><span id=”msgSpan”></span></ProgressTemplate></asp:UpdateProgress>

4. Add a script block below Script Manager Control :

5. Add Update Button click event

protected void btnUpdateDateTime_Click(object sender, EventArgs e)
{
Thread.Sleep(10000);
lblDateTime.Text = DateTime.Now.ToString();
}

In the client script CheckStatus , we get instance of web form from PageRequestManager. Then we check where there is any Async Post Back is in progress using the method get_isInAsyncPostback(). If yes, then message is set to Still processing previous request. If no then message is set to blank.

Demo of what we have acheieved using above code

Page on initial load :

Page on click of Update Date Time button

Page on click of Update Date Time button avoid multiple updates

Hope you enjoyed this tutorial. For feedback , please leave your comments. Happy Coding

What is ScriptManager ?

ScriptManager

ScriptManager control on a page is used to enable the Microsoft Ajax features of ASP.NET:

Client-script functionality of the Microsoft Ajax Library,
Partial-page rendering, which enables portions of page to be independently refreshed without a postback. UpdatePanel, UpdateProgress, and Timer controls require a ScriptManager control in order to support partial-page rendering.
JavaScript proxy classes for Web services, which enable you to use client script to access Web services and specially marked methods in ASP.NET pages. It does this by exposing the Web services and page methods as strongly typed objects.
JavaScript classes to access ASP.NET authentication, profile, and roles application services.

Process for Implementing Triggers and Timers

An UpdatePanel control on your page will update (through a partial-page postback operation) when a control that it contains causes a postback (for example, when you click a Button control in the ContentTemplate of the UpdatePanel control). You can also use triggers and timers to cause UpdatePanel controls to update in response to other events on the client.

Triggers

You can add a trigger specification to an UpdatePanel control to force it to update when a specified event occurs on the client.

Two types of trigger are available:

AsyncPostBackTrigger

This trigger links the UpdatePanel control to an event of a specified control. For example, you could trigger the update of the UpdatePanel when the OnClick event of a Button control is raised, or when the OnSelectedIndexChanged event occurs for a DropDownList control.

PostBackTrigger

This trigger works just like AsyncPostBackTrigger except that the targeted control will trigger a full-page postback instead of a partial-page postback. This is useful if you have a button in the of an UpdatePanel control that you want to refresh the whole page instead of just the contents of the UpdatePanel control.

To add a AsyncPostBackTrigger trigger to an UpdatePanel control:

1. Add a control that has a property which, when you change it, should trigger an update of the UpdatePanel control.

2. Add a Triggers child element to the UpdatePanel control.

3. Add a AsyncPostBackTrigger child element to the UpdatePanel control.

4. Add a ControlID attribute to the AsyncPostBackTrigger element. The value of this attribute is the ID of the control that triggers the update.

5. To use an event other than the default event for the targeted control, or to specify the event of the targeted control explicitly, add an EventName attribute to the AsyncPostBackTrigger element. The value of this attribute is the name of the event of the control that, when raised, triggers the update. For example, use Click for the OnClick property of a button.

Timers

By using a Timer server control you can cause an UpdatePanel control to update periodically, at an interval that you specify. To do this, you can either place the Timer control in the ContentTemplate of the UpdatePanel control, or place it elsewhere on the page and configure a AsyncPostBackTrigger trigger for the OnTick event of the Timer control. This latter technique enables you to update several UpdatePanel controls at once at regular intervals. An example of using a timer control would be to periodically update an UpdatePanel containing an AdRotator control.

To add a timer trigger to an UpdatePanel control:

1. Add a Timer control to your Web page.

2. Set the Interval property of the Timer control to the length of time, in milliseconds, that you want to have between partial-page postbacks.

3. If the Timer control is not contained in the of an UpdatePanel control, follow the procedure To add a AsyncPostBackTrigger trigger to an UpdatePanel control: and specify that the Tick event of the Timer control should be used to trigger updates.