在ASP.NET頁面異步C＃方法調用，但不工作的活動網站

Question

OK這裏的情況是：

我與我們的銷售人員的客戶統計數據表中的Web應用程序，每一行圖表顯示了過去12個月銷售數據的總體趨勢。每個頁面顯示一個特定的推銷員的客戶列表，其中一些可能有大量的客戶=巨大的行數=大量的迷你圖（例如特別是125個，需要15秒加載）。

由於這個原因，jQuery sparklines無法使用 - 它們完全鎖定了訪問頁面的用戶的CPU，並帶有大量的帶有IE的sparklines。

因此，我開始使用Google Chart API，它工作得非常好，除了兩個問題：1）它位於安全的站點上，並且Google Chart API URL僅通過HTTP提供（通過使用小包裝腳本解決動態下載圖形並從我們的安全服務器重新提供）;和2）在125個迷惑的頁面上，由於請求的數量（即使使用0-9服務器前綴來最大化可用連接的數量），它仍然非常緩慢。

所以我的下一步是嘗試使每個「下載/抓取/重新提供圖像」方法調用異步 - 它的工作！

...但只在我的開發盒運行在調試模式。

當我將它推到實況網站時，速度更快，但它留下了一些圖像卸載，這當然是不可接受的。

所以這是我希望一些SO能手都知道：

1）爲什麼我的異步方法調用工作時的調試，但不活網站上的工作？

2）有沒有更簡單的方法讓大量的sparklines在安全的服務器上快速加載而不會讓我想撕掉頭髮？

2a。）有沒有人有使用ASP.NET圖表庫的經驗？這是我應該調查的嗎？

2b。）一位同事建議我使用1x1 CSS背景圖像製作自己的Sparkline例程並改變高度。問題是a）如果我們想進行更改，它是完全不可擴展的; b）看起來好像很糟糕（在標記中每個sparkline留下的bajillion DIV）;和c）我不知道當一頁上有100-200個時它是否足夠快 - 您對1x1精靈方法的可行性有何看法？

在此先感謝。

Answer 1

ASP.Net圖表以我的經驗很好。在http://betterdashboards.wordpress.com/2010/02/21/how-to-create-a-sparkline-chart-in-asp-net/有一個快速入門，讓你開始使用必要的配置來渲染一個迷你圖。

編輯：增加了在MVC中使用ASP.Net圖表的示例。顯然你想把這些代碼移到某種類的幫助類中，但是希望這可以清楚地說明做這件事情會發生什麼。

@model IEnumerable<CustomerSales>   
@using Chart = System.Web.UI.DataVisualization.Charting.Chart 
@{  
    ViewBag.Title = "Index"; 
} 

<h2>Index</h2> 

<p> 
    @Html.ActionLink("Create New", "Create") 
</p> 
<table> 
    <tr> 
     <th> 
      Name 
     </th> 
     <th> 
      Sales 
     </th> 
    </tr> 

@foreach (var item in Model) 
{ 
    <tr> 
     <td> 
      @item.Name 
     </td> 
     <td> 
      @{ 

    var chart = new Chart(); 
    chart.ChartAreas.Add(new ChartArea()); 
    chart.ChartAreas[0].AxisX.LabelStyle.Enabled = false; 
    chart.ChartAreas[0].AxisY.LabelStyle.Enabled = false; 
    chart.ChartAreas[0].AxisX.MajorGrid.Enabled = false; 
    chart.ChartAreas[0].AxisY.MajorGrid.Enabled = false; 
    chart.ChartAreas[0].AxisX.MajorTickMark.Enabled = false; 
    chart.ChartAreas[0].AxisY.MajorTickMark.Enabled = false; 
    chart.ChartAreas[0].AxisX.LineWidth = 0; 
    chart.ChartAreas[0].AxisY.LineWidth = 0; 

    chart.Series.Add(new Series()); 
     // Assign the random number to the chart to create 35 points 
    for (int x = 0; x < item.Sales.Length; x++) 
    { 
     chart.Series[0].Points.AddXY(x, item.Sales[x]); 
    } 

    // Start hiding both sets of axes, labels, gridlines and tick marks 
    chart.ChartAreas[0].AxisX.LabelStyle.Enabled = false; 
    chart.ChartAreas[0].AxisY.LabelStyle.Enabled = false; 
    chart.ChartAreas[0].AxisX.MajorGrid.Enabled = false; 
    chart.ChartAreas[0].AxisY.MajorGrid.Enabled = false; 
    chart.ChartAreas[0].AxisX.MajorTickMark.Enabled = false; 
    chart.ChartAreas[0].AxisY.MajorTickMark.Enabled = false; 
    chart.ChartAreas[0].AxisX.LineWidth = 0; 
    chart.ChartAreas[0].AxisY.LineWidth = 0; 

    // Sparklines use the 'Spline' chart type to show a smoother trend with a line chart 
    chart.Series[0].ChartType = SeriesChartType.Spline; 

    // Since the line is the only thing you see on the chart, you might want to 
    // increase its width.&nbsp; Interestingly, you need to set the BorderWidth property 
    // in order to accomplish that. 
    chart.Series[0].BorderWidth = 2; 

    // Re-adjust the size of the chart to reduce unnecessary white space 
    chart.Width = 400; 
    chart.Height = 100; 
    string base64; 
    using (MemoryStream ms = new MemoryStream()) 
    { 
     chart.SaveImage(ms); 
     var bytes = ms.GetBuffer(); 
     base64 = Convert.ToBase64String(bytes); 
    } 
/** 
    * Here's a simpler example that would do a regular chart, 
    * rather than a sparkline. No way to make the gridlines and axes go 
    * away with this helper that I'm aware of. 

    var chart = new Chart(
     width: 300, 
     height: 100 
     ) 
     .AddSeries(chartType: "Spline", yValues: item.Sales); 
    var bytes = chart.GetBytes(); 
    var base64 = Convert.ToBase64String(bytes);  
      */ 
       } 
      <img src="data:image/jpeg;base64,@base64" /> 
     </td> 
    </tr> 
} 

</table> 

這是使用一個模型，看起來像：

所有異步的

public class CustomerSales 
{ 
    public CustomerSales(string name, params int[] sales) 
    { 
     Name = name; 
     Sales = sales; 
    } 
    [Required] 
    public string Name { get; set; } 
    [Required] 
    public int[] Sales { get; set; } 
}