将Dictionary对象从控制器传递到Javascript

Question

I'm having some trouble passing a dictionary object from controller to a javascript in a view. I'm using ASP .Net MVC3 and i'm trying to make some charts/graphics with data from a database, i found HighCharts javascript and i'm trying to work with it. Here's the example:

$(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]
        }]
    });
});

});

i want to fill the series variable with a dictionary, here's the method im using:

       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);
    }

but its returning something like:
{"pa":[1,2,3,4,5],"papa":[1,2,3,4,5],"papapa":[1,2,3,4,5]}

so its not the same syntax as the one in javascript which has name and data before each field

btw, im using this to fill the data

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

Best Regards, Hélder

Answer 1

What it is returning is how an associative array looks in JavaScript. What you really want is an array or list of objects, according to the JavaScript in the top example:

    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);

I would create a few view models (which is just a fancy name for a class that contains all the data, in the appropriate format and structure, required for display in your view), and return that as the JSON message.

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; }   
}

Just add whatever properties you need to send down as JSON. You'll populate them using your own logic in your action:

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)
}