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

本文关键字：数组 C#ASP NET Javascript | 更新日期: 2023-09-27 18:21:38

我有一个数组，我从数据库（编号为8.00和9.00）中存储在c#中的page_load中，我想将其传递到JavaScript中以绘制High图表。我遵循了Stack溢出给出的所有示例，但我会出错。我做错什么了吗？

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>

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

尝试为创建一个名为"_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);
}

然后在标记页面中：

var javaVariable = <%= _Result %>

显示此错误消息是因为"Course"不是全局变量，所以标记页无法访问"Course"对象。

相关文章：