將字典對象從控制器傳遞給Javascript

Question

我在將一個字典對象從控制器傳遞給視圖中的javascript時遇到了一些麻煩。 我正在使用ASP .Net MVC3，我試圖用數據庫中的數據做一些圖表/圖形，我發現HighCharts的JavaScript，我試圖與它合作。 這裏的例子：

$(function() { 
var chart; 
$(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'column' 
     }, 
     title: { 
      text: 'Stacked column chart' 
     }, 
     xAxis: { 
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Total fruit consumption' 
      } 
     }, 
     tooltip: { 
      formatter: function() { 
       return ''+ 
        this.series.name +': '+ this.y +' ('+ Math.round(this.percentage) +'%)'; 
      } 
     }, 
     plotOptions: { 
      column: { 
       stacking: 'percent' 
      } 
     }, 
      series: [{ 
      name: 'John', 
      data: [5, 3, 4, 7, 2] 
     }, { 
      name: 'Jane', 
      data: [2, 2, 3, 2, 1] 
     }, { 
      name: 'Joe', 
      data: [3, 4, 4, 2, 5] 
     }] 
    }); 
}); 

}); 

我想用字典來填補一系列變量，這裏是一個使用方法IM：

 public ActionResult GetSeries() 
    { 
     var series= new Dictionary<string, int[]> { 
      { "pa", new int[]{1,2,3,4,5} }, 
      { "papa", new int[]{1,2,3,4,5} }, 
      { "papapa", new int[]{1,2,3,4,5} }, 
     }; 

     return Json(series, JsonRequestBehavior.AllowGet); 
    } 

但其返回類似：
{「啪」： 「1,2,3,4,5」，「papa」：[1,2,3,4,5]，「papapa」：[1,2,3,4,5]}

所以它沒有與JavaScript中的名稱和數據前相同的語法

BTW，即時通訊使用該填充數據

$.getJSON('@Url.Action("GetSeries)', function(series) { 
... 
series: series 
... 
}); 

最好的問候， 埃爾德

Answer 1

什麼它返回是一個關聯數組看起來如何在JavaScript中。你真正需要的是一個數組或對象的列表，根據JavaScript中的頂級例如：

var series= new[] { 
     new { name="pa", data=new int[]{1,2,3,4,5} }, 
     new { name="papa", data=new int[]{1,2,3,4,5} }, 
     new { name="papapa", data=new int[]{1,2,3,4,5} }, 
    }; 

    return Json(series, JsonRequestBehavior.AllowGet); 

我會創建一些視圖模型（這對於包含所有數據的類只是一個奇特的名字，以適當的格式和結構，在您的視圖中顯示所需的），並將其作爲JSON消息返回。

public class SeriesViewModel 
{ 
    public string name { get; set; } 
    public int[] data { get; set; } 
} 

public class GetSeriesViewModel 
{ 
    public string[] categories { get; set; } 
    public SeriesViewModel[] series { get; set; } 
} 

只需將您需要發送的任何屬性添加爲JSON即可。

public ActionResult GetSeries(string category) 
{ 
    // look up your category and series information 

    var model = new GetSeriesViewModel 
     { 
      categories = new[] { "category 1", "category 2" /* etc. */ }, // you can create this list from your code above 
       series = new[] { new SeriesViewModel { name="pa", data=new int[] { 1, 2, 3, 4, 5 } } }// etc.... again, you can create these objects in your code above */ 
     }; 

    return Json(model, JsonRequestBehavior.AllowGet) 
}