pass list item from c# to javascript array

Question

I have following code to show multiple marker on gmap

<script type="text/javascript">

        function init() {
            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 map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: new google.maps.LatLng(-33.92, 151.25),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var infowindow = new google.maps.InfoWindow();

            var marker, i;

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

                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }
            return false;
        }
    </script>

I want to make this dynamic so i have to pass this

 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]
            ];

from c# code to this js .

I have tried Hidden Field and this code

 List<String> oGeocodeList = new List<String>
                                         {
                                            "'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 geocodevalues = string.Join(",", oGeocodeList.ToArray());
        ClientScript.RegisterArrayDeclaration("locations", geocodevalues);

But NO luck any reference will be helpful to me

Answer 1

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