Question

单击“导出到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>

Answer 1

有关这种情况的一些事实，并在解决方案之前提供了信息：

真正的下载应该在常规（非异步）回发期间进行。因此，一般来说，注册“ asp：PostBackTrigger”是正确的。否则，Sys.WebForms.PageRequestManagerParserErrorException - what it is and how to avoid it。
在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

Answer 2

在导出逻辑完成后，在btntoExcel_Click事件内部的代码中添加以下内容。

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

在导出过程中显示更新进度

2 个答案: