UpdateProgress使用小結

 今天邁開學習AJAX的第一步，先大概的使用了一下自帶的五個控件。在使用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。所以裏面的"更新中..."顯示不出來。