Sending a string like JSON from C# to javascript

Question

I have some code in JavaScript like this:

slider.setPhotos([
    { "src": "image1", "name": "n1" },
    { "src": "image2", "name": "n2" },
    { "src": "image3", "name": "n3" }
    ]);

And I want to set the values of src and name from C#.

Assume values are like this in C#:

var images = new string[] {"/images/a1.jpg", "/images/a2.jpg", "/images/a3.jpg"};

var names = new string[] {"First", "Second", "Third"};

How can I set these values into JavaScript code (i.e. in Page Load method in C# code)?

Solution 1

On the server you need to serialize the data as JSON and then you can write it into the response as HTML using something like a hidden input field.

For example you might use the NewtonSoft JSON library to serialize the JSON (which is built into ASP MVC 4 however is easy to install using Nuget)

string json = Newtonsoft.Json.JsonConvert.SerializeObject(images);

Then render the json into the HTML (there are number of methods to do this) e.g.

Response.Write(string.Concat("<input id='data' type='hidden' value='", json, "' />");

or

HiddenField jsonField = new HiddenField
{
    ID = "data"
};
jsonField.Value = json;
this.Controls.Add(jsonField);

or even write directly as script skipping the need to parse on the client (I still tend to use the HTML method to avoid any issues with Postbacks/Update Panels causing the script to be executed multiple times)

Response.Write(string.Concat("<script type='text/javascript'> var images = ", json, ";</script>");

On the client you can then read this JSON from the HTML and parse it. In modern browsers this is built in, or you can polyfill with something like JSON2

e.g.

var field = document.getElenentById('data');
var images = JSON.parse(field.value);

You then have access to the data as a Javascript object.

Solution 2

Assuming that images and names are of same length You can use this

StringBuilder str = new StringBuilder();

var images = new string[] {"/images/a1.jpg", "/images/a2.jpg", "/images/a3.jpg"};
var names = new string[] {"First", "Second", "Third"};

str.AppendLine("slider.setPhotos([");
for(int i=0; i< images.Length; i++)
{
   str.AppendLine("{ \"src\": "+ images[i] +", \"name\": "+ names[i] +" }");
   str.AppendLine( (i==images.Length-1 ? "]);":","));
}

Page.ClientScript.RegisterClientScriptBlock(
               this.GetType(), "Key007", str.ToString(), true);

This code will insert a script block when your page will be loaded and after that you can use that script block anywhere in your client side code.