Передача данных с контроллера для просмотра на график построения

Question

Im kinda new для веб-приложений и мира javascript, jquery, json, нокаута и т. Д. Im пытается сделать что-то реальное просто, но не получается работать. Я хочу передать данные с контроллера для просмотра, чтобы построить график, используя morris.js.

Я google и попытался несколько попыток, никто не преуспел.

мнение recieves что-то вроде этого, чтобы buils график:

<script> 
    new Morris.Line({ 
    // ID of the element in which to draw the chart. 
    element: 'myfirstchart', 
    // Chart data records -- each entry in this array corresponds to a point on 
    // the chart. 
    data: [ 
    { year: '2008', value: 20 }, 
    { year: '2009', value: 10 }, 
    { year: '2010', value: 5 }, 
    { year: '2011', value: 5 }, 
    { year: '2012', value: 20 } 
    ], 
    // The name of the data record attribute that contains x-values. 
    xkey: 'year', 
    // A list of names of data record attributes that contain y-values. 
    ykeys: ['value'], 
    // Labels for the ykeys -- will be displayed when you hover over the 
    // chart. 
    labels: ['Value'] 
}); 
</script> 

Теперь я хочу, чтобы отправить данные из контроллера с помощью viewbag или что-то еще. Для того, что я понял, JSON является самым правильным способом, просто не знаю, как его использовать.

Можете ли вы показать мне, как вам понравиться?

Answer 1

Вы можете иметь ViewModel, который представляет ваши данные, а затем построить коллекцию его в контроллере , Затем вы можете вызвать его через ajax и вернуть его как объект json.

ViewModel

public class YearlyStat { 
    public int Year {get;set;} 
    public int Value {get;set;} 
} 

Сборка данных в контроллере, как это:

public ActionResult Statistics() { 
    // most probably the values will come from a database 
    // this is just a sample to show you 
    // that you can return an IEnumerable object 
    // and it will be serialized properly 
    var stats = new List<YearlyStat> { 
     new YearlyStat { Year=2008, Value=20}, 
     new YearlyStat { Year=2009, Value=10}, 
    } 
    return Json(stats,JsonRequestBehavior.AllowGet); 
} 

Затем потреблять его так:

$.get('@Url.Action("Statistics")', function(result){ 
    new Morris.Line({ 
     data: result, 
    }); 
}); 

Answer 2

Вы можете использовать .ajax для извлечения данных с контроллера и использовать его в своем скрипте. Вы не можете использовать ViewBag в своих javascripts на стороне клиента.

Вы можете использовать JQuery для запроса GET со стороны клиента:

<script> 
    $(function() { 
    $.get('@Url.Action("GetDataForPlot")', function(response) { 
     // put your code for drawing plot 
     // response is your data from controller to use in plot 
    }); 
    }); 
</script> 

И контроллер

public ActionResult GetDataForPlot() { 
    var data= new List<Stats> { 
     new Stats{ Year=2010, Value=50}, 
     new Stats{ Year=2011, Value=100}, 
     new Stats{ Year=2012, Value=150}, 
    } 
    return Json(data, JsonRequestBehavior.AllowGet); 
}