ATLAS learning notes (6): use the Atlas updateprogress Control

Transferred from terrylee technical space
If you can provide a progress bar similar to the browser status bar when performing a long operation on the page, the interface user interface will be more friendly. InAtlasProvided for usUpdateprogressControls are supported Easy .

Main Content

1.UpdateprogressControl Introduction

2. Complete example

 

I.UpdateprogressControl Introduction

If you can provide a progress bar similar to the browser status bar when performing a long operation on the page, the interface user interface will be more friendly. I believe you have seen the following interface:

InAtlasProvided for usUpdateprogressControls are supported Easy The implementation is similar to this progress bar. Although it does not reflect the actual progress, it can make our user interface more friendly. A simpleUpdateprogressControl exampleCode:

< Atlas: updateprogress ID = "Uprog" Runat = "Server" >

< Progresstemplate >

< Div Style = "Background-color: # e2f2ff; color: black; font-size: 10pt; position: absolute; left: 10px;

Top: 40px; width: 300px; Height: 120px; Border: solid 1px # 8dd3ff" >

Updating data. Please wait.

< P > </ P >

& Nbsp; < IMG SRC = "Images/loading02.gif" ALT = "Progress" />

</ Div >

</ Progresstemplate >

</ Atlas: updateprogress >

UpdateprogressThe control does not have any properties to set. The only thing we need to do is to setProgresstemplateThat is, the style of the progress bar displayed on the page, which can be images, text, etc.Errortemplate.

Ii. Complete example

UpdateprogressThe usage of the control is quite simple. Let's look at an example. In this example, we will take a long time to update a piece of text. Or addScriptmanagerControls:

< Atlas: scriptmanager ID = "Scriptmanager1" Enablepartialrendering = "True" Runat = "Server"   />

AddUpdatepanelTo update text:

< Atlas: updatepanel ID = "Upanel" Runat = "Server" >

< Contenttemplate >

< Div Style = "Background-color: White; position: absolute; left: 10px; top: 40px;

Width: 300px; Height: 150px" >

< ASP: Label Font-bold = "True" Font-size = "XX-large" ID = "Thelabel" Runat = "Server" > I will be updated </ ASP: Label >

</ Div >

</ Contenttemplate >

< Triggers >

< Atlas: controleventtrigger Controlid = "Button1" Eventname = "Click"   />

</ Triggers >

</ Atlas: updatepanel >

Add nowUpdateprogressControl, SetProgresstemplateUse<Div>To achieve:

< Atlas: updateprogress ID = "Uprog" Runat = "Server" >

< Progresstemplate >

< Div Style = "Background-color: # e2f2ff; color: black; font-size: 10pt; position: absolute; left: 10px;

Top: 40px; width: 300px; Height: 120px; Border: solid 1px # 8dd3ff" >

Updating data. Please wait.

< P > </ P >

& Nbsp; < IMG SRC = "Images/loading02.gif" ALT = "Progress" />

</ Div >

</ Progresstemplate >

</ Atlas: updateprogress >

Add a button to update the above text in its event:

Protected   Void Button#click ( Object Sender, eventargs E)

{< br> // simulate long-term operations

system. threading. thread. sleep ( 5000 );
thelabel. text = string . format ( " I 've been updated at {0} " , datetime. now. tolongtimestring ();

}

Now the entire example is complete. Compile and run it. Let's take a look at the effect:

Click "Update ".

After the update is complete:

UpdateprogressControls:

1.UpdateprogressA widget is not added for processing a widget. It is a global control and is valid for the entire page. Therefore, only one widget can be added on the page.UpdateprogressControl. All delayed operationsUpdateprogressControl.

2.UpdateprogressControlTemplateThere isIDIsAbortbuttonOfButtonControl, we can provide a serverButtonOrLinkbuttonWidget,And specifyIDIsAbortbuttonTo cancel the current operation. The sample code is as follows:

< Atlas: updateprogress ID = "Uprog" Runat = "Server" >

< Progresstemplate >

< Div Style = "Background-color: # e2f2ff; color: black; font-size: 10pt; position: absolute; left: 10px;

Top: 40px; width: 300px; Height: 120px; Border: solid 1px # 8dd3ff" >

Updating data. Please wait.

< P > </ P >

& Nbsp; < IMG SRC = "Images/loading02.gif" ALT = "Progress" />

< ASP: button ID = "Abortbutton" Runat = "Server" />

</ Div >

</ Progresstemplate >

</ Atlas: updateprogress >

Full sample download: http://files.cnblogs.com/Terrylee/UpdateProgressDemo.rar