Показать обновление с обновлением файла в панели обновления

Question

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

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

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

Проблема в том, что <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 File Upload Control из Ajax Control Toolkit в качестве ответа, потому что он действительно помог решить мою проблему. Я не в восторге от этого, потому что мне сложно стилизовать стиль и внешний вид моего сайта, но он работает. Спасибо за предложение.

Answer 1

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

У меня была аналогичная проблема и я помню, что ajax работал для меня.

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

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