Загрузка Ajax для страниц .NET ASPX

Question

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

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

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

Answer 1

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

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

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

<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 (для переключения модального всплывающего окна):

    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, который вызывается, когдасервер возвращается из выполнения.

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

Answer 2

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

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

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

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