Asp.net pass data from code behind to Javascript and call array

Question

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

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

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?

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

}

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.

Answer 1

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

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()%>";

or

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

If you need only the array of data return this

 yourObject = JsonConvert.SerializeObject(YourBarParam.data );

Answer 2

Your understanding is correct. What you have to do is calling C# code inside your aspx file, into script section (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>