1

我对 web 应用程序和 javascript、jquery、json、knout 等世界有点陌生。我试图做一些真正简单但没有开始工作的事情。我想将数据从控制器传递到视图以使用 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 是最正确的方法，只是不知道如何使用它。

你能告诉我怎么做吗？

4

2 回答 2

5

您可以拥有一个代表您的数据的视图模型，然后在您的控制器中构建它的集合。然后，您可以通过 ajax 调用它并将其作为 json 对象返回。

视图模型

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,
    });
});
于 2013-04-19T12:51:37.333 回答
1

您可以使用 .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);
}
于 2013-04-19T12:50:06.983 回答