在更新面板中使用文件上载显示进度更新

时间:2016-10-24 21:24:36

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

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

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

在整个网站中,当由于数据库活动而导致延迟时,我使用<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文件上传控件作为答案,因为它确实可以解决我的问题。我并不为此感到兴奋,因为我觉得很难根据我网站的外观和风格进行设计 - 但它确实有效。谢谢你的建议。

1 个答案:

答案 0 :(得分:0)

我将看一下Ajax Control Toolkit附带的AjaxFileUpload控件。

我之前遇到过类似的问题,并记住ajax一个适合我。

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

要让Ajax Control Toolkit在NuGet中搜索它。