ASP. net ajax (4): Timer and UpdateProgress

1 Overview Timer and UpdateProgress are two simple server controls included in ASP. net ajax Extensions 1.0. The Timer control is used to trigger events on a regular basis, while the UpdateProgress control is used to display a progress bar for users during partial update.

2. The Timer control performs sending back at a predetermined interval. If the Timer control and UpdatePanel control are used together, you can regularly refresh the local page. You can also use the Timer control to send the entire page.

2.1 Timer controls can be used in the following scenarios:

• Update one or more UpdatePanel controls periodically without refreshing the entire page.
• Code is run on the server every time the Timer control is sent back.
• Periodically send the entire page to the server synchronously.

2.2 background Timer
A widget is a server control that embeds Javascript components into a Web page. Javascript components are defined in Interval
Enable sending back from the browser at the interval defined in the property. You can set the Timer control attributes in the code running on the server. These attributes are transmitted to Javascript.
Component.
When using the Timer control, the page must contain a ScriptManager control.
When the Timer control starts a sending back, the Timer control triggers the Tick event on the server side. You can create a handler for the Tick event to execute the page sending back to the server action.
Set the Interval attribute to specify the frequency of sending back. Set the Enabled attribute to enable or disable Timer. The Interval attribute is in milliseconds, and the default value is 60000 milliseconds, that is, 60 seconds.
Note: Setting the Interval attribute to a small value will cause frequent sending back, leading to performance problems. Therefore, use the Timer control to refresh the content at the necessary frequency.
If different UpdatePanel must be updated at different intervals, You can include multiple Timer controls on the same page. Another option is that a single Timer control instance can be a trigger for multiple UpdatePanel controls on the same page.

2.3 use the Timer control in the UpdatePanel control. When the Timer control is contained in the UpdatePanel control, the Timer control automatically becomes the trigger of the UpdatePanel control. You can set the ChildrenAsTriggers attribute of the UpdatePanel control to false to overwrite this behavior.
For the Timer control inside the UpdatePanel control, Javascript
The time component is created only at the end of each sending. Therefore, the time interval does not start before the page is returned. For example, if the Interval attribute is set to 60000
It takes 3 seconds to complete the process, that is, the next delivery takes 63 seconds after the previous delivery.
The following example shows how to include a Timer control in the UpdatePanel control. The specified timereffectick is the event handler for sending back:

<Asp: ScriptManager runat = "server" id = "ScriptManager1"/>
<Asp: UpdatePanel runat = "server" id = "UpdatePanel1"
UpdateMode = "Conditional">
<Contenttemplate>
<Asp: Timer id = "Timer1" runat = "server"
Interval = "120000"
OnTick = "timereffectick">
</Asp: Timer>
</Contenttemplate>
</Asp: UpdatePanel>

2.4 use the Timer control outside the UpdatePanel control. When the Timer control is outside the UpdatePanel control, you must explicitly define the Timer control as the trigger of the UpdatePanel control to be updated.
If the Timer control is outside the UpdatePanel control, the Javascript time component continues to run as if it has been processed. For example, if
The Interval attribute is set to 60000 milliseconds (60 seconds). It takes 3 seconds to complete the resend. The next resend will be sent 60 seconds after the last resend, what the user sees in
The UpdatePanel control has only 57 seconds to update the content.
The Interval attribute must be set to the value that can be completed before the next sending request is started. If a new sending request is started during the earlier sending request, early sending replies will be canceled.
The following example shows how to use the Timer control outside the UpdatePanel control.

<Asp: ScriptManager runat = "server" id = "ScriptManager1"/>
<Asp: Timer ID = "Timer1" runat = "server" Interval = "120000"
OnTick = "timereffectick">
</Asp: Timer>
<Asp: UpdatePanel ID = "UpdatePanel1" runat = "server">
<Triggers>
<Asp: AsyncPostBackTrigger ControlID = "Timer1"
EventName = "Tick"/>
</Triggers>
<ContentTemplate>
<Asp: Label ID = "Label1" runat = "server"> </asp: Label>
</ContentTemplate> </asp: UpdatePanel>

3. The UpdateProgress control provides the status information for updating partial pages in the UpdatePanel control. You can customize the default content and layout of the UpdateProgress control. To prevent transient screen update on a partial page, you can set the delay before the UpdateProgress control is displayed.

3.1 scenario when a page contains one or more UpdatePanel
You can use the UpdateProgress control to design a more intuitive interface for partial page output. You can use
The UpdateProgress control provides visual feedback on the Update Status. Multiple UpdateProgress controls can be placed on one page, each associated with a different
UpdatePanel control. Another option is to use only one UpdateProgress control, and make it consistent with all UpdatePanel
Controls are associated.

3.2 The background UpdateProgress control is output as a <div> element. Its display or hiding depends on whether the associated UpdatePanel control causes asynchronous sending back. The UpdateProgress control does not display the original page and synchronous sending back.

3.3 associate an UpdateProgress control with an UpdatePanel control to set
AssociatedUpdatePanelID attribute to associate it with the UpdatePanel control. When a returned source is UpdatePanel
All associated UpdateProgress controls are displayed. If you do not associate the UpdateProgress control with a specific UpdatePanel
Control Association, The UpdateProgress control displays the progress for all the rounds.
If the ChildrenAsTriggers attribute of the UpdatePanel control is set to false and the asynchronous return source is from the inside of the UpdatePanel control, all associated UpdateProgress controls are displayed.

3.4 use the ProgressTemplate attribute to specify
The message displayed by the UpdateProgress control. <ProgressTemplate> elements can contain HTML
And mark. The following example shows how to specify a message for the UpdateProgress control:

<Asp: UpdateProgress ID = "UpdateProgress1" runat = "server">
<ProgressTemplate>
An update is in progress...
</ProgressTemplate>
</Asp: UpdateProgress>

3.5 specify the content layout when the DynamicLayout attribute is set to true
The UpdateProgress control does not occupy the page space at the beginning, and the page dynamically displays UpdateProgress as needed.
Control. To support dynamic display, the display style attribute of the <div> element output by the control is initially set to none.
When the DynamicLayout attribute is set to false, UpdateProgress
The control occupies space when the page is displayed, even if the control is not displayed. In this case, the displey style attribute of the <div> element of the control is set to block.
And visibility is initially set to hidden.

3.6 place the UpdateProgress control on the page to put the UpdateProgress control in UpdatePanel
The external or internal control. The UpdateProgress control is updated to an asynchronous return with the UpdatePanel control associated with it.
The UpdateProgress control is also included in another UpdatePanel control.
If the UpdatePanel control is in another update panel, sending back from the Child panel will cause the UpdateProgress associated with the Child panel.
Control display. All the UpdateProgress controls associated with the parent panel are also displayed. If a direct child control is returned from the parent panel, only the child control associated with the parent panel
The UpdateProgress control is displayed. This is the same logic as how a sending request is triggered.

3.7 to specify the display time of the UpdateProgress control, you can use the beginRequest and endRequesst events of the PageRequestManager class in Javascript to programmatically control the display time of the UpdateProgress control. In the beginRequest event handler, the DOM element indicating the UpdateProgress control is displayed, and the element is hidden in the event handler of the endRequest.
You must provide the client script to display or hide the UpdateProgress control in the following cases:

• It is not associated with the UpdateProgress control during the sending back of an asynchronous send-back trigger registered as an update panel.
• In this case, the UpdateProgress control cannot automatically determine that asynchronous sending back has been triggered.

3.8 Other attributes DisplayAfter: Specify the delay time displayed by the UpdateProress control in milliseconds.

4. Summary, ASP. net ajax Extensions 1.0 has completed learning several server controls. Using these server controls, we can develop a Web application with basic AJAX features, provide users with a better client experience.