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

How about simply using ajax to fetch this for you?

Jibi Abraham
– Jibi Abraham

2012-07-24 07:23:25 +00:00
Commented Jul 24, 2012 at 7:23 — Jibi Abraham
– Jibi Abraham, Commented Jul 24, 2012 at 7:23

Chris Herring · Accepted Answer · 2012-07-24 08:10:56Z

8

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.

edited Jul 24, 2012 at 8:10

answered Jul 24, 2012 at 7:28

Chris Herring

3,6553 gold badges37 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rawling Over a year ago

You could even generate a script tag defining the data and not have to worry about getting the element or parsing it.

Chris Herring Over a year ago

@Rawling, that's true, I've that method to my answer.

MSajjadi Over a year ago

Tnx @ChrisHerring. Excellent answer.

yogi · Accepted Answer · 2012-07-24 07:35:09Z

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.

edited Jul 24, 2012 at 7:35

answered Jul 24, 2012 at 7:29

yogi

19.7k13 gold badges67 silver badges93 bronze badges

Collectives™ on Stack Overflow

Sending a string like JSON from C# to javascript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related