詳解ASP.NET MVC使用Chart控制項調用樣本

 

在 .NET 3.5 的時候，微軟就提供了一個 Chart 控制項，網路上有大量的關於在 VS2008 中使用這個控制項的文章，在 VS2010 中，這個控制項已經被整合到 ASP.NET 4.0 中，可以從工具箱中直接使用了。

 

 

 

 

這個控制項在 ASP.NET 經典的頁面中很容易使用，但是在 ASP.NET MVC 中使用，卻會出現各種問題。

 

 

 

 

網上有的說可以這樣處理，在 Global.asax 中增加一個方法。

 

Code [http://www.oeedu.com]

1         protected void Session_Start()
2         {
3             string id = this.Session.SessionID;
4         }

 

 

 

增加之後的結果是這樣。

 

 

 

 

到底應該怎樣解決呢？

 

 

 

由於我沒有看到 Chart 的源碼，從錯誤的提示資訊來說，可以看到是在 Handler 處理中出現問題。

 

 

 

網路上有許多關於配置的文章，例如：

 

ScottGu 的 Built-in Charting Controls (VS 2010 and .NET 4 Series)

 

Michael Ceranski 的 Building a Dashboard Using The Microsoft Chart Controls

 

Delian Tchoparinov 的 Handling chart generated images using Chart Http Handler 

 

 

 

但是，很不幸，要麼比較過時，大多數的配置在 VS2010 中是不需要的，要麼沒有解決問題。

 

 

 

在 ASP.NET MVC 中，處理常式的機制有了很大的變化，不再直接通過處理常式產生結果，而是經過了從處理常式到 Controler 到 Action 的多次傳遞。與 ASP.NET 傳統模式完全不同。

 

 

 

Nic_Roche 在文章 Streaming Chart Images as FileResult from MVC Controllers 中提供了一個思路，在 View 中填入一個圖片的引用 ，然後，通過一個 Action 返回這個圖片。不過很不幸，下載之後，也沒有通過。

 

 

 

方向沒有錯誤，僅僅有一些小的地方需要注意。

 

 

 

下面，我們在 VS2010 中通過 ASP.NET MVC 實現一下。

 

 

 

1. 建立一個 ASP.NET MVC 項目。

 

2. 在 Index.aspx 這個 View 中插入一個圖片的引用 ，引用的地址是一個 Action 。

 

<img src="/Home/GetChart" alt="Chart" />

 

 

 

3. 在項目的 Models 中增加一個 Model：StaticModel.cs，提供資料。

 

 

 

 

 

Code [http://www.oeedu.com]

 1 using System;
2 using System.Data;
3 using System.Configuration;
4 using System.Linq;
5 using System.Web;
6 using System.Web.Security;
7 using System.Web.UI;
8 using System.Web.UI.HtmlControls;
9 using System.Web.UI.WebControls;
10 using System.Web.UI.WebControls.WebParts;
11 using System.Xml.Linq;
12 using System.Collections.Generic;
13 
14 namespace mvcChart.Models
15 {
16     public class StaticModel
17     {
18         public static List<int> createStaticData()
19         {
20             List<int> c_data = new List<int>();
21             c_data.Add(1);
22             c_data.Add(6);
23             c_data.Add(4);
24             c_data.Add(3);
25             return c_data;
26         }
27     }
28 }
29 

 

4. 為 Home 的 Controler 增加一個名為 GetChart 的 Action。

 

    注意：

 

      1. 這個 Action 返回的類型是一個 FileResult ，也就是返回一個檔案，在這個方法中，使用 FileResult 的衍生類別 FileStreamResult 通過流返回圖片。  

 

      2. 在 33 行，將流的當前位置重新設定到起始位置，以便讀取產生的圖片資料。imageStream.Position = 0;

 

Code [http://www.oeedu.com]

 1  public FileResult GetChart()
2         {
3             List<int> data  = Models.StaticModel.createStaticData();
4             System.Web.UI.DataVisualization.Charting.Chart Chart2 = new System.Web.UI.DataVisualization.Charting.Chart();
5             Chart2.Width = 412;
6             Chart2.Height = 296;
7             Chart2.RenderType = System.Web.UI.DataVisualization.Charting.RenderType.ImageTag;
8             Chart2.Palette = ChartColorPalette.BrightPastel;
9             Title t = new Title("IMG source streamed from Controller", Docking.Top, new System.Drawing.Font("Trebuchet MS", 14, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105));
10             Chart2.Titles.Add(t);
11             Chart2.ChartAreas.Add("Series 1");
12             // create a couple of series   
13             Chart2.Series.Add("Series 1");
14             Chart2.Series.Add("Series 2");
15             // add points to series 1   
16             foreach (int value in data)
17             {
18                 Chart2.Series["Series 1"].Points.AddY(value);
19             }
20             // add points to series 2   
21             foreach (int value in data)
22             {
23                 Chart2.Series["Series 2"].Points.AddY(value   1);
24             }
25             Chart2.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
26             Chart2.BorderlineWidth = 2;
27             Chart2.BorderColor = System.Drawing.Color.Black;
28             Chart2.BorderlineDashStyle = ChartDashStyle.Solid;
29             Chart2.BorderWidth = 2;
30             Chart2.Legends.Add("Legend1");
31             MemoryStream imageStream = new MemoryStream();
32             Chart2.SaveImage(imageStream, ChartImageFormat.Png);
33             imageStream.Position = 0;
34             return new FileStreamResult(imageStream, "image/png");
35         }

 

 

 

最終的結果如下所示：

 

 

 

 

 源檔案下載

 

轉自：http://www.oeedu.com/contents/1237/10957.html