Показать ход выполнения обновления во время экспорта

Question

Использование приведенного ниже скрипта Java для отображения загрузчика после нажатия кнопки «Экспорт в Excel».

<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 - что это такое и как его избежать .

• НЕТ прямого способа получения уведомлений в коде на стороне клиента и выполнение любого вида стартовых сценариев (RegisterStartupScript и т. Д.) Из кода сзади НЕТ эффекта, когда метод HttpReponse.End (обычно / всегда используется во время экспорт).

Если существует строгое требование показывать пользовательский индикатор прогресса (вместо браузера, который работает во время загрузки), внедрите следующее решение:

• Подписаться на клиентские события UpdatePanel через Sys.WebForms.PageRequestManager,
• Выполнить асинхронный запрос, чтобы показать индикатор прогресса. Например, вместо этого отметьте кнопку «btntoExcel» как asp: AsyncPostBackTrigger. Должен появиться индикатор прогресса,
• Нажмите кнопку «btntoExcel», чтобы запустить процедуру. Обработайте событие нажатия кнопки SERVER-SIDE и сохраните созданный файл EXCEL в память или в папку сервера,
• Обрабатывать клиентское событие UpdatePanel «endRequest». Индикатор прогресса должен быть уже скрыт. Инициировать реальную обратную передачу на сервер (например, путем добавления скрытой кнопки «asp: PostBackTrigger» или использования функции «__doPostBack»),
• Обработайте событие нажатия кнопки SERVER-SIDE и выполните реальную загрузку (файл, созданный ранее).

Ниже приведен полный рабочий код, протестированный с предоставленной разметкой:

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