将数组传递给Javascript数组C＃ASP.NET

debugcn 发表于 Dev

扎基·艾哈迈德·萨赫里（Zaki Ahmad Sahri）

我有一个数组，该数组是从数据库（编号分别为8.00和9.00）存储在c＃的page_load中的，我想将其传递给JavaScript以绘制高图。我按照堆栈溢出给出的所有示例进行操作，但是会出错。难道我做错了什么？

C＃

using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;


public partial class Highchart : System.Web.UI.Page
{
    public String _Result { get; set; }

    protected void Page_Load(object sender, EventArgs e)
    {
        //Set the course object here
        ArrayList Course = new ArrayList();
        const string connectionString = "Data Source=localhost;" + "Initial Catalog=IBBTS_DB; Integrated Security =SSPI";
        const string query = "SELECT X from accelerometerReading";
        using (SqlConnection cn = new SqlConnection(connectionString))
        {
            using (SqlCommand cm = new SqlCommand(query, cn))
            {
                cn.Open();
                SqlDataReader reader = cm.ExecuteReader();
                while (reader.Read())
                {
                    Course.Add(reader.GetDecimal(0));
                }
            }
        }
        _Result = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Course);
    }
}

的JavaScript

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
             <script type="text/javascript" src="~/js/highcharts.js"></script>
  <script type="text/javascript" src="~/js/modules/exporting.js"></script>
                <div id="container" style="width:100%; height:400px;">
<script type="text/javascript">
    $(function () {
        $('#container').highcharts({
            title: {
                text: 'Monthly Average Temperature',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: WorldClimate.com',
                x: -20
            },
            xAxis: {
                categories: ['Jan', 'Feb']
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '°C'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            <% var serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); %>
            var jsVariable = <%= serializer.Serialize(Course) %>;
            series: [{
                name: 'X axis',
                data: jsVariable
            }, {
                name: 'Y Axis',
                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]

            }]
        });
    });



</script>

编译时会得到空白页。

这是该行的更新版本

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Highchart.aspx.cs" Inherits="Highchart" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
             <script type="text/javascript" src="~/js/highcharts.js"></script>
  <script type="text/javascript" src="~/js/modules/exporting.js"></script>
                <div id="container" style="width:100%; height:400px;">
<script type="text/javascript">
    $(function () {
        $('#container').highcharts({
            title: {
                text: 'Monthly Average Temperature',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: WorldClimate.com',
                x: -20
            },
            xAxis: {
                categories: ['Jan', 'Feb']
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '°C'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            var javaVariable = <%= _Result %>
            series: [{
                name: 'X axis',
                data: javaVariable 
            }, {
                name: 'Y Axis',
                data: [-0.2, 0.8]

            }]
        });
    });
</script>
    </div>
    </form>
</body>
</html>

用户2012384

尝试为此创建一个名为“ _Result”的属性：

在后面的代码中：

//Add this line
public  String _Result {get;set;}

protected void Page_Load(object sender, EventArgs e)
{
    //Set the course object here
    ArrayList Course = new ArrayList();     
    const string connectionString = "Data Source=localhost;" + "Initial Catalog=IBBTS_DB; Integrated Security =SSPI";
    const string query = "SELECT X from accelerometerReading";
    using (SqlConnection cn = new SqlConnection(connectionString))
    {
        using (SqlCommand cm = new SqlCommand(query, cn))
        {
            cn.Open();
            SqlDataReader reader = cm.ExecuteReader();
            while (reader.Read())
            {
                Course.Add(reader.GetDecimal(0));
            }
        }
    }
    _Result = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Course);
}

然后在标记页面中：