Ajax Загрузка для .NET ASPX Pages

Question

У меня есть страница ASP.NET .NET 4.0, которая выполняет серию полупростых вычислений. Эти вычисления могут занять некоторое время и разделены на несколько методов на странице. Пользовательский интерфейс на странице ASPX содержит свойства страницы, которые извлекают значения, назначенные в результате этих вычислений.

Я хотел бы знать рекомендуемый подход JS/Ajax/jQuery для выполнения вычислений после начальной загрузки страницы с помощью ASP.NET и выполнения какого-либо эффекта загрузки во время обработки вычислений.

Я хочу, чтобы код был как можно более легким для достижения этого. Указатели и рекомендации по передовой практике получили высокую оценку.

Answer 1

Как долго выполняются эти вычисления/процессы? Требуется ли пользователю , чтобы дождаться их завершения или пользователь может делать другие вещи на сайте во время ожидания?

Возможно, это не то, что вы ищете, но альтернативный подход состоял бы в том, чтобы выполнять вычисления в отдельном потоке (или даже отдельном приложении) на сервере. Вы должны представить пользователю сообщение о том, что их вычисления были поставлены в очередь для обработки и начнутся в ближайшее время.

Пользователь может проверить, когда это будет сделано, или даже иметь какую-либо систему уведомлений о сире (изображение маленького красного «у вас есть новое сообщение» на Facebook или какая-то аналогичная функциональность), которая сообщает им когда это будет сделано, и предоставит ссылку для пользователя, чтобы увидеть результаты. Извещатель может легко выполнить некоторый фоновой опрос через AJAX, чтобы проверять результаты каждые несколько мгновений.

Если масштабирование будет проблемой для этого приложения, вы можете взглянуть на такой подход. Обработка «Онлайн» в ответ на события страницы приведет к повышению производительности по мере того, как система масштабируется, особенно во время больших нагрузок. Обработка «Оффлайн» с помощью процессов очередности в фоновом режиме позволит вам отслеживать очередь для большой нагрузки, разгружать эти процессы на другое оборудование, добавлять новые функции, не убивая пользовательский интерфейс, не занимаясь таймаутами страниц и т. Д.

Answer 2

Если эта операция является синхронной, то пользователь должен дождаться ее завершения, вы можете использовать Ajax ModalPopupExtender, чтобы сообщить пользователю, что сервер занят сейчас, выполняя этот длительный расчет.

На ModalPopupExtender вы можете поместить значок spinner или, возможно, расширить его, чтобы включить индикатор выполнения.

код разметки:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> 
    <ContentTemplate> 
     <asp:Button runat="server" ID="hiddenTargetControlForModalPopup" style="display:none"/> 
     <ajaxToolkit:ModalPopupExtender runat="server" ID="programmaticModalPopup" 
     BehaviorID="programmaticModalPopupBehavior" TargetControlID="hiddenTargetControlForModalPopup" 
     PopupControlID="programmaticPopup" BackgroundCssClass="modalBackground" 
     DropShadow="True" RepositionMode="RepositionOnWindowScroll" > 
     </ajaxToolkit:ModalPopupExtender> 
     <asp:Panel runat="server" CssClass="modalPopup" ID="programmaticPopup" style="background-color:#FFFFCC;display:none;height:75px;width:150px;padding:10px"> 
      <asp:UpdateProgress> 
       <ProgressTemplate> 
        <div style="text-align:center"> 
         <div style="margin:auto;"><img alt="loading..." src="images/spinner.gif" /></div> 
         <p>This may take several minutes...Please wait.</p> 
        </div> 
       </ProgressTemplate> 
      </asp:UpdateProgress> 
     </asp:Panel> 
</asp:UpdatePanel> 

JS код (для Toogle модального всплывающего окна):

function showPopup() { 
     var modalPopupBehavior = $find('programmaticModalPopupBehavior'); 
     modalPopupBehavior.show(); 
    } 
    function hidepopup() { 
     var modalPopupBehavior = $find('programmaticModalPopupBehavior'); 
     modalPopupBehavior.hide(); 
    } 

Примечания: В некоторых запущенных случаях могут потребоваться для реализации:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 

, а затем добавить обработчик JS с именем EndRequestHandler. Это ca когда сервер возвращается из исполнения.

Надеюсь, что это поможет.