9

我正在寻找有关如何使用从数据库中获取的数据在网页上显示 KendoUI 图表的教程和代码示例。更准确地说是一个 ASP.Net MVC 网页；就像需要在服务器端执行的操作才能显示在 KendoUI 图表上显示的控制器方法上计算的数据。

具体问题如下：

  1. KendoUI 是否仅适用于服务，或者我什至可以在 ActionResult 方法中将 ViewModel 对象返回为return View(vmObj);？
  2. 服务器端是否有返回 KendoUI 图表的代码示例？
  3. KendoUI 是否仅在 MVC 中工作，或者我也可以在 Asp.Net WebForms 中使用它

到目前为止，我看到的 KendoUI 文档仅显示客户端代码，而不是针对 AspNet MVC 开发人员量身定制的。

谢谢你的时间..

4

3 回答 3

12

Kendo 曾经有一些 ASP.NET MVC 演示，您可以下载并在 Visual Studio 中运行以查看如何绑定到远程数据等，但由于某种原因它们被删除了。这是我根据这些演示制作的一个简单示例：

控制器动作（例如在“ChartsController.cs”中）：

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

图表模型：

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

查看（“Charts/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 来完成，因为我以前从未使用过它。希望这可以帮助！

于 2012-08-15T20:02:23.330 回答
7

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

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

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

于 2012-09-18T08:00:00.647 回答
1

以下是您的问题的一些答案（未分类）

  1. 看看这里的这个演示——我猜它会满足你的需求。使用图表下方的按钮检查视图/控制器和模型
  2. 请注意，即使集合被传递到服务器上的图表。图表总是在客户端初始化。
  3. 只要有要使用的数据，您就可以在任何地方使用 KendoChart。再一次，它可以是本地 JavaScript 数组 JSON，它是调用服务/控制器的结果。
于 2012-08-09T17:33:03.163 回答