Question

我是一个新的网络应用程序和javascript，jquery，json，淘汰赛等世界等我试图做一些非常简单但没有开始工作的事情。我想将数据从控制器传递到视图以使用morris.js构建绘图。

我谷歌并尝试了几次，没有成功。

视图收到类似这样的图表：

<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从控制器检索数据，并在脚本中使用它。您不能在客户端的javascripts中使用ViewBag。

您可以使用jquery从客户端获取请求：

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

将数据从控制器传递到视图以构建绘图

2 个答案: