嘗試在 JavaScript 中訪問控制器

Question

我的最終目標是使用我的數據庫中的信息使用我的 MVC 應用程序創建一個折線圖。 到目前為止，我已經設法在我的控制器中使用視圖模型和 LINQ 查詢來收集這些數據，並且通過在視圖中運行測試來確保數據是准確的。 但是，我很難弄清楚如何將它包含在我的 JavaScript 文件中。 在我的控制器中，我有一個功能

private DataBase db = new DataBase();
public ActionResult GetInfo() {
    var model = new UserViewModel();
    model.val1=db.table.Where(n=>n.UserID==curUser).Select(n=>n.SomeData).ToArray();
    model.val2=db.table.Where(n=>n.UserID==curUser).Select(n=>n.MoreData).ToArray();
    model.dictionary = the stuff from above;

然后在我的 JavaScript 文件中，我使用 Chart.Js 繪制圖表。 到目前為止，它只有假數據以確保所有內容都正確鏈接，但它看起來像這樣：

jQuery(document).ready(function() {
    var chart=new CanvasJS.Chart("moodgraph",{
        animationEnabled: false,
        theme: "light2",
        title: {
            text: "Simple Line Chart"
        },
        axisY: {
            includeZero: false
        },
        data: [{
            type: "line",
            indexLabelFontSize: 16,
            dataPoints: [

                { x: 1,y: 450 },
                { y: 414 },
                { y: 520,indexLabel: "\u2191 highest",markerColor: "red",markerType: "triangle" },
                { y: 460 },
                { y: 450 },
                { y: 500 },
                { y: 480 },
                { y: 480 },
                { y: 410,indexLabel: "\u2193 lowest",markerColor: "DarkSlateGrey",markerType: "cross" },
                { y: 500 },
                { y: 480 },
                { y: 510 }
            ]
        }]
    });
    chart.render();

});

該圖確實出現在我的視圖中，所以我知道一切正常。 我一直在努力解決的是如何讓 dataPoints 填充我在控制器中獲取的字典值......到目前為止我嘗試使用

var model=@Model.Dictionary

訪問信息，但引發了錯誤。 然后我一直在努力嘗試在控制器中返回一個對象，但這弄亂了我無法觸及的代碼，因為其他人為這個項目編寫了它。 我知道我遺漏了一個簡單的部分，但我的 Google 搜索並沒有告訴我如何在我在這個項目中堅持使用的嚴格參數中做到這一點。

如何訪問我單獨的 JavaScript 文件中的視圖模型數據？

Answer 1

你可以使用這個：

1 - 在您的控制器中：

*
*
ViewBag.Dico = model.dictionary;
return View("chartPage");

2 - 在您的 chartPage.cshtml（或全局聲明您的變量 'Layout.cshtml'）：

<script> 
   var myPoints= @Html.Raw(Json.Encode(ViewBag.Dico));
</script>

3 - 在 ChartJs 中：

jQuery(document).ready(function() {
        var chart=new CanvasJS.Chart("moodgraph",{
        *
        *
        *
        },
        data: [{
            type: "line",
            indexLabelFontSize: 16,
            dataPoints: (typeof(myPoints) != "undefined" ? myPoints: [])
        }]
    });
    chart.render();

});

Answer 2

使用 Chart.JS 庫，您可以按照以下步驟從數據庫數據制作動態圖表

模型：假設您有如下圖形數據模型：

  public class JsResultChart
    {
        public string Name { get; set; }
        public double Value { get; set; } 
    }

---

控制器：

從控制器返回您的數據（使用模型、視圖包等）作為列表

var JsResultChart= new List<JsResultChart> 
{
new JsResultChart{ Name ="first", Value = 100 }, //data will be fetched from db
new JsResultChart{ Name ="second", Value = 200 },
};
Model.JsResultChart = JsResultChart;

---

查看：添加如下內容：

<div class="row">
    <div class="col-md-12">
        <input type="hidden" id="Lables" name="Lables" value="@Json.Encode(Model.ChartData.Select(x => x.Name).ToList())" />
        <input type="hidden" id="Values" name="Values" value="@Json.Encode(Model.ChartData.Select(x => x.Value).ToList())">
        <canvas id="myChart" style="margin: 0 auto;" class="NotPrintable"></canvas>
        <div id="ResultsDiv"></div>
    </div>
</div>

---

javascript:

var Names = $("#Lavels").val();
var Numbers = $("#Values").val();
Names = JSON.parse(Names);
Numbers = JSON.parse(Numbers);
       
var data = {
    labels: Names,
    datasets: [{
        fill: false,
        data: Numbers,
        label: "Value" //you can write(label: Names) rather than (label: "Value")
    }]
};

var ctx = $("#myChart");
var barChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options //add your options
});