【问题标题】:KendoUI charts with Asp.net MVC带有 Asp.net MVC 的 Kendo UI 图表
【发布时间】:2012-08-06 18:47:21
【问题描述】:

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

具体问题是:

  1. KendoUI 是否仅适用于服务,或者我什至可以在其中返回 ViewModel 对象吗? 一个 ActionResult 方法为 return View(vmObj);
  2. 是否有任何服务器端返回 KendoUI 图表的代码示例?
  3. KendoUI 是否只能在 MVC 中使用,或者我也可以在 Asp.Net WebForms 中使用它

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

感谢您的宝贵时间..

【问题讨论】:

    标签: asp.net-mvc-3 kendo-ui


    【解决方案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);
    }
    

    图表模型:

    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 来完成,因为我以前从未使用过它。希望这会有所帮助!

    【讨论】:

      【解决方案2】:

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

      它们取代了旧的 Telerik Extensions for ASP.NET MVC。现有用户应该看看Migration Guide。完整的文档是docs.kendoui.com site 的一部分。

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

      【讨论】:

        【解决方案3】:

        以下是您问题的一些答案(未分类)

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

        【讨论】:

        • 谢谢,但该链接没有多大帮助。它的 Telerik 代码不适用于 Kendo,我找不到该代码使用的 Telerik 属性的 KendoUI 解决方法...
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2017-02-21
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多