3

I have an array which I am storing inside an <input type="hidden">. Here is my code.

Javascript:

var trees;

// called when the body loads
function BodyOnLoad()
{
  trees = document.getElementById("trees");
  trees.value = new Array();
}

// this is what isn't working
function AddTree()
{
  var i = trees.value.length;

  trees.value[i] = new Array();
  /***/
  trees.value[i]["branches"] = 5;
  trees.value[i]["trunk"]    = 0;
}

HTML: <input type="hidden" name="trees" id="trees" />

In C#, Request.Form["trees"] is not an array. What am I doing wrong?

4 Answers4

3

The HTML form post won't preserve a javascript object (in this case an Array). You should look at converting your Array to JSON and passing that in the form if you need to preserve the array object.

Include this script (JSON2) in your page: JSON2

var treesArray;

// called when the body loads
function BodyOnLoad()
{
  treesArray = new Array();
}

function AddTree()
{
  var tree = new Array();

  //branches      
  tree[0] = "5";

  //trunk      
  tree[1] = "0";

  //name
  tree[2] = "Elm";

  treesArray[treesArray.length] = tree;
  document.getElementById("trees").value = JSON.stringify(treesArray);
}

Then on the server side you will need to convert the JSON to a C# Array using something like this:

Add reference to JavaScriptSerializer from System.Web.Extensions.dll (.NET 3.5 SP1)

JavaScriptSerializer serializer = new JavaScriptSerializer();
string[][] trees = serializer.Deserialize<string[][]>(Request.Form["trees"]);

for(int i = 0; i < trees.Length; i++)
{
    Console.WriteLine("Branches:" + trees[i][0]);
    Console.WriteLine("Trunk:" + trees[i][1]);
    Console.WriteLine("Name:" + trees[i][2]);
}
AVH
  • 1,725
  • 1
  • 13
  • 8
  • `JSON.stringify` is not available in IE... not in this form. It would be better to use a javascript lib to do this such as **jQuery**. (EDIT - my bad jQuery does not support this... take a look at http://stackoverflow.com/questions/191881/serializing-to-json-in-jquery to know how to serialize json) – Miguel Angelo Aug 31 '11 at 23:59
  • As I indicated in the answer, you must include the script JSON2.js for JSON.stringify(). I believe you must use this script anyway, even when using jQuery, in order to serialize JavaScript objects. – AVH Sep 01 '11 at 00:01
  • Thanks, I ended up using JSON. +1 to all three answers above but accepted this one because it provided the most example. –  Sep 01 '11 at 03:50
  • For anyone who cares, I used the [JSON plugin for jQuery](http://code.google.com/p/jquery-json/). –  Sep 01 '11 at 03:51
1

You cannot set the value of an input element to an array in javascript.

You can only set strings as value of input elements.

If you want to send multiple values to the server, you must concatenate mutiple strings, and use a separator, like a pipe '|' or comma ','... and then on the server you need to split the string, by using that separator.

Miguel Angelo
  • 23,796
  • 16
  • 59
  • 82
  • Miguel's advise is correct, you could also pass the string in JSON format and deserialiaze it into an array using the Javascriptserialiser class if you want a native C# array and avoid the parsing yourself. – Icarus Aug 31 '11 at 23:33
  • Thanks for the reply. Unfortunately, this is a little complicated because I need to pass in an array of arrays. Should I still do this? –  Aug 31 '11 at 23:38
  • 1
    Serialize your array of arrays to a JSON string. – Phill Aug 31 '11 at 23:39
0

You need to name the hidden form element with [] (for example, trees[]). Then, when you wish to add a new value to the array, append another DOM element to the form, a hidden input type with the same name (and the new value).

When posted, I believe you'll be able to access them in C# as a string of comma-delimited values.

Ashley_Ingram
  • 62
  • 1
0

You can read the value from the input, eval it, and when you will post the form, stringify your variable and write it into the input (JSON.stringify and eval functions).

Adilson de Almeida Jr
  • 2,761
  • 21
  • 37