在ASP.NET应用程序中使用jQuery异步加载面板

时间:2012-07-25 08:27:08

标签: jquery asp.net asynchronous highcharts

我有一个ASP.net应用程序,其中包含一个由不同数量的面板组成的仪表板界面。每个Panel包含一个HighChart控件,并从不同的数据源加载。某些数据源可能需要一些时间才能执行,因此我不希望因为一个加载缓慢的数据源而减慢整个页面的执行速度。

我希望页面加载然后每个面板在数据准备就绪时显示。

当我使用高级图表显示数据时,我有类似于:

的jQuery代码
 $(document).ready(function () {

        var panelIDList = dashID.Get("panelList");

        for (var i = 0; i < panelIDList.length; i++) {
            addpanel(panelIDList[i]);
        }            
    }); 

    function addpanel(panelID)
    {
        $.ajax({
            type: "POST",
            url: "Data.aspx/GetData",
            data: "{val:'" + panelID + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                var myObject = eval('(' + msg.d + ')');

                var options = {
                    chart: {
                        renderTo: myObject.renderTo,
                        type: myObject.chartVal,
                        height: 300,
                        width: 600
                    },
                xAxis: {
                        categories: myObject.xaxis.Categories,
                },
                series: myObject.serList
            };

            var chart = new Highcharts.Chart(options);

        }
    });

从$(document).ready中可以看出,我向服务器发出Ajax调用,以检索用于构造图表数据的JSON数据结构。

这一切都运行良好,除了调用似乎不是真正的异步,如果第一个面板加载缓慢,那么直到第一个面板加载缓慢后才会加载后续面板。为了演示我在其中一个面板DataSource中添加了一个Thread.Sleep。

我不会这样,因为我正在使用Ajax调用。

1 个答案:

答案 0 :(得分:0)

一旦我遇到类似的问题

首先尝试添加

async: true,
cache: false

给你ajax致电

如果这不能解决您的问题,那么您需要禁用页面上的Session

<%@ Page EnableSessionState="False" ....

欲了解更多信息:

How to display the Asynchronous results which one is first in asp.netweb application?

REST WCF service locks thread when called using AJAX in an ASP.Net site