使用Asp.Net C＃MVC4和Json，如何使我的图表更新以符合我的分页数据表

Question

我使用的数据表和图表 。 我更愿意通过模型返回标准数据，但由于某些奇怪的原因，它不能用，而且控件似乎只适用于Json。 也许这只是我的理解。 但在这一点上，我完全迷失了。

我想要做的事实上（理论上）非常简单。

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

以下是控制器动作结果：

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
    });
}

这是相应的局部视图（这是用RenderAction加载到主视图中的局部视图，没什么特别的）：

<table class="table table-striped table-bordered table-hover" 
                       id="vitalsTable"
                       data-request-url="@Url.Action("AjaxVitalsHandler")">
    <thead>
        <tr>
            <th class="hidden-480">Date</th>
            <th class="hidden-480">Weight (kg)</th>
            <th class="hidden-480">Height (cm)</th>
            <th class="hidden-480">BMI</th>
            <th class="hidden-480">B/P</th>
        </tr>
    </thead>
</table>

最后是相应的DataTables代码（由于某些奇怪的原因，当放置在局部视图中而不是在主视图中时出现错误，（不是我的问题，但无论如何）：

<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>

操作结果2返回一个图表，该图表与另一个视图具有相同的数据作为Json结果，因为这是flot图表所需的。 这工作正常但仅适用于第一页数据。

以下是控制器动作结果：

    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);
    }

这是相应的局部视图（这是用RenderAction加载到主视图中的局部视图，没什么特别的）：

    <div id="VitalsChart" class="chart"
             data-request-url="@Url.Action("LoadVitalsChartData")">
    </div>

最后相应的图表代码这是从网站上复制和粘贴的，只是稍加修改，所以我把它放到一个单独的文件中，如果你想看到完整的代码去这里有很多阅读但我没有看到任何地方分页：

        Charts.initCharts();

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

那么如何从我的表中取出并将其传递给我的图表。

我已经尝试将数据提取到某种数组，以便可以共享。 flot chart不喜欢这个。 我也尝试将数据提取到一个常见的操作方法并将其传递给另一个actionresult但我无法弄清楚如何做到这一点。

我已经尝试通过定义类并将其转换为将所有数据从匿名类型转换为标准类类型。 但我仍然会遇到错误。

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

如果有一种方法我可以使用上面的标准数据代替Json，我会笑，因为我知道解决方案。 事实上，我有解决方案。 查询数据时，将其包装在Paging包装器中，以便只返回所需的数据。 然后在每个操作结果中对同一数据集执行2个查询，仅将页码传递给Paging包装器。 但是，这是标准C＃和Razor与EF和Linq。 我精彩的控制需要Json。 这应该更容易，但我不知道我错过了什么。

很难在这上面发布更多的代码，我已经尝试了很多不同的方法，它会使帖子很长。 但任何孤立的人或任何一个人只会混淆问题。

最后：我得到了一些线索如何做到这一点并开始取得进展，但我在datatables网站上寻找的例子并不好。 这是我迄今为止的许多尝试之一，它无法正常工作（它只是给我一个标准的数据表错误，而不是JavaScript错误）：

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

            });

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

        Charts.initCharts();
    });

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

另一段代码表明我应该检测上面的页面更改事件，在此之前我应该​​这样做：

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

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

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

但同样，我不知道如何使它发挥作用。

谢谢你的帮助。

Answer 1

这对我来说真的很令人惊讶。 SO是一个很好的资源，我喜欢它。 但这是我第一次遇到SO用户从未回答的问题。 无论如何，最后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();
});

在我的数据表代码中的代码上面我有这样的东西：

<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>

一旦我这样做，我只需要对客户端chart.js文件进行微调，该文件通过Charts.initCharts函数接收数据并且一切运行良好。

后来我遇到了匿名类型的问题，所以我尝试用适当的类替换它们，就像C＃在幕后做的那样。 但我发现要比这更容易解决。 我的提示，仔细观察视图，控制器和客户端图表上的变量大小写.js。 他们必须准确对应。 花了我2天的时间来找到它。 令人惊讶的是，简单的变化有时需要花费最长的时间。

我希望看到这个的人发现它很有用。 如果没有，发表评论，我会尝试回答。