How to pass data from code behind to JavaScript and call array

Question

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

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).

How can I go about passing the data across, and in what format does it need to come across? How do I add the variable into the JavaScript?

Can I pass it over as a 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 },");
    
}

And then call the string array from the JavaScript

   var myData = "<%=myDataFromCodeBehind %>";
    
   Morris.Bar({
              element: 'hero-bar',
              data: [myData],
              // etc

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.

What happened when you tried the code you thought about? Did it work or not? — TylerH
– TylerH, Commented Mar 21 at 13:36

TylerH · Accepted Answer · 2025-03-21 13:55:40Z

Here's a solution that utilizes Newtonsoft.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"]
}

Next, generate your class describing your JSON object. You can use a page like https://json2csharp.com/ to automate this.

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 the code behind page, define a public page method or property where you will return or store the JSON formatted object.

Using Newtonsoft JSON, generate 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 your page markup's client script section, add:

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

or

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

If you need only the array of data, return this:

yourObject = JsonConvert.SerializeObject(YourBarParam.data);

TylerH · Accepted Answer · 2025-03-21 13:52:34Z

Your understanding is correct. What you have to do is call C# code inside your aspx file, into a script tag (what you have already done in your post). With Razor it looks like that:

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

Collectives™ on Stack Overflow

How to pass data from code behind to JavaScript and call array

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related