Question

我有一个.NET 4.0 ASPX页面正在执行一系列半复杂计算。这些计算可能需要一些时间，并在页面上分成许多方法。 ASPX页面上的UI包含页面属性，该属性检索由于这些计算而分配的值。

我想知道推荐的JS / Ajax / jQuery方法，用于在ASP.NET初始页面加载后进行计算，并在处理计算时运行某种加载效果。

我希望代码尽可能轻量级才能实现这一目标。关于最佳实践的指示和建议非常感谢。

Answer 1

这些计算/过程需要多长时间？用户是否需要等待他们完成，或者用户可以在等待时在网站上做其他事情吗？

也许这不是您正在寻找的，但另一种方法是在服务器上的单独线程（甚至单独的应用程序）中运行计算。您将向用户显示一条消息，说明他们的计算已排队等待处理，并且很快就会开始。

用户可以回来查看它什么时候完成，或者甚至在父亲身上有某种通知系统（图片上有点红色“你有一条新消息”在Facebook上，或者某些类似的功能）告诉他们什么时候它已完成并提供了一个链接供用户查看结果。通知程序可以通过AJAX轻松执行一些背景轮询，以便每隔几分钟检查一次结果。

如果缩放将成为此应用程序的一个问题，您可能需要研究这样的方法。响应页面事件的“在线”处理将随着系统的扩展而拖动性能，尤其是在繁重的加载时间内。通过在后台排队进程的“离线”处理将允许您监视队列的重负载，将这些进程卸载到不同的硬件，添加新功能而不会中断用户体验或处理页面超时等。

Answer 2

如果该操作是同步的，即用户必须等待它完成，您可以使用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代码（to to the modal popup）：

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

注意：在某些高级案例中，您可能需要实施：

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

然后添加一个名为EndRequestHandler的JS处理程序，当服务器从执行返回时调用它。

希望有所帮助。

用于.NET ASPX页面的Ajax加载

2 个答案: