UpdateProgress無效，無法顯示，沒有效果，js給你答案

當按鈕botton位於updatepannel的外面的時候，會導致UpdateProgress起不到作用！

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Label" Width="204px"></asp:Label><br />
            </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。所以裡面的"更新中..."顯示不出來。

再如：UpdateProgress的外面有div包圍【divUpdateProgress】：

<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>

對應的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 == '<%=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>

ps：謀事在人成事也在人，好好揣摩！