current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 27 down vote favorite
13

Does anyone know how to pass a C# ASP.NET array to a JavaScript array? Sample code will also be nice.

Sorry if I was vague earlier guys. The question is actually quite simple. Let's say for simplicity that in my aspx.cs file I declare:

int [] numbers = new int[5];

Now I want to pass numbers to the client side and use the data in the array within JavaScript . How would I do this?

share|improve this question
    
Are you talking about serializing to JSON? – Steven Sudit Aug 12 '10 at 3:24
    
I think we need more details here. Do you want to pass if from the code-behind to the aspx or do you want to use AJAX to send an array of data to javascript... or something entirely different? – samandmoore Aug 12 '10 at 3:25
    
please see above. sorry for being too vague. – locoboy Aug 12 '10 at 4:05
    
possible duplicate of assign C# string of array or string[] to javascript array – Matt Jul 21 '15 at 12:17
up vote 10 down vote accepted

You can use ClientScript.RegisterStartUpScript to inject javascript into the page on Page_Load.

Here's a link to MSDN reference: http://msdn.microsoft.com/en-us/library/asz8zsxy.aspx

Here's the code in Page_Load:

  List<string> tempString = new List<string>();
  tempString.Add("Hello");
  tempString.Add("World");

  StringBuilder sb = new StringBuilder();
  sb.Append("<script>");
  sb.Append("var testArray = new Array;");
  foreach(string str in tempString)
  {
    sb.Append("testArray.push('" + str + "');");
  }
  sb.Append("</script>");

  ClientScript.RegisterStartupScript(this.GetType(), "TestArrayScript", sb.ToString());

Notes: Use StringBuilder to build the script string as it will probably be long.

And here's the Javascript that checks for the injected array "testArray" before you can work with it:

if (testArray)
{
  // do something with testArray
}

There's 2 problems here:

  1. Some consider this intrusive for C# to inject Javascript

  2. We'll have to declare the array at a global context

If you can't live with that, another way would be to have the C# code save the Array into View State, then have the JavaScript use PageMethods (or web services) to call back to the server to get that View State object as an array. But I think that may be overkill for something like this.

share|improve this answer
    
I'll take a look thanks for the explanation. One thing, which array are you referring to as global and why? – locoboy Aug 12 '10 at 5:55
2  
@Gary: My concern here is the ad hoc serialization. If the strings in that list were to contain single quotes, we'd have a problem. That's why using the JSON serializer is safer. – Steven Sudit Aug 12 '10 at 12:38
1  
@cfarm54: If you look at where we have to declare the testArray array, it is a global variable in Javascript. And yes, "this" refers to the Page in this case. If you put this in a User Control, it will return the User Control type; registering the code to the control rather than the page. – Gary Aug 12 '10 at 13:46
1  
@cfarm54: It should not affect other scripts. It's equivalent of having multiple <script> sections or multiple .js files on your page. If you do call RegisterClientScript multiple times, please ensure that the second parameter ("TestArrayScript" in this case) is unique to the other RegisterClientScript's. If my answer is helpful, please rate up / mark answer! I'm trying to get enough points to put comments :) Thanks! – Gary Aug 12 '10 at 14:05
1  
@Gary: My concern here is correctness, not size. Since the OP is using doubles and converting them, there doesn't seem to be any risk of injection, however. – Steven Sudit Aug 12 '10 at 14:23
up vote 45 down vote

serialize it with System.Web.Script.Serialization.JavaScriptSerializer class and assign to javascript var

dummy sample:

<% var serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); %>
var jsVariable = <%= serializer.Serialize(array) %>;
share|improve this answer
    
sorry for the ambiguity. please see above. – locoboy Aug 12 '10 at 4:15
    
@zerkms could you explain what's going on? sorry i'm noob at this – locoboy Aug 12 '10 at 5:18
    
@zerkms - consider editing this answer to make it complete and highlight the fact it supports arbitrary types? – Alexei Levenkov Oct 30 '14 at 15:58
up vote 16 down vote

This is to supplement zerkms's answer.

To pass data across language barriers, you would need a way to represent the data as a string by serializing the data. One of the serialization methods for JavaScript is JSON. In zerkms's example, the code would be placed inside of an aspx page. To combine his example and yours together on one aspx page, you would have,

<%
    int[] numbers = new int[5];
    // Fill up numbers...

    var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
%>

somewhere later on the aspx page

<script type="text/javascript">
    var jsVariable = <%= serializer.Serialize(numbers) %>;
</script>

This answer though, assumes that you are generating JavaScript from the initial page load. As per the comments in your post, this could have been done via AJAX. In that case, you would have the server respond with the result of the serialization and then deserialize it in JavaScript using your favorite framework.

Note: Also do not mark this as an answer since I wanted the syntax highlighting to make another answer more clear.

share|improve this answer
    
do you mean: var jsVariable = <%=serializer.Serialize(numbers)%> ? – locoboy Aug 12 '10 at 13:51
    
also, what do you mean generatign js from the initial page load? – locoboy Aug 12 '10 at 15:50
    
No, because you are in the context of generating JavaScript. When you have int[] numbers = new int[5] { 1, 3, 5, 7, 9 }, serializing it gives you, "[1, 3, 5, 7, 9]". So the generated javascript becomes "var jsVariable = [1, 3, 5, 7, 9];" – Anh-Kiet Ngo Aug 12 '10 at 16:30
    
Correction, you are right, serializer.Serialize(numbers) with the semicolon. I misread and thought you meant the semicolon. I've also made the correction to the code. – Anh-Kiet Ngo Aug 12 '10 at 18:50
    
cool thanks for the help – locoboy Aug 12 '10 at 20:38
up vote 10 down vote

In the page file:

<script type="text/javascript">
    var a = eval('[<% =string.Join(", ", numbers) %>]');
</script>

while in code behind:

public int[] numbers = WhatEverGetTheArray();
share|improve this answer
    
I'm not sure I understand the answer here...can you walk me through it? – locoboy Aug 12 '10 at 5:17
    
@cfarm54-In code behind, you initialize the int[] called numbers. And then in the javascript, string.Join(", ", numbers) make the "numbers" array to be a string like "1,2,3,4". After that, we use eval('[1,2,3,4]') to convert an array-like string to an array. – Danny Chen Aug 12 '10 at 6:06
    
ahhh tricky. however what is the type of the js array? – locoboy Aug 12 '10 at 13:57
    
The variable "a" will be the exact js array. You can use any array operation to it e.g. a[0] a[1] a.length. – Danny Chen Aug 13 '10 at 2:01
up vote 3 down vote

For array of objects:

var array= JSON.parse('@Newtonsoft.Json.JsonConvert.SerializeObject(numbers)'.replace(/&quot;/g, "\""));

For array of int:

 var array= JSON.parse('@Newtonsoft.Json.JsonConvert.SerializeObject(numbers)');
share|improve this answer
up vote 1 down vote

Prepare an array (in my case it is 2d array):

        // prepare a 2d array in c#
        ArrayList header = new ArrayList { "Task Name", "Hours"};
        ArrayList data1 = new ArrayList {"Work", 2};
        ArrayList data2 = new ArrayList { "Eat", 2 };
        ArrayList data3 = new ArrayList { "Sleep", 2 };
        ArrayList data = new ArrayList {header, data1, data2, data3};
        // convert it in json
        string dataStr = JsonConvert.SerializeObject(data, Formatting.None);
        // store it in viewdata/ viewbag
        ViewBag.Data = new HtmlString(dataStr);

Parse it in the view. 

<script>    
    var data = JSON.parse('@ViewBag.Data');
    console.log(data);
</script>

In your case you can directly use variable name instead of ViewBag.Data.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.