Показывать ход обновления с загрузкой файла на панели обновления

#c# #asp.net #file-upload #webforms #updatepanel

#c# #asp.net #загрузка файла #веб-формы #updatepanel

Вопрос:

Я разрабатываю веб-сайт в asp.net используя VS2013 и C # (webforms). У меня есть страница, которая принимает некоторый пользовательский ввод, включая <asp:FileUpload> серверный элемент управления. Вся форма находится внутри панели обновления, что позволяет мне отображать div о ходе обновления, который появляется, когда пользователь отправляет форму.

Я читал, что наличие элемента управления сервером загрузки файлов внутри панели обновления вызывает проблемы, поэтому я использую <asp:PostBackTrigger> для принудительной обратной передачи, чтобы .HasFile свойство элемента управления загрузкой не всегда было ложным.

По всему сайту, когда возникает задержка из-за активности базы данных, я использую <asp:UpdatePanel> и <asp:UpdateProgress> , чтобы показать пользователю, что происходит какая-то активность, и защитить форму от изменения или повторной отправки, как только пользователь нажмет кнопку отправить. Это работает нормально.

Проблема в том, что <asp:PostBackTrigger> также предотвращает <asp:UpdateProgress> появление. Это делает форму уязвимой для нежелательного пользовательского ввода после отправки, а также ухудшает пользовательский интерфейс. Итак, я в ловушке22 — я не могу удалить 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 из Ajax Control Toolkit в качестве ответа, потому что это действительно помогло решить мою проблему. Я не в восторге от этого, потому что мне трудно подобрать стиль, соответствующий внешнему виду моего сайта, но это работает. Спасибо за предложение.

Ответ №1:

Я хотел бы взглянуть на элемент управления AjaxFileUpload, который поставляется с Ajax Control Toolkit.

У меня была похожая проблема ранее, и я помню, что у меня работала ajax-версия.

Вы можете найти некоторую информацию об этом здесь: https://ajaxcontroltoolkit.devexpress.com/AjaxFileUpload/AjaxFileUpload.aspx

Чтобы получить Ajax Control Toolkit, просто найдите его в NuGet.