在更新面板中显示带有文件上传的进度更新答案

【问题标题】：Show Progress Update with File Upload in Update Panel在更新面板中显示带有文件上传的进度更新
【发布时间】：2017-03-06 18:50:59
【问题描述】：

我正在使用 VS2013 和 C# (webforms) 在 asp.net 中开发一个网站。我有一个接受一些用户输入的页面，包括<asp:FileUpload> 服务器控件。整个表单位于更新面板中，允许我显示用户提交表单时弹出的进度更新 div。

我已经读到在更新面板中具有文件上传服务器控件会导致问题，因此我使用<asp:PostBackTrigger> 强制回发，以便上传控件的.HasFile 属性并不总是错误的。

在整个站点中，当由于 DB 活动而出现延迟时，我使用 <asp:UpdatePanel> 和 <asp:UpdateProgress> 向用户显示有一些活动，并保护表单在用户点击提交后不被更改或重新提交.它工作正常。

问题在于<asp:PostBackTrigger> 也阻止了<asp:UpdateProgress> 的出现。这使得表单在提交后容易受到不需要的用户输入的影响，并且也是一种糟糕的用户体验。所以我处于 catch22 - 我无法删除 PostBackTriggers，因为这样文件上传控件将不起作用，并且我无法在提交时使用 UpdateProgress，因为 PostBackTriggers 阻止它显示。

一些代码：

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <ContentTemplate>

    <%-- Some irrelevant code left out --%>
            <div class="row">
              <div class="input-group col-sm-6">
                <span class="input-group-addon" style="width: 175px; text-align: right;" id="basic-addon10">Signature</span>
                <asp:FileUpload ID="uplSignature" runat="server" CssClass="form-control" />
              </div>

              <%-- Some irrelevant code left out --%>

  </ContentTemplate>
  <Triggers>
    <asp:PostBackTrigger ControlID="btnSubmit" />
  </Triggers>
  <asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="0">
    <ProgressTemplate>
      <div class="updateProgressMain" style="position: fixed;">
        <div class="updateProgressDiv" style="position: fixed;">
          <img src="Images/loader.gif" alt="" />
        </div>
      </div>
    </ProgressTemplate>
  </asp:UpdateProgress>

解决这个问题的最佳方法是什么？

提前感谢您的帮助。

编辑 - 我接受了使用 Ajax Control Toolkit 中的 Ajax File Upload Control 作为答案，因为它确实可以解决我的问题。我对此并不感到兴奋，因为我发现很难设计出与我的网站的外观和感觉相匹配的样式——但它确实有效。谢谢你的建议。

【问题讨论】：

标签： c# asp.net file-upload webforms updatepanel

【解决方案1】：

我会看一下 Ajax 控件工具包附带的 AjaxFileUpload 控件。

我以前遇到过类似的问题，记得 ajax 对我有用。

您可以在此处找到有关它的一些信息： https://ajaxcontroltoolkit.devexpress.com/AjaxFileUpload/AjaxFileUpload.aspx

要获取 Ajax 控件工具包，只需在 NuGet 中搜索即可。

【讨论】：