如何显示进度条以在 asp.net 中将 PostBackTriggers 和 AsyncPostBackTriggers 添加到 UpdatePanel？答案

【问题标题】：How to Show the progressbar to Adding PostBackTriggers and AsyncPostBackTriggers to UpdatePanel in asp.net?如何显示进度条以在 asp.net 中将 PostBackTriggers 和 AsyncPostBackTriggers 添加到 UpdatePanel？
【发布时间】：2012-09-17 17:07:11
【问题描述】：

我有一个带有 ToolkitScriptManager 的页面和三个更新面板，每个更新面板都有基于控件的触发器，现在我的问题是触发任何服务器端事件显示进度条，如百分比Example，如何在 PostBackTriggers 和 AsyncPostBackTriggers 中显示控件，我的代码是

     <asp:UpdatePanel ID="up1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="TxtZip" EventName="textchanged" />
    </Triggers>
    <ContentTemplate>
        <asp:TextBox ID="TxtZip" runat="server" AutoPostBack="true" ClientIDMode="Static"
            MaxLength="6" onkeypress="return isNumberKey(event)" CssClass="txtstyle" OnTextChanged="TxtZip_TextChanged"></asp:TextBox>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <Triggers>
        <asp:PostBackTrigger ControlID="IBtnSave" />
    </Triggers>
    <ContentTemplate>
        <span class="art-button-wrapper"><span class="l"></span><span class="r"></span>
            <asp:Button ID="IBtnSave" runat="server" Text="Submit/Save" CssClass="art-button"
                ClientIDMode="Static" OnClientClick="return postbackButtonClick()" OnClick="IBtnSave_Click" />
        </span>
    </ContentTemplate>
</asp:UpdatePanel>

我的进度条码

<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true">
                        <ProgressTemplate>
                            <div id="Progressbar" class="Progressbar" align="center" valign="middle" runat="server">
                                <asp:Image ID="Image1" Width="75" Height="95" runat="server" ImageUrl="~/images/animation_processing.gif" />
                            </div>
                        </ProgressTemplate>
                    </asp:UpdateProgress>

而java脚本代码是

<script type="text/javascript">
        //update panel and postback trigger with fileupload control upadteprogressbar code
        var updateProgress = null;
        function postbackButtonClick() {
            updateProgress = $find("<%= UpdateProgress1.ClientID %>");
            window.setTimeout("updateProgress.set_visible(true)", updateProgress.get_displayAfter());
            return true;
        }
</script>

此代码仅在 postbacktrigger 中起作用，原因是在触发 onclick 事件之前单击按钮时，该事件调用 java 脚本函数，但 Async Postback 触发器不调用该函数，如何处理该代码并以百分比显示进度条过程，给我有什么建议

【问题讨论】：

标签： asp.net c#-4.0 updatepanel updatepanel-progressbar

【解决方案1】：

只需在 aspx 内容页面中添加波纹管代码即可正常工作

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <script type="text/javascript">

      Sys.Application.add_init(appl_init);

      function hideProgressBar() {

//          var updateProgress = $find("<%= UpdateProgress1.ClientID %>");
//          updateProgress.style.visibility = "hidden";
          $("#MainContent_UpdateProgress1").hide()
      }

      function appl_init() { 

          var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();
          pgRegMgr.add_beginRequest(postbackButtonClick);
          pgRegMgr.add_endRequest(hideProgressBar)
      }

</script>

【讨论】：