显示进度更新与文件上传在更新面板

本文关键字：更新 文件 显示 | 更新日期: 2023-09-27 18:14:37

我正在使用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>

解决这个问题的最好方法是什么?

提前感谢您的帮助。

EDIT -我接受使用Ajax控件工具包中的Ajax文件上传控件作为答案，因为它确实可以解决我的问题。我对它并不感到兴奋，因为我发现它很难与我的网站的外观和感觉相匹配-但它确实有效。谢谢你的建议。

显示进度更新与文件上传在更新面板

我想看看Ajax控件工具包附带的AjaxFileUpload控件。

我以前有过类似的问题，记得ajax的一个为我工作。

你可以在这里找到一些关于它的信息:https://ajaxcontroltoolkit.devexpress.com/AjaxFileUpload/AjaxFileUpload.aspx

要获得Ajax控件工具包，只需在NuGet中搜索它。

相关文章：