在 asp:button 上单击更新面板以显示加载消息并在后面运行 vb.net 代码答案

【问题标题】：On asp:button click update panel to show loading message and run vb.net code behind在 asp:button 上单击更新面板以显示加载消息并在后面运行 vb.net 代码
【发布时间】：2020-03-30 21:26:14
【问题描述】：

我有一个 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>

【问题讨论】：

标签： asp.net vb.net visual-studio user-interface async-await

【解决方案1】：

您可以尝试在按钮（或任何其他您想要显示进度图标的位置）旁边添加一些加载 gif 设置默认显示“无”。并且onbutton客户端点击设置它显示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>

在脚本块中添加函数

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

【讨论】：

【解决方案2】：

请注意，这不是您应该在 ASP.NET Web 窗体中使用异步代码的方式。

您需要使用page async tasks。

话虽如此，异步中的任何内容都不会改变 HTTP 协议，如果您想在客户端进行某些行为，则需要在客户端上实现它，如 Anu showed。

【讨论】：

【解决方案3】：

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

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

代码示例：

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ShowProgess.aspx.vb" Inherits="VBidentityTrue.ShowProgess" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager runat="server">
            </asp:ScriptManager>
            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                <ProgressTemplate>
                    <div class="modal">
                        <div class="center">
                            <img alt="" src="loading.gif" />
                        </div>
                    </div>
                </ProgressTemplate>
            </asp:UpdateProgress>

            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <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" OnClick="DownloadExcelReport_Click" />
                                </div>

                            </asp:Panel>
                        </section>
                    </section>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

代码隐藏：

Public Class ShowProgess
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

End Sub

Protected Sub ScopeCombo_SelectedIndexChanged(sender As Object, e As EventArgs)

End Sub

Protected Sub reportSelect_SelectedIndexChanged(sender As Object, e As EventArgs)

End Sub

Protected Sub DownloadExcelReport_Click(sender As Object, e As EventArgs)
    'ProcessExcelReport()
    System.Threading.Thread.Sleep(5000)
End Sub
End Class

【讨论】：