Asp.net 将数据从后面的代码传递到 Javascript 并调用数组答案

【问题标题】：Asp.net pass data from code behind to Javascript and call arrayAsp.net 将数据从后面的代码传递到 Javascript 并调用数组
【发布时间】：2015-03-17 12:00:58
【问题描述】：

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

 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"]
          });

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

任何人都可以帮助我如何传递数据，以及它需要以什么格式传递？如何将变量添加到 JavaScript 中？

我能否通过在集合后面的代码中运行 foreach 循环将其作为字符串数组传递，所以：

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

}

然后从Javascript调用字符串数组

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

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

或者那行不通？有些东西告诉我，我做错了。我是 JavaScript 新手，我不确定这是否可行。

【问题讨论】：

标签： javascript c# asp.net arrays multidimensional-array

【解决方案1】：

首先定义您在客户端中使用的 JSON 对象，例如：

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/ 并生成描述您的 JSON 对象的类。

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; }
}

现在在代码后面定义公共页面方法或属性，您将在其中返回或存储 JSON 格式的对象。

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

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;
}

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

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

或

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

如果你只需要数据数组返回这个

 yourObject = JsonConvert.SerializeObject(YourBarParam.data );

【讨论】：

【解决方案2】：

你的理解是正确的。您需要做的是在 aspx 文件中调用 C# 代码到 script 部分（您在帖子中已经完成的操作）。使用 Razor 时，它看起来像这样：

<script>
    @{
        const string MyDevice = @"{ device: '5', sells: 1571 }";
    }


    var o = {
        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 },
            @Html.Raw(MyDevice)
        ],
        xkey: 'device',
        ykeys: ['sells'],
        labels: ['Sells'],
        barRatio: 0.4,
        xLabelMargin: 10,
        hideHover: 'auto',
        barColors: ["#3d88ba"]
    };

</script>

【讨论】：