使用Asp.net MVC的KendoUI图表

Question

我正在寻找有关如何在网页上显示KendoUI图表的教程和代码示例,其中包含从数据库中获取的数据.更确切地说是ASP.Net MVC网页; 喜欢在服务器端需要做什么才能显示在KendoUI图表上显示的控制器方法计算的数据.

具体问题是:

1. KendoUI只能用于服务,还是可以在ActionResult方法中返回ViewModel对象return View(vmObj);？
2. 是否有任何代码在服务器端返回到KendoUI图表？
3. KendoUI只能在MVC中使用,还是可以在Asp.Net WebForms中使用它

到目前为止我看到的KendoUI文档只显示客户端代码,而不是针对AspNet MVC开发人员.

谢谢你的时间..

Answer 1

Kendo曾经有过一些ASP.NET MVC演示,您可以在Visual Studio中下载和运行这些演示,以了解如何绑定到远程数据等,但由于某些原因它们被删除了.这是我基于这些演示制作的一个简单示例:

控制器动作(例如,在"ChartsController.cs"中):

public ActionResult Index()
{
    return View();
}
public ActionResult GetChartData()
{
    IEnumerable<ChartModel> chartData = SomeRepository.GetData();
    return Json(chartData );
}

ChartModel:

public class ChartModel
{
    public ChartModel(string year, int val2, int val3)
    {
        Year = year;
        Val2= val2;
        Val3= val3;
    }

    public string Year { get; set; }
    public int Val2 { get; set; }
    public int Val3 { get; set; }
}

查看("图表/ Index.cshtml",不包括布局):

<div class="chart-wrapper">
@(Html.Kendo().Chart<ChartExample.Models.ChartModel>()
    .Name("chart")
    .Title("Example Column Chart")
    .Legend(legend => legend
        .Position(ChartLegendPosition.Top)
    )
    .DataSource(ds => ds.Read(read => read.Action("GetChartData", "Charts")))
    .Series(series => {
        series.Column(model => model.Val2).Name("Val2");
        series.Column(model => model.Val3).Name("Val3");
    })
    .CategoryAxis(axis => axis
        .Categories(model => model.Year)
        .Labels(labels => labels.Rotation(-90))
    )
    .ValueAxis(axis => axis.Numeric()
        .Labels(labels => labels.Format("{0:N0}"))
        .MajorUnit(10000)
    )
) 
</div>

此示例使用单独的控制器操作来获取视图和获取图表的数据,但您也可以将它们组合在一起,return View(chartData);并且只在视图中显示:

@model IEnumerable<ChartExample.Models.ChartModel>
<div>
    @(Html.Kendo().Chart(Model)
        // just don't include the ".DataSource" line
        // ...
    )
</div>

不幸的是,我不能告诉你是否可以用Webforms完成,因为我之前从未使用过.希望这可以帮助!

Answer 2

Kendo UI为ASP.NET MVC提供官方包装器.

它们取代了旧的Telerik Extensions for ASP.NET MVC.现有用户应该查看迁移指南.完整的文档是docs.kendoui.c​​om网站的一部分.

该试用版包含服务器端包装器和离线演示.您可以wrappers\aspnetmvc在kendoui.trial.x.y.z.zip包的文件夹中找到它们.

Answer 3

以下是您的一些问题的答案（未排序）

1. 看看这里的演示- 我想它会满足您的需求。使用图表下方的按钮检查视图/控制器和模型
2. 请注意，即使该集合也会传递到服务器上的图表。图表始终在客户端上初始化。
3. 只要有可用的数据，您就可以在任何地方使用 KendoChart。它再次可以是本地 JavaScript 数组 JSON，它是调用服务/控制器的结果。