Asp.net 在asp:按钮上，单击“更新”面板以显示加载消息并运行vb.net代码

我有一个ASP应用程序，它有一个页面，用户可以选择不同的选项，然后使用这些选项生成excel报告。通过单击按钮触发报告处理。我想在单击按钮时添加一条加载消息，向用户显示报告正在运行，因为根据选择的选项，生成文件可能需要几分钟的时间

我的问题是，报告处理代码在代码背后运行，我无法找到一种方法，让ascx.vb上的按钮单击功能在运行处理代码和下载报告的同时触发页面更新。我尝试过异步，但我认为我没有正确使用它

我还是一个初学者，所以很难在网上看到很多例子。对于如何实现这一目标的任何建议都将不胜感激

这是我点击按钮的代码：

    Private Async Sub DownloadExcelReport_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles DownloadExcelReport.Click

        DownloadInProgress.Visible = True

        Await Task.Run(Sub()
                           ProcessExcelReport() 'long running sub (not an async function).
                       End Sub)

    End Sub

这里是UI表单的（压缩）HTML代码

        <header class="header bg-light bg-gradient b-b pull-in" style="margin-top:-10px; margin-bottom: 10px;"> 
            <p class="h4">Report Download</p>
        </header>
        <section class="hbox wrapper">  
                <section class="panel panel-default"> 
                    <div class="panel-top-border"></div>
                       <asp:Panel ID="DownloadInProgress" runat="server" Visible="false">                        
                            <div class="alert alert-info">                            
                                <i class="fa fa-info-sign"></i><strong>Notice!</strong> Report Download is in progress.  Report will download when complete.
                            </div>
                        </asp:Panel>  
                        <asp:Panel ID="Panel2" runat="server" style="padding-left: 20px; padding-bottom: 20px; padding-right:20px; padding-top:20px;">
                          <div>
                            <asp:Label ID="lbl2" runat="server" class="newlwoverridelabel">Scope</asp:Label>
                                <asp:DropDownList runat="server" AutoPostBack="true" ID="ScopeCombo" OnSelectedIndexChanged="ScopeCombo_SelectedIndexChanged" CssClass="form-control m-b" Width="200px" style="display:inline-block">
                                </asp:DropDownList>
                            <asp:Label ID="Label2" runat="server" class="newlwoverridelabel">Report Name</asp:Label>
                                <asp:DropDownList ID="reportSelect" AutoPostBack="true" runat="server" CssClass="form-control m-b" Width="400px" style="display:inline-block" OnSelectedIndexChanged="reportSelect_SelectedIndexChanged">
                                </asp:DropDownList>
                        </div>
                        <div style='margin-left:5px;margin-bottom:5px;'>
                            <asp:Button runat="server" Text="Download Excel Report" ID="DownloadExcelReport" />
                        </div>

                        </asp:Panel>
                </section>
        </section>

报告下载

注意正在下载报告。报告完成后将下载。
范围
报告名称

您可以尝试在按钮（或任何其他要显示进度图标的位置）旁边添加一些加载gif设置默认显示“无”。然后单击ON按钮客户端，将其设置为display ON

<div style='margin-left:5px;margin-bottom:5px;'>
                            <asp:Button runat="server" Text="Download Excel Report" ID="DownloadExcelReport" OnClientClick="showHideProgress(1)" />&nbsp;&nbsp;<img id="loading" src="/loading.gif" style="display:none;"/>
                        </div>

---

请注意，在ASP.NET Web表单中使用异步代码的方式并非如此

你需要使用

---

这就是说，异步中的任何内容都不会改变HTTP协议，如果您想在客户端实现某些行为，您需要在客户端实现它。

正如Paulo Morgado所说，在ASP.NET Web表单中使用异步代码代码代码隐藏代码对您的需求毫无用处。 正确的方法是使用ajax或updatepanel来实现您的需求

我建议您可以尝试使用ajaxtoolkit updatepanel和UpdateProgress控件来实现您的需求

代码示例：

报告下载

注意正在下载报告。报告完成后将下载。
范围
报告名称

function showHideProgress(type)
{
  if(type==1) {$('#loading').show();}
  else {$('#loading').hide();}
}