ASP .Net Visual Studio 中的动态数据到 Jquery 代码答案

【问题标题】：dynamic data to Jquery code in ASP .Net Visual StudioASP .Net Visual Studio 中的动态数据到 Jquery 代码
【发布时间】：2014-01-31 23:14:30
【问题描述】：

我是 ASP .net Visual Studio 的初学者。按照 Highchart 的入门教程，我创建了一个带有基本图表的基本 MVC 应用程序。现在，我想将数据绑定到数据库模型以生成动态数据。我怎么做？我在下面写了伪代码。谢谢您的帮助！

    <script>$(function () {
        $('#line').highcharts({
            title: {
                text: 'Monthly Average Temperature',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: WorldClimate.com',
                x: -20
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '°C'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: 'Tokyo',
                data: [
 @foreach (var item in Model){ #psuedocode: pull out data from model so it display data as example below }
            }, {
                name: 'New York',
                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }, {
                name: 'Berlin',
                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
                name: 'London',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]
        });
    });

【问题讨论】：

包括一些您尝试过的实际代码，而不仅仅是从 highcharts 演示页面复制粘贴
我在尝试解析数据并将它们加载到 JavaScript 中的 Telerik DataViz 控件时遇到了一些问题。非常相似的问题。我使用我对您的数据命名法的猜测，在下面发布了对我有用的解决方案。您可能需要对其进行调整以使其正常工作，并且当您在 @: 部分中编写代码时，Visual Studio 有时会为您提供实际上并非错误的脚本错误。
谢谢。下次我在 Stackoverflow 上发布问题时会牢记这一点！

标签： c# javascript asp.net highcharts

【解决方案1】：

您需要使用 @: 运算符将 razor 恢复为文本模式，以将您的模型迭代为 json 数据。

        series: [
               @foreach (var item in Model)
               {
                  @:{ name: "@item.Name", data: [
                       @foreach(var d in item.data)
                       {
                          @:parseInt(@d.value),
                       }
                    },
               }
           ]

Here is a link from Scott Guthrie talking about the @: and @<text> syntax.

【讨论】：

谢谢！这正是我需要开始的！