从视图中的 JavaScript 访问模型中的数据答案

【问题标题】：Access data in model from JavaScript in view从视图中的 JavaScript 访问模型中的数据
【发布时间】：2016-08-11 07:05:17
【问题描述】：

我对 ASP.NET 的了解非常有限而且很新，所以请纠正我未能理解的任何内容。

我目前正在使用 Google Charts 生成一组图表，但每次我都在数据库中查询同一组数据。我想将其存储在某个地方，或者只检索一次数据以提高性能。

我研究了缓存，但每次我的脚本移动到下一个图表时，数据都不再在缓存中。所以我的另一个想法是获取一次数据，为所有图表生成 JSON 字符串，并将它们存储在模型中。然后我可以通过“Model.chart1 - Model.chart2”等获取数据。

但是，在我看来，我似乎无法从 Javascript 访问这些数据。我可以通过将“@Model.chart1”放在 div 容器中来从 html 到达那里。

所需的行为是从 JQuery 函数内部访问这些数据，如下所示。但不是从控制器调用方法，而是直接访问模型字段，如 'var chart1 = @Model.chartOne'

<script type="text/javascript">

    google.charts.load('current', { 'packages': ['corechart'] });
    google.charts.setOnLoadCallback(drawChartOne);
    google.charts.setOnLoadCallback(drawChartTwo);

    function drawChartOne() {

        var jsonData = $.ajax({
            url: "/Controller/GetChartOne",
            dataType: "json",
            async: false
        }).responseText;

        var options = {

            title: 'Chart One',

            hAxis: {
                title: 'Date'
            },

            vAxis: {
                title: 'Hours'
            },

            explorer: {
                keepInBounds: true
            },

            height: 500,
            width: 1000

        };

        var data = new google.visualization.DataTable(jsonData);

        var chart = new google.visualization.LineChart(document.getElementById('ChartOne'));
        chart.draw(data, options);

    }

    function drawChartTwo() {

        var jsonData = $.ajax({
            url: "/Controller/GetChartTwo",
            dataType: "json",
            async: false
        }).responseText;

        var options = {

            title: 'Chart Two',

            hAxis: {
                title: 'Date'
            },

            vAxis: {
                title: 'Hours'
            },

            explorer: {
                keepInBounds: true
            },

            height: 500,
            width: 1000

        };

        var data = new google.visualization.DataTable(jsonData);

        var chart = new google.visualization.LineChart(document.getElementById('ChartTwo'));
        chart.draw(data, options);

    }
    </script>

【问题讨论】：

标签： jquery asp.net asp.net-mvc

【解决方案1】：

我通过一些关于正确使用 MVC 的阅读和教育解决了这个问题。

我最终创建了一个名为“Graph”的基本模型类，然后为 GraphOne 和 GraphTwo 创建了另外两个模型，它们都继承自 Graph。

然后我创建了一个 ViewModel，它存储了一个 Graph 类型的列表。这意味着我可以将所有不同的图表存储在一个列表中，以便从 JavaScript 中访问。

根据要求，我可以从控制器加载一次数据，然后将数据传递给每个 GraphOne 和 GraphTwo 进行各自的处理。重要的是，只加载一次数据。然后我将 ViewModel 作为 ActionResult 返回，然后可以使用 .cshtml 类中的强类型数据类型访问我需要的属性。

可能是一个非常糟糕的解释，但希望它会对某人有所帮助。我很难找到一个关于 ASP MVC 的像样的教程。这是我关注并推荐的一个非常好的系列： http://www.codeproject.com/Articles/866143/Learn-MVC-step-by-step-in-days-Day

【讨论】：