尝试在 JavaScript 中访问控制器答案

【问题标题】：Trying to access controller in JavaScript尝试在 JavaScript 中访问控制器
【发布时间】：2020-04-07 12:58:53
【问题描述】：

我的最终目标是使用我的数据库中的信息来使用我的 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

访问信息，但这引发了错误。然后我一直在努力尝试在控制器中返回一个对象，但这与我无法触及的代码相混淆，因为其他人为此项目编写了它。我知道我错过了一个简单的部分，但我的谷歌搜索并没有告诉我如何在我在这个项目中坚持的严格参数中做到这一点。

如何访问我单独的 JavaScript 文件中的视图模型数据？

【问题讨论】：

你是如何将数据从控制器传递到视图的，你是不是像ViewBag一样使用，一旦你像viewbag一样使用，很容易将视图设置为js变量然后在 javascript 中使用它。
另外，假设您使用类型化视图将数据传递给视图，那么在调用 var model=@Model.Dictionary 时会出现什么错误
@Model.Dictionary 不会访问Model 上名为dictionary 的属性。 C# 区分大小写。请包括您遇到的错误。
@Saravanan 不需要使用ViewBag，因为数据已经在Model上。

标签： javascript c# .net asp.net-mvc

【解决方案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();

});

【讨论】：

不需要使用ViewBag，因为数据已经在Model上。

【解决方案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
});

【讨论】：