用模型对象填充Kendo UI StockChart

本文关键字：UI StockChart Kendo 填充 模型 对象 | 更新日期: 2023-09-27 18:08:37

下面是我的代码片段，一切似乎都很好，甚至在我的控制器数据中的"data"变量是正确的，这意味着51个元素的列表。但是当我运行代码时，它会抛出下面提到的异常

传入字典的模型项类型为System.Collections.Generic.List 1 (TelerikMvcApp1.Models.StockDataPoint) ',但是这本字典需要一个类型的模型项"TelerikMvcApp1.Models.StockDataPoint"。

我知道这个异常是由于列表的使用，但为什么不，解决方案是什么

模型: 

public class StockChart
{
    public List<StockDataPoint> responseData()
    {
        WebClient client = new WebClient();
        string url = "http://demos.telerik.com/kendo-ui/service/StockData";
        string EncryptedJson = client.DownloadString(url);
        string resultString_01 =  EncryptedJson.Substring(9, EncryptedJson.Length - 9); //remove the callback( from the jsonp
        string resultString_02 = resultString_01.Remove(resultString_01.Length - 1); //remove the ) from the same previous response string
        List<StockDataPoint> stockData = JsonConvert.DeserializeObject<List<StockDataPoint>>(resultString_02); // convert the json string to json response

            return stockData;
    }

}
public class StockDataPoint
{
    public DateTime Date { get; set; }
    public decimal Close { get; set; }
    public long Volume { get; set; }
    public decimal Open { get; set; }
    public decimal High { get; set; }
    public decimal Low { get; set; }
    public string Symbol { get; set; }
}

控制器:

public ActionResult Index()
        {
            var stock = new StockChart();
            List<StockDataPoint> data = stock.responseData();
            return View(data);
        }

视图:

@model TelerikMvcApp1.Models.StockDataPoint
@{
    ViewBag.Title = "Home Page";
}
<div class="chart-wrapper">
    @(Html.Kendo().StockChart<TelerikMvcApp1.Models.StockDataPoint>()
        .Name("stockChart")
        .Title("The Boeing Company (NYSE:BA)")
        .DataSource(ds => ds.Read(read => read
            .Action("Index", "Home")
        ))
        .DateField("Date")
        .Panes(panes =>
        {
            panes.Add().Title("Value");
            panes.Add("volumePane").Title("Volume").Height(150);
        })
        .CategoryAxis(axis => axis.Pane("volumePane"))
        .ValueAxis(axis => axis.Numeric().Line(line => line.Visible(false)))
        .ValueAxis(axis => axis.Numeric("volumeAxis").Pane("volumePane").Visible(false))
        .Series(series =>
        {
            series.Candlestick(s => s.Open, s => s.High, s => s.Low, s => s.Close);
            series.Column(s => s.Volume).Axis("volumeAxis")
                    .Tooltip(tooltip => tooltip.Format("{0:C0}"));
        })
        .Navigator(nav => nav
            .Series(series =>
            {
                series.Area(s => s.Close);
            })
            .Select(
                DateTime.Parse("2009/02/05"),
                DateTime.Parse("2011/10/07")
            )
        )
        .HtmlAttributes(new { style = "height:600px;" })
    )
</div>

用模型对象填充Kendo UI StockChart

首先，视图@model TelerikMvcApp1.Models.StockDataPoint中根本不需要这段代码，因为kendo会自动要求控制器在这部分代码中为图表提供数据:

     DataSource(ds => ds.Read(read => read
                .Action("_BoeingStockData", "Financial") // first arg is the method name, 
//second one is the controller name without Controller postfix (Financial is for the FinancialController)

第二件事，你需要写_BoeingStockData方法，作为例子，你可以使用这个:

[HttpPost]
public ActionResult _BoeingStockData()
{
    var db = new SampleEntities();
    return Json(
        from s in db.Stocks
        where s.Symbol == "BA"
        select new StockDataPoint
        {
            Date = s.Date,
            Open = s.Open,
            High = s.High,
            Low = s.Low,
            Close = s.Close,
            Volume = s.Volume
        }
    );
}
相关文章：