Asp.net将数据从代码传递到Javascript和调用数组 - javascript

我有一个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"]
          });

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

任何人都可以帮助我解决如何传递数据以及以何种格式传递数据的问题吗？如何将变量添加到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的新手，我不确定这是否行得通。

参考方案

首先定义用于客户端的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 );

单击选项卡链接时，请专注于每个引导选项卡中的First asp:textbox - javascript

我是开发的新手，并开始开发简单的asp.net应用程序。我正在使用每个都有一些asp标签和文本框的bootstrap选项卡。单击该选项卡时，我要重点关注选项卡内容中的第一个文本框。我搜索了各种答案，但都是针对输入字段的（exp：输入type =“ text”）。找不到适用于ASP文本框的任何内容。任何帮助将不胜感激。谢谢 javascript参考方案 ASP…

ASP.NET-如何更改JSON序列化的方式？ - javascript

我正在使用ASP.NET通过以下查询返回Json文件：public ActionResult getTransactionTotals(int itemID) { DBEntities db = new DBEntities(); var query = from trans in db.Transactions // Linq query removed …

在JavaScript中运行方法C＃ - javascript

打扰一下，我有这种C＃asp方法。受保护的无效btnSave_Click（对象发送者，EventArgs e）有谁知道我该如何发送脚本给您？可以办到？。 javascript大神给出的解决方案 是的，那可以做到。为此，您在.aspx.cs页中创建了函数，然后单击保存按钮上的代码将其复制到函数中，然后执行以下步骤。//Call cs method from J…

如果我得到url('')，我该如何使用另一个URL - javascript

我是新手，正在写这篇文章，但是如果源上没有图像，那么我只有空白。有人可以告诉我，如果我正在获取背景图像，如何获取/images/no-image.jpg：url（）;这是我的代码：<div class="uk-clearfix uk-position-relative"> <div class="recipeb…

C＃中的CustomValidator无法拾取颜色 - javascript

我正在尝试在网页的下拉列表中使用CustomValidator，并且由于下拉列表的颜色未更改，因此未在表单提交上正确触发。我已经在文本框上进行了相同的验证，但是我显然在下拉菜单中做错了，希望对您有所帮助！我用了这个Change Text Box Color using Required Field Validator. No Extender Control…