Asp.net将数据从代码传递到Javascript和调用数组 [英] Asp.net pass data from code behind to Javascript and call array

问题描述

我有一个asp.net项目，该项目使用一些分析控件来查看各种数据。控件通过如下JavaScript函数填充：

I have a asp.net project that uses some analytics controls for viewing various data. The controls are populated via JavaScript functions such as this:

 Morris.Bar({
              element: 'hero-bar',
              data: [
                  { device: '1', sells: 136 },
                  { device: '3G', sells: 1037 },
                  { device: '3GS', sells: 275 },
                  { device: '4', sells: 380 },
                  { device: '4S', sells: 655 },
                  { device: '5', sells: 1571 }
              ],
              xkey: 'device',
              ykeys: ['sells'],
              labels: ['Sells'],
              barRatio: 0.4,
              xLabelMargin: 10,
              hideHover: 'auto',
              barColors: ["#3d88ba"]
          });

我需要做的是通过传递一些值来填充'data：[]'数组从后面的代码中（我从数据库中获取实际值）。

What I need to do, is to populate the 'data: []' array by passing some values from the code behind (where i get the actual values from a database).

任何人都可以帮助我解决如何传递数据以及采用哪种格式它需要遇到吗？如何将变量添加到JavaScript中？

Can anybody help as to how I might go about passing the data across, and in what format it needs to come across in? How do I add the variable into the JavaScript?

我可以通过在集合后面的代码中运行一个foreach循环将它作为字符串数组传递过来吗，所以：

Can i pass it over as an string array by running a foreach loop in my code behind on the collection, so:

foreach(var item in items)
{
    //build array here called "myDataFromCodeBehind" 
    sb.Append(" { device: xVariable, sells: yVariable },");

}

然后从JavaScript调用字符串数组

And then call the string array from the Javascript

   var myData = "<%=myDataFromCodeBehind %>";

    Morris.Bar({
              element: 'hero-bar',
              data: [myData],
              // etc

或者这不起作用吗？某事告诉我我正在处理所有错误。我是JavaScript新手，我不是

Or would that not work? Something tells me I'm going about it all wrong. I'm new to JavaScript and i'm not sure if this will work.

推荐答案

首先定义用于客户端的JSON对象，例如：

First define your JSON object used in client like:

var YourBarParam = {
              element: 'hero-bar',
              data: [
                  { device: '1', sells: 136 },
                  { device: '3G', sells: 1037 },
                  { device: '3GS', sells: 275 },
                  { device: '4', sells: 380 },
                  { device: '4S', sells: 655 },
                  { device: '5', sells: 1571 }
              ],
              xkey: 'device',
              ykeys: ['sells'],
              labels: ['Sells'],
              barRatio: 0.4,
              xLabelMargin: 10,
              hideHover: 'auto',
              barColors: ["#3d88ba"]
          }

下一步转到页面 http://json2csharp.com/ 并生成您的课程

Next go on page http://json2csharp.com/ and generate your class describing your JSON object.

public class Datum
{
    public string device { get; set; }
    public int sells { get; set; }
}

public class RootObject
{
    public string element { get; set; }
    public List<Datum> data { get; set; }
    public string xkey { get; set; }
    public List<string> ykeys { get; set; }
    public List<string> labels { get; set; }
    public double barRatio { get; set; }
    public int xLabelMargin { get; set; }
    public string hideHover { get; set; }
    public List<string> barColors { get; set; }
}

现在在后面定义代码的公共页面方法或属性中，您将返回或

Now on code behind define public page method or property where you will return or store object JSON formated.

使用newtonsoft nuget包 https://www.nuget.org/packages/Newtonsoft.Json/ 生成对象：

Using newtonsoft nuget package https://www.nuget.org/packages/Newtonsoft.Json/ dgenerate your object:

public static string yourObject = string.Empty;
public static string getBarObject()
{
RootObject YourBarParam = new RootObject();
product.element= "hero-bar";
product.data = new List<Datum>();
mydatun = new Datum();
mydatun.device = "1";
mydatun.sells = "whatever"
product.data.add(mydatun);
...
//and so on
...

 yourObject = JsonConvert.SerializeObject(YourBarParam );
 return yourObject;
}

在页面标记客户端脚本部分中添加

In page markup client script section add

var myData = "<%# getBarObject()%>";

或

var myData = "<%= yourObject %>";

如果只需要数据数组，则返回

If you need only the array of data return this

 yourObject = JsonConvert.SerializeObject(YourBarParam.data );

这篇关于Asp.net将数据从代码传递到Javascript和调用数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！