Telerik MVC 图表 ClientEvents.OnDataBinding答案

【问题标题】：Telerik MVC Chart ClientEvents.OnDataBindingTelerik MVC 图表 ClientEvents.OnDataBinding
【发布时间】：2011-11-01 03:11:11
【问题描述】：

我想显示特定投票问题的投票结果。当点击问题列表时，我想根据选定的 questionId 将我的图表与查询绑定。

所以我的计划是； 1. 从选定的问题行中获取 questionId。没关系。

在我的图表上定义 ClientEvents.OndataBinding 事件。所以我可以通过 questionId ；

函数 onChartDataBinding(e) { e.data = $.extend(e.data, { questionId: questionId }); }
在问题列表网格行选择事件上使用$('#ChartPollResults').data('tChart').rebind();。

当我根据选定的第一个网格行进行第二个网格绑定时，此方案有效。但似乎图表控件上没有 ClientEvents.OnDataBinding 事件。而且 Chart 控件不支持“rebind()”方法。

我使用的图表控制如下。

@(Html.Telerik().Chart<QuestionResult>()
                            .Theme("WebBlue")
                            .Name("ChartPollResults")
                            .Title("Poll Question Choice Number vs. Choice Count")
                            .Legend(legend => legend.Position(ChartLegendPosition.Bottom))
                            .Series(series =>
                            {
                                series.Bar("ChoseCount").Name("Choice Count").Gap(5);
                            })
                            .CategoryAxis(axis => axis.Categories(o => o.ChoiceNumber))

                            .DataBinding(dataBinding => dataBinding.Ajax().Select("_PollResultChartBinding", "Poll", new { questionId = 0 }))
                            .HtmlAttributes(new { style = "width: %100px; height: 270px" })
                    )

我的Controller绑定方法；

public ActionResult _PollResultChartBinding(int questionId = 0)
{
            //questionId = 3;
            if (!ModelState.IsValid || questionId == 0)
                return Json(new List<QuestionResult>());

            PollQuestionDefinition pollQuestion = service.Get(questionId);
            List<PollAnswer> pollAnswers = service.GetPollAnswersByQuestion(questionId);
            PollQuestionResultUI result = new PollQuestionResultUI(pollQuestion, pollAnswers);

            return Json(result.Results);
}

当我注释掉 //questionId = 3; 行时，我可以在图表中看到 Id= 3 的问题的结果，没有问题。

但我无法将 questionId 传递给图表。

提前致谢。

【问题讨论】：

标签： asp.net-mvc charts telerik

【解决方案1】：

首先，我立即注意到的一件事是您在 ActionResult 参数中将 questionId 设置为 0。实际上我只是修改了一个我已经启动并运行的图表来传递

new { questionID = 0}

作为我的 Ajax 选择语句的附加参数，它可以很好地传递。

至于传递参数，您可以考虑在网格选择上使用 POST 到服务器并以这种方式传递参数。我知道这里可能并不理想，但理论上您可以在该帖子中填充图表，或者只是设置一个 ViewData 条目以包含您正在寻找的特定 questionID。

我还注意到您将此提交给Telerik forums，从那里的回复看来，上述方法实际上可能工作得很好，或者您可以使用那里提到的方法（使用 ajax 调用的部分视图）。

【讨论】：

【解决方案2】：

这是我的意见，你的源代码应该是这样的：

//controller binding method

    public ActionResult _PollResultChartBinding(string questionId)
    {
                //questionId = 3;
      int _questionId = String.IsNullOrEmpty(questionId) ? 0 : Convert.ToInt32(questionId);

                if (_questionId == 0)
                    return Json(new List<QuestionResult>());

                PollQuestionDefinition pollQuestion = service.Get(_questionId);
                List<PollAnswer> pollAnswers = service.GetPollAnswersByQuestion(_questionId );
                PollQuestionResultUI result = new PollQuestionResultUI(pollQuestion, pollAnswers);

                return Json(result.Results);
    }

**in your view, there is no problem with the code**.
but, for rebind that chart, this is the code :

example : (running from developer console for IE or firebug for firefox browser)

    var chartPollResult = $('#ChartPollResults').data('tChart');
    chartPollResult.rebind({ questionId: "0"});

but if you want make it into function, code should be like this:

    function rebindChartPollResult(e, param) { 
      e.data('tChart').rebind({ questionId: param});
    }

calling method :

    rebindChartPollResult($('#ChartPollResults'), "0");

telerik 图表 ajax 绑定参考（不包括如何重新绑定图表）： http://demos.telerik.com/aspnet-mvc/chart/ajaxbinding

【讨论】：