Use AJAX. NET client scripts to implement UpdateProgress

Users who have used updatePanel in the ajax.net framework will surely know the role of updateprogress, which is used to display the wait information during asynchronous operations. Its usage is very simple, you can put some pictures or text in it to make it look good. However, this method has been set before the page is run. No matter what operation is performed, the same image or text is displayed, and information cannot be displayed for a specific button or sending object, for example, "saving..." is displayed for the SAVE operation... ", the submitted operation will show" submitting... ", that is, a little flexible control through programming. Some people may say that you can set up several more updatepanels and assign an updateProgress to each updatepanel. This is also a method, but the generated tag has no more points.
I recently read about AJAX.. NET client script file, know that the script provided by the framework can control the content to be displayed in more detail, and can also add the "cancel" button or connection, click Cancel to stop asyncPostback. You need to customize a div or span similar to updateProgress by using scripts. In addition, you need to add page events to control the visibility of prompt information. The page events in client scripts are mainly used. The specific implementation is as follows:

Code
1 <script language = "javascript" type = "text/javascript">
2 function pageLoad ()
3 {
4 // Add events
5 Sys. WebForms. PageRequestManager. getInstance (). add_beginRequest (onBeginRequest );
6 Sys. WebForms. PageRequestManager. getInstance (). add_endRequest (onEndRequest );
7}
8
9 function onBeginRequest (sender, e)
10 {
11 var elem = e. get_postBackElement ();
12 var requestManager = Sys. WebForms. PageRequestManager. getInstance ();
13
14 // click Cancel to stop
15 if (requestManager. get_isInAsyncPostBack () & elem. id = "btnCancel ")
16 {
17 requestManager. abortPostBack ();
18}
19
20 // display the information being processed
21 if (elem. id! = "BtnCancel ")
22 {
23 dispUpdateProgress (String. format ("{0} progress is processing.", elem. value ),"");
24}
25}
26
27 function onEndRequest (sender, e)
28 {
29 dispUpdateProgress ("", "none ");
30}
31
32 // control the display prompt information
33 function dispUpdateProgress (msg, display)
34 {
35 $ get ("updateProgress"). style. display = display;
36 $ get ("processingMsg"). innerHTML = msg;
37}
38 </script>
39 <form id = "form1" runat = "server">
40 <asp: ScriptManager ID = "ScriptManager1" runat = "server" EnablePartialRendering = "true"/>
41 <asp: UpdatePanel ID = "up" runat = "server">
42 <ContentTemplate>
43 <asp: Button ID = "btnSave" runat = "server" Text = "Save" OnClick = "btnSave_Click"/> & nbsp;
44 <asp: Button ID = "btnSubmit" runat = "server" Text = "Submit" OnClick = "btnSave_Click"/>
45 <div id = "updateProgress" style = "display: none">
46 <span id = "processingMsg"> </span>
47 <asp: Button ID = "btnCancel" runat = "server" Text = "Cancel"/>
48 </div>
49 </ContentTemplate>
50 </asp: UpdatePanel>
51 </form>

Cs
1 protected void btnSave_Click (object sender, EventArgs e)
2 {
3 Thread. Sleep (4000 );
4}