pass list item from c# to javascript array

Question

I have following code to show multiple marker on gmap

Answer 1

you must use it something like this: in your controller:

 var locations = [
          ['Bondi Beach', -33.890542, 151.274856, 4],
          ['Coogee Beach', -33.923036, 151.259052, 5],
          ['Cronulla Beach', -34.028249, 151.157507, 3],
          ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
          ['Maroubra Beach', -33.950198, 151.259302, 1]
        ];
var locationsString = JsonConvert.SerializeObject(locations);
ViewBag.locationsString = locationsString;
return View();

and in your java script use it like this:

var data = JSON.parse(@ViewBag.locationsString);

and you can have your data in array and use it in javascript each function:

$.each(data, function (i, item) {
//enter your code
}

for javascript not jquery use:

for (var i = 0; i < data.length; i++) {
       addMarker(data[i], map);
    }

Answer 2

I think what you can do is create a List.

Example:

List<T> data = new List<T>();

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

return serializer.Serialize(data);

Thats it.

I hope it work

Answer 3

I would encode the C# into Json using Json.Net or the C# Json encoder. Then write it into the hidden field. Then decode it on the JavaScript side using Json2

Answer 4

Essentially what I believe you're trying to do is create a JSON string. JSON allows you to pass objects in a serialized string format between many languages, including JavaScript and C#. I'd recommend taking a look at the JSON .NET library. It's a fantastic library that will allow you to safely and effeciently serialize items to-and-from strings in C#.

I'd also recommend, instead of passing a multi-dimensional array, that you create a more OOP structure. To do this you'll want to create a class for your locations, I'm going to assume the following:

public class Location
{
    public string Name { get; set; }
    public double Lat { get; set; }
    public double Lng { get; set; }
}

You'll then want to construct a List<Location>, and then serialize that using the JSON .NET library, which will be as easy as this:

List<Location> oGeocodeList = new List<Location>() {
    //...
};

string json = JsonConvert.SerializeObject(oGeocodeList);

With this JSON, you'll either want to write it to a hidden field, or to a variable within the JavaScript. This will then allow you to reference it on your page through the JavaScript. There is also pretty comprehensive documentation, which proves very useful!

This can then be accessed in your JavaScript as any other js object, like so:

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i].Lat, locations[i].Lng),
        map: map
    });

    // ...
}

Answer 5

Using Json.Net

var obj = new[] { 
    new object[] { "Bondi Beach", -33.890542, 151.274856, 4 },
    new object[] { "Coogee Beach", -33.923036, 151.259052, 5 },
    new object[] { "Cronulla Beach", -34.028249, 151.157507, 3 },
    new object[] { "Manly Beach", -33.80010128657071, 151.28747820854187, 2 },
    new object[] { "Maroubra Beach", -33.950198, 151.259302, 1 },
};
var json = JsonConvert.SerializeObject(obj);