将 Kendo UI Chart MVC3 Razor 绑定到数据源答案

【问题标题】：Binding to a DataSource a Kendo UI Chart MVC3 Razor将 Kendo UI Chart MVC3 Razor 绑定到数据源
【发布时间】：2014-01-15 15:13:55
【问题描述】：

我尝试将带有 DataSource 的图表绑定到控制器，但它没有出现在视图中。

这是我的控制器

public List<HorasTrabajadasTecnicosViewModel> GetServiciosByFecha(string txtFechaInicio, string txtFechaFin)
    {
        DateTime FECHA_INICIO;
        DateTime FECHA_FIN = DateTime.Now; ;

        if (String.IsNullOrEmpty(txtFechaInicio)) FECHA_INICIO = _FechaSistema.GetFechaSistema();
        else FECHA_INICIO = Convert.ToDateTime(txtFechaInicio);
        if (String.IsNullOrEmpty(txtFechaFin)) FECHA_FIN = _FechaSistema.GetFechaSistema();
        else FECHA_FIN = Convert.ToDateTime(txtFechaFin).AddDays(1);

        var Servicios = from ser in linq.ViewHorasTrabajadasTecnicosConProyecto
                        where ser.FECHA_INICIO >= FECHA_INICIO
                        && ser.FECHA_FIN <= FECHA_FIN
                        select new HorasTrabajadasTecnicosViewModel
                        {
                            EMPRESA = ser.EMPRESA,
                            TIPO_SERVICIO = ser.TIPO_SERVICIO,
                            TOTAL_HORAS = ser.TOTAL_HORAS.Value
                        };

        return Servicios.OrderBy(m => m.EMPRESA).ToList();
    }

    public ActionResult GraficoServicio(string txtFechaInicio, string txtFechaFin)
    {
        if (!Convert.ToBoolean(Session["superusuario"]))
        {
            if (!_sesion.VerifarSesion(Convert.ToInt16(Session["id_usuario"]))) { Session["aux"] = 0; Session["Usuario"] = null; Session["id_usuario"] = null; Session["superusuario"] = false; Session["id_empresaUsuario"] = null; Session["Rol"] = null; return View("SesionExpiradaConsultas"); }

            if (!_sesion.VerificarAccionAcceso(Convert.ToInt16(Session["id_usuario"]), "Consultas", "VER", "ControlInterno"))
                return View("AccesoDenegadoConsultas");
        }

        if (string.IsNullOrEmpty(txtFechaInicio)) txtFechaInicio = "";
        if (string.IsNullOrEmpty(txtFechaFin)) txtFechaFin = "";

        return View();
    }

    public ActionResult LeerExt_GraficoServicio([DataSourceRequest] DataSourceRequest request, string txtFechaInicio, string txtFechaFin)
    {
        return Json(GetServiciosByFecha(txtFechaInicio, txtFechaFin).ToDataSourceResult(request));
    }`

这是我的观点

@(Html.Kendo().Chart(Model)
.Name("Chart")
.Title("REPORTE DE SERVICIOS POR EMPRESA")
.DataSource(datasource => datasource
    .Read(read => read.Action("LeerExt_GraficoServicio", "Consultas").Data("getParameter"))
    )
    .Series(series => {
        series.Column(model => model.TIPO_SERVICIO)
            .Name("TipoServicio");
    })
    .Legend(legend => legend
        .Position(ChartLegendPosition.Bottom)
    )
    .ValueAxis(axis => axis.Numeric()
        .Labels(labels => labels
            .Format("{0}")
            .Skip(2)
            .Step(2)
        )
    )
    .CategoryAxis(axis => axis
        .Categories(model => model.EMPRESA)
    )
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Format("{0}")
        .Template("#= series.name #: #= value #")
    )
    )

【问题讨论】：

标签： c# asp.net-mvc-3 razor charts kendo-ui

【解决方案1】：

当您在操作LeerExt_GraficoServicio 中使用.ToDataSourceResult(request) 方法时，结果json 中的数据会转到Data 字段，并且图表无法找到所需字段。尝试删除它：

public ActionResult LeerExt_GraficoServicio(string txtFechaInicio, string txtFechaFin)
{
    return Json(GetServiciosByFecha(txtFechaInicio, txtFechaFin));
}

远程数据图表的剑道示例在这里： http://demos.kendoui.com/dataviz/line-charts/remote-data.html

【讨论】：

谢谢！！这对我帮助很大