Asp.net mvc 使用Asp.NETC#MVC4和Json，我如何让图表根据分页数据表进行更新

我正在使用和。我更喜欢通过模型返回标准数据，但由于一些奇怪的原因，我不能返回，而且控件似乎只与Json一起工作。也许这只是我的理解。但在这一点上，我完全迷失了方向

我想做的实际上（理论上）很简单

操作结果1返回一个表，该表将分页数据作为Json结果返回给视图，因为这是datatables所需要的。这很好。

以下是控制器对此的操作结果：

public ActionResult AjaxVitalsHandler()
{
    return PartialView();
}

[HttpPost]
[AccessRequired(AccessFeature.Vitals, AccessLevel.Read)]
public ActionResult AjaxVitalsHandler(JQueryDataTableParamModel param)
{
    int start = param.iDisplayStart;
    int perPage = Math.Min(param.iDisplayLength, 100);
    int currentPage = (start / perPage) + 1;
    int id = _accountSession.CurrentUserId;

    //...Bunch of code here to do basic queries and get the data...All working fine.

    return Json(new
    {
         sEcho = param.sEcho,
         iTotalRecords = model.TotalItemCount,
         iTotalDisplayRecords = model.TotalItemCount,
         aaData = result
    });
}

    public ActionResult LoadVitalsChartData2()
    {
        return PartialView();
    }

    //[HttpPost]
    [AccessRequired(AccessFeature.Vitals, AccessLevel.Read)]
    public JsonResult LoadVitalsChartData()
    {
        int id = _accountSession.CurrentUserId;


        //Bunch of code here to retrieve the data...Problem here.
        //There seems to be no way to sync the Ajax call back to that it refreshes
        //the data here too.
        //Ideally what I want is that when the page button is pressed, it reloads this
        //chart too and passes to it the relevant columns of data for plotting.
        //Presently I can only get it to do the first page.
        //The queries work, but how do I pass the relevant page data from the above
        //action result so I am not just getting the first page of data every time.

        return Json(new
        {
            weightData = weightResult,
            xLabels = xAxisResult,
            heightData = heightResult

            //There is security issues around AllowGet inside a post method.
            //I would like to fix this but it is also not my question.
        }, JsonRequestBehavior.AllowGet);
    }

这是相应的局部视图（这是加载到带有渲染的主视图中的局部视图，没有什么特别的）：

这是相应的局部视图（这是加载到带有渲染的主视图中的局部视图，没有什么特别的）：

显然，我希望我的图表显示表中当前显示的数据。i、 e.如果我的表格中有100个项目以10为一组分页，那么当我的表格显示项目20到30时，我的图表应该显示这些项目的数据。它仅显示第一项1至10的数据。图表本身不需要处理分页，它只需要显示10项，并知道表何时更新。这可以从发送到表的数据及其分页事件中获得

那么，如何把它从我的表格中拿出来并传递给我的图表呢

我已经尝试将数据提取到某种数组中，以便共享。弗洛特图表不喜欢这样。我还尝试将数据提取到一个常用的action方法，并将其传递给另一个actionresult，但我不知道如何做

我尝试通过定义类并强制转换它，将所有数据从匿名类型转换为标准类类型。但我还是会出错

这是以前做过的。一个分页的表格和一个与其中显示的数据相对应的图表。为什么在C#MVC4中这么难做到这一点

如果有一种方法可以将上述内容用于标准数据而不是Json，我会笑，因为我知道解决方案。事实上，我有解决办法。查询数据时，将其包装在分页包装器中，以便只返回所需的数据。然后对同一数据集执行两次查询，每个操作结果中一次查询，只将页码传递给分页包装器。但遗憾的是，这是标准的C#和带有EF和Linq的剃须刀。我出色的控件需要Json。这应该容易得多，但我不知道我错过了什么

这是很难张贴更多的代码在这方面，我已经尝试了这么多不同的方式，这将使文章很长。但任何孤立的人或其任何部分都只会混淆问题

最后：我得到了一些关于如何做到这一点的线索，并开始取得进展，但我在datatables网站上寻找的示例并不好。以下是我迄今为止多次尝试中的一次，但都没有成功（它只给了我一个标准的datatables错误，而不是JavaScript错误）：

实际上，我想做的是在页面更改时获取一列数据，并将这些数据绘制在图表上。该页面包含10个项目。因此，我应该有一列数据，其中包含10项，可以传递到图表中进行绘图。

另一段代码建议我应该像上面那样检测页面更改事件，在此之前我应该这样做：

    var my_chart = $.plot($("#vitalsTable"), [{}]);

然后在里面我应该做这样的事情：

    my_chart.setData([new_data_set]);
    my_chart.draw();

<script>
$(document).ready(function ()
{
    var urlRequest = $('#vitalsTable').data("request-url");

    $('#vitalsTable').dataTable({
        "bSort": false,
        "bServerSide": true,
        "sAjaxSource": urlRequest,
        "sServerMethod": "POST",
        "bProcessing": true,
        "bFilter": false,
        "aLengthMenu": [[10], [10]],
        "aoColumns": [
            { "mDataProp": "VitalsDate" },
            { "mDataProp": "weight" },
            { "mDataProp": "height" },
            { "mDataProp": "bmi" },
            { "mDataProp": "bp" },
        ]
    });
});
</script>

但是，我也不知道该怎么做

---

谢谢你的帮助。

这真让我吃惊。因此，这是一个伟大的资源，我喜欢它。但这是我第一次遇到用户从未回答的问题。不管怎样，8天后我终于找到了问题的答案。所以我要把它放在这里作为我将来的参考，因为我总是回到这里。S/O就像我的新编码圣经

本质上，控制器不是问题所在。甚至视图也不是问题所在，而是我在视图中执行jQuery的方式

有人建议我在其他论坛上做类似的事情，这实际上是在我的数据表中添加了一个新的事件处理程序

$('#vitalsTable').live('page', function ()
{
    var tbl = $('#vitalsTable').dataTable(
        {
            "aoColumnDefs": [{
                "aTargets": [0],
                "mData": function (source, type, val)
                {
                    return "Hello";
                }
            }]

        });

    alert("Data ==> " + tbl);

    Charts.initCharts();
});

在datatables代码中的这段代码上方，我有如下内容：

    my_chart.setData([new_data_set]);
    my_chart.draw();

<script>
$(document).ready(function ()
{
    var urlRequest = $('#vitalsTable').data("request-url");

    $('#vitalsTable').dataTable({
        "bSort": false,
        "bServerSide": true,
        "sAjaxSource": urlRequest,
        "sServerMethod": "POST",
        "bProcessing": true,
        "bFilter": false,
        "aLengthMenu": [[10], [10]],
        "aoColumns": [
            { "mDataProp": "VitalsDate" },
            { "mDataProp": "weight" },
            { "mDataProp": "height" },
            { "mDataProp": "bmi" },
            { "mDataProp": "bp" },
        ]
    });
});
</script>

$（文档）.ready（函数（）
{
var urlRequest=$（'vitalTable'）。数据（“请求url”）；
$（'#vitalTable'）。数据表({
“bSort”：错误，
“bServerSide”：正确，
“sAjaxSource”：urlRequest，
“sServerMethod”：“POST”，
“bProcessing”：正确，
“bFilter”：错误，
“阿伦提努”：[[10]，[10]，
“aoColumns”：[
{“mDataProp”：“VitalsDate”}，
{“mDataProp”：“权重”}，
{“mDataProp”：“height”}，
{“mDataProp”：“bmi”}，
{“mDataProp”：“bp”}，
]
});
});

实际上，我只需要将上面的代码更改为下面的代码：

<script>
    $(document).ready(function ()
    {
        var urlRequest = $('#vitalsTable').data("request-url");

        $('#vitalsTable').dataTable({
            "bSort": false,
            "bServerSide": true,
            "sAjaxSource": urlRequest,
            "sServerMethod": "POST",
            "bProcessing": true,
            "bFilter": false,
            "aLengthMenu": [[10], [10]],
            "fnDrawCallback": function (oSettings)
            {
                Charts.initCharts(oSettings);
            },
            "aoColumns": [
                { "mDataProp": "VitalsDate" },
                { "mDataProp": "weight" },
                { "mDataProp": "height" },
                { "mDataProp": "bmi" },
                { "mDataProp": "bp" },
            ]
        });
    });
</script>

$（文档）.ready（函数（）
{
var urlRequest=$（'vitalTable'）。数据（“请求url”）；
$（'#vitalTable'）。数据表({
“bSort”：错误，
“bServerSide”：正确，
“sAjaxSource”：urlRequest，
“sServerMethod”：“POST”，
“bProcessing”：正确，
“bFilter”：错误，
“阿伦提努”：[[10]，[10]，
“fnDrawCallback”：函数（oSettings）
{
图表。初始图表（oSettings）；
},
“aoColumns”：[
{“mDataProp”：“VitalsDate”}，
{“mDataProp”：“权重”}，
{mDataProp”：“height”}，
{“mDataProp”：“bmi”}，
{“mDataProp”：“bp”}，
]
});
});

一旦我这样做了，我只需要对客户端chart.js文件做一些小的调整，该文件通过Charts.initCharts函数接收数据，并且一切都很好

后来我遇到了匿名类型的问题，所以我尝试用适当的类替换它们，比如wh

$('#vitalsTable').live('page', function ()
{
    var tbl = $('#vitalsTable').dataTable(
        {
            "aoColumnDefs": [{
                "aTargets": [0],
                "mData": function (source, type, val)
                {
                    return "Hello";
                }
            }]

        });

    alert("Data ==> " + tbl);

    Charts.initCharts();
});

<script>
$(document).ready(function ()
{
    var urlRequest = $('#vitalsTable').data("request-url");

    $('#vitalsTable').dataTable({
        "bSort": false,
        "bServerSide": true,
        "sAjaxSource": urlRequest,
        "sServerMethod": "POST",
        "bProcessing": true,
        "bFilter": false,
        "aLengthMenu": [[10], [10]],
        "aoColumns": [
            { "mDataProp": "VitalsDate" },
            { "mDataProp": "weight" },
            { "mDataProp": "height" },
            { "mDataProp": "bmi" },
            { "mDataProp": "bp" },
        ]
    });
});
</script>

<script>
    $(document).ready(function ()
    {
        var urlRequest = $('#vitalsTable').data("request-url");

        $('#vitalsTable').dataTable({
            "bSort": false,
            "bServerSide": true,
            "sAjaxSource": urlRequest,
            "sServerMethod": "POST",
            "bProcessing": true,
            "bFilter": false,
            "aLengthMenu": [[10], [10]],
            "fnDrawCallback": function (oSettings)
            {
                Charts.initCharts(oSettings);
            },
            "aoColumns": [
                { "mDataProp": "VitalsDate" },
                { "mDataProp": "weight" },
                { "mDataProp": "height" },
                { "mDataProp": "bmi" },
                { "mDataProp": "bp" },
            ]
        });
    });
</script>