使用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天的時間來找到它。 令人驚訝的是，簡單的變化有時需要花費最長的時間。

我希望看到這個的人發現它很有用。 如果沒有，發表評論，我會嘗試回答。