UpdateProgress学习

在updatePanel里面放了一个Button和Label，然后点击Button给Label赋值。这个是个很简单的过程了。
代码我就补贴了。
然后我再加了一个UpdateProgress控件，把它的AssociatedUpdatePanelID指向刚加的UpdatePanel,其代码如下：

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
             <ContentTemplate>
             <asp:Label ID="Label1" runat="server" Text="Label" Width="204px"></asp:Label><br />
             <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
             <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="1">
             <ProgressTemplate >
              <p>
                 更新中......
              </p>
             </ProgressTemplate>
             </asp:UpdateProgress>
             </ContentTemplate>
         </asp:UpdatePanel >
Button事件：
protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = DateTime.Now.ToString();
    }

运行结果正常，点击Button，“更新中...”出现，然后Label被赋值。

然后我把updateProgress拿到updatePanel控件外面来，运行，正常。
然后我再把button控件拿到updatePannel控件外面来，然后又在updatepanel里面加上triggers，代码如下：

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
             <ContentTemplate>
             <asp:Label ID="Label1" runat="server" Text="Label" Width="204px"></asp:Label><br />
                 &nbsp;&nbsp;&nbsp; & nbsp;
            </ContentTemplate>
             <Triggers>
                 <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
             </Triggers>
         </asp:UpdatePanel>
             <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" Width="201px" />
             <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="1">
             <ProgressTemplate >
              <p>
                 更新中......
              </p>
             </ProgressTemplate>
             </asp:UpdateProgress>

运行，点击Button按钮，发现"更新中..."字段没有出现，但是赋值正常。
难道使用triggers的调用外部控件来进行异步传输，不会引发UpdateProgress?

后来在网上找到了解决方法：
在代码里面加入如下js:

<script language="javascript" type="text/javascript">
     var prm =  Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
    var  postBackElement;
    function  InitializeRequest(sender, args) 
     {
        if (prm.get_isInAsyncPostBack()) 
        {
            args.set_cancel(true);
        }
        
        postBackElement = args.get_postBackElement();

        if (postBackElement.id = 'Button1') {

            $get('UpdateProgress1').style.display = 'block';                

        }
    }
     function  EndRequest(sender, args) 
     {
        if (postBackElement.id = 'Button1') 
        {
             $get('UpdateProgress1').style.display = 'none';
        }

}
     </script>

 

然后运行正常，从上面的js可以看出，如果是triggers触发的button事件，那么progress控件的style.display始终都是none，在button_click事件触发时，并没有使progress的 style.display变成block。所以里面的"更新中..."显示不出来。

 

再如：

     < div  id ="divUpdateProgress"  style ="position: absolute; right: 466px; top: 48px; height: 20px;" >
         < asp:UpdateProgress  ID ="UpdateProgress1"  runat ="server" >
             < ProgressTemplate >
                 < div  style ="font-size: 12px; color: Blue; background-color: #FFFFD6; border: solid 1px blue;" >
                     < img  src ="../Image/ajaxloader.gif"   />
                    数据加载中，请稍候
                 </ div >
             </ ProgressTemplate >
         </ asp:UpdateProgress >
     </ div >

  

     < script language = " javascript "  type = " text/javascript " >
         var  prm  =  Sys.WebForms.PageRequestManager.getInstance();
        prm.add_initializeRequest(InitializeRequest);
        prm.add_endRequest(EndRequest);
         var  postBackElement;
         function  InitializeRequest(sender, args) 
         {
            if (prm.get_isInAsyncPostBack()) 
            {
                args.set_cancel(true);
            }
            
            postBackElement = args.get_postBackElement();
           
            if (postBackElement.id == '<%=btnSearch.ClientID %>' || postBackElement.id == '<%=btnSearchOnProj.ClientID %>') 
            {
                $get('divUpdateProgress').style.display = 'block';
            }
        }
         function  EndRequest(sender, args) 
         {
            if (postBackElement.id == '<%=btnSearch.ClientID %>' || postBackElement.id == '<%=btnSearchOnProj.ClientID %>') 
            {
                 $get('divUpdateProgress').style.display = 'none';
            }

        }
     </ script >