堆棧內存溢出
  簡體   English   中英

在導出過程中顯示更新進度

[英]Show Update Progress During Export

 原文  2018-06-29 09:52:02  1   2    javascript/ asp.net/ updatepanel/ postback/ updateprogress

問題描述

單擊“導出到Excel”按鈕后，使用以下Java腳本顯示加載程序。 

<script type="text/javascript">
    function showProgress() {
        var updateProgress = $get("<%= UpdateProgress1.ClientID %>");
        updateProgress.style.display = "block";
    }
</script>


<asp:Button ID="btntoExcel" runat="server" Text="Export to Excel"  onclick="btntoExcel_Click" OnClientClick="showProgress()" Width="115px" 
                CssClass="styleShowData" Font-Size="Smaller" />

一切工作正常，但加載器在將文件保存到系統后仍繼續加載。

不知道如何停止加載程序，因為在JS中被提到為

updateProgress.style.display = "block"

任何建議都將非常有幫助。

提前致謝。

在下面添加整個代碼 

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="ViewReport.aspx.vb" Inherits="ViewReport" %>

狀況報告 

    <script type="text/javascript">
        function showProgress() {
            var updateProgress = $get("<%= UpdateProgress1.ClientID %>");
            updateProgress.style.display = "block";
        }

        function hideProgress() {
            var updateProgress = $get("<%= UpdateProgress1.ClientID %>");
            updateProgress.style.display = "none";
        }   
    </script> 


<div runat="server" id="divPopupWindow" align="Left" style="position: relative; top: -11px; left: 0px; background-color: #C8B49B;">
    <marquee behavior="alternate"><asp:Label ID="mqHeader1" runat="server" Text="Scrolling Employee Info"></asp:Label></marquee>

    <br />
        <asp:LoginStatus ID="LoginStatus1" runat="server" />
    <br /><br />

    <asp:UpdatePanel runat="server" ID="UpdatePanel_1">
        <ContentTemplate>

        <div runat="server" id="divMyPageWidth_2" align="Left" style="position: relative; height: 10%; left: 0px; background-color: #C8B49B;">

        <asp:Button ID="btntoExcel" runat="server" Text="Export to Excel"  onclick="btntoExcel_Click" OnClientClick="showProgress()" Width="115px" 
            CssClass="styleShowData" Font-Size="Smaller" />

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <asp:Button ID="btnGotoMainPage" runat="server" Text="Goto Main Page"  
        Width="118px" CssClass="stGotoMainPage" 
        Font-Size="Smaller" />

                <br />
                <table>
                    <tr>
                        <td class="style2">
                            <asp:DropDownList ID="ddlStatusSelection" runat="server">
                                <asp:ListItem Selected="True">Approved</asp:ListItem>
                                <asp:ListItem>Pending</asp:ListItem>
                                <asp:ListItem>Rejected</asp:ListItem>
                            </asp:DropDownList>
                        </td>

                        <td class="style3">
                            <asp:DropDownList ID="ddlShowRecordsCount" runat="server">
                                <asp:ListItem Selected="True">25</asp:ListItem>
                                <asp:ListItem>50</asp:ListItem>
                                <asp:ListItem>100</asp:ListItem>
                                <asp:ListItem>200</asp:ListItem>
                                <asp:ListItem>300</asp:ListItem>
                                <asp:ListItem>400</asp:ListItem>
                                <asp:ListItem>500</asp:ListItem>
                                <asp:ListItem>All</asp:ListItem>
                            </asp:DropDownList>
                        </td>
                        <td>
                            <asp:Button ID="Button1" runat="server" Text="Show Data"  
                            CssClass="styleShowData" />
                        </td>
                    </tr>
            </table>

        <div runat="server" id="divMyPageWidth" align="Left" style="position: relative; background-color: #C8B49B; overflow: scroll">
                <asp:GridView ID="gvScreenToExcel" runat="server" AutoGenerateColumns="false" HeaderStyle-Wrap="True" Height="190px" Width="380px" 
                    BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" 
                    RowStyle-Wrap="false"  Font-Size="Small" >
                    <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
                    <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
                    <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
                    <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
                    <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
                    <SortedAscendingCellStyle BackColor="#FFF1D4" />
                    <SortedAscendingHeaderStyle BackColor="#B95C30" />
                    <SortedDescendingCellStyle BackColor="#F1E5CE" />
                    <SortedDescendingHeaderStyle BackColor="#93451F" />
                    <AlternatingRowStyle BackColor="#FFE7CE" />
                    <Columns>
                        <asp:BoundField DataField="Rec_Num" HeaderText="Record #" />
                        <asp:BoundField DataField="Remarks" HeaderText="Remarks" />
                    </Columns>
                </asp:GridView>
            </div>

        </div>
        </ContentTemplate>

        <Triggers>
            <asp:PostBackTrigger ControlID = "btntoExcel" />
        </Triggers>

    </asp:UpdatePanel>

    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel_1">
    <ProgressTemplate>
        <div class="modal">
            <div class="center">
                <img alt="" src="Loader.gif" />
            </div>
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
  </div>
</form>

2 個解決方案

解決方案1
 0  2018-07-06 18:25:28

有關此方案的一些事實，並在解決方案之前提供了信息：

  • 真正的下載應在常規（非異步）回發期間進行。 因此，一般來說，注冊“ asp：PostBackTrigger”是正確的。 否則，將引發Sys.WebForms.PageRequestManagerParserErrorException-它是什么以及如何避免它 。

  • 當涉及到HttpReponse.End方法（通常/在導出過程中始終使用）時，在客戶端代碼中獲取通知並從后面的代碼執行任何類型的啟動腳本（RegisterStartupScript等）的簡單方法沒有任何效果。

如果嚴格要求顯示自定義進度指示器（而不是在下載過程中正在運行的瀏覽器），請實施以下解決方案：

  • 通過Sys.WebForms.PageRequestManager訂閱UpdatePanel的客戶端事件，
  • 執行異步請求以顯示進度指示器。 例如，將“ btntoExcel”按鈕標記為asp：AsyncPostBackTrigger。 應顯示進度指示器，
  • 單擊“ btntoExcel”按鈕以啟動例程。 處理按鈕的SERVER-SIDE Click事件，並將創建的EXCEL文件保存到內存或服務器文件夾中，
  • 處理客戶端UpdatePanel的“ endRequest”事件。 進度指示器應該已經被隱藏。 啟動到服務器的真實回發（例如，通過添加隱藏的“ asp：PostBackTrigger”按鈕或使用原始的“ __doPostBack”功能），
  • 處理此按鈕的SERVER-SIDE Click事件並執行實際下載（創建的臨時文件）。

以下是使用提供的標記進行測試的完整工作代碼： 

<script type="text/javascript">
    function showProgress() {
        //var updateProgress = $get("<%= UpdateProgress1.ClientID %>");
        //updateProgress.style.display = "block";
    }
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(prm_InitializeRequest);
    prm.add_endRequest(prm_EndRequest);
    function prm_InitializeRequest(sender, args) {
        alert("Starting Update Panel Async Request... Saving File... Displaying Progress Indicator...");
    }
    function prm_EndRequest(sender, args) {
        alert("Update Panel Async Request Finished. File Saved, But Not Yet Downloaded. Progress Indicator Should Be Already Hidden. Starting Real Download...");
        var btnDoRealDownloadClientObject = $get("<%= btnDoRealDownload.ClientID %>");
        btnDoRealDownloadClientObject.click();
    }
</script>

<asp:UpdatePanel runat="server" ID="UpdatePanel_1">
    <ContentTemplate>
        ...
        <asp:Button ID="btntoExcel" runat="server" Text="Export to Excel" OnClick="btntoExcel_Click" OnClientClick="showProgress()" ... />
        <asp:Button ID="btnDoRealDownload" runat="server" OnClick="btnDoRealDownload_Click" style="display: none" ... />
        ...
    </ContentTemplate>

    <Triggers>
        <%--<asp:PostBackTrigger ControlID="btntoExcel" />--%>
        <asp:AsyncPostBackTrigger ControlID="btntoExcel" />
        <asp:PostBackTrigger ControlID="btnDoRealDownload" />
    </Triggers>

</asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel_1">
    ...
</asp:UpdateProgress>

//CS
protected void btntoExcel_Click(object sender, EventArgs e) {
    Session["SavedFile"] = SAVE_FILE_AS_MEMORY_STREAM;
    ...
}

protected void btnDoRealDownload_Click(object sender, EventArgs e) {
    MemoryStream stream = Session["SavedFile"] as MemoryStream;
    ...
    Page.Response.BinaryWrite(stream.ToArray());
    Page.Response.End();
}


'VB
Protected Sub btntoExcel_Click(ByVal sender As Object, ByVal e As EventArgs)
    Session("SavedFile") = SAVE_FILE_AS_MEMORY_STREAM
    ...
End Sub

Protected Sub btnDoRealDownload_Click(ByVal sender As Object, ByVal e As EventArgs)
    Dim stream As MemoryStream = CType(Session("SavedFile"), MemoryStream)
    ...
    Page.Response.BinaryWrite(stream.ToArray)
    Page.Response.End
End Sub

解決方案2
 -1  2018-07-06 13:57:08

導出邏輯完成后，在btntoExcel_Click事件內部的代碼中添加以下內容。 

ScriptManager.RegisterStartupScript(Me, Page.GetType, "Script", "hideProgress();", True)

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 在加載系統中顯示進度 在 Fetch 期間顯示加載進度 在$ http帖子中顯示進度循環？ 在 FineUploader 中預處理文件期間如何顯示進度？ 在長時間的Ajax調用期間顯示進度 Angular工廠：在上傳期間更新范圍並取得進展 如何更新文本指示器以從進度條顯示進度？ 在加載數據期間在表上顯示加載/進度/微調框 VueJS：渲染期間無法更新進度加載器 如何在長循環期間更新進度條？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM