asp.net - How to pass Generic List from code behind to javascript

Question

Is it possible to pass the generic list of addresses to client side in java script?

List data is availble at server side, i want to send the list to java script function which will get geocoding for all addresses and then return the list to server side.

• User clicks the search
• On Page Post back, list is generated.
• Before results are shown on the page, call the java script function and loop through the list and get the geocodes and update the list and return the results to server.
• Show the results on page.

Here what i have tried so far, don't know how to read list in javascript function and then return the results to server.

 Private Shared Function CreateGenericArray() As List(Of AddressInfo)
    Dim _AddressInfo As New List(Of AddressInfo)()
    Dim lp As New AddressInfo()
    lp.AddressID = 1
    lp.AddressLine1 = "My Address"
    lp.City = "PA"
    lp.PostalCode = "11654"
    _AddressInfo.Add(lp)

    Return _AddressInfo
End Function

    Public Sub ConvertToJSON()
     Dim jss1 As New JavaScriptSerializer()
     Dim _myJSONstring As String = jss1.Serialize(CreateGenericArray())
     Dim player As String = (Convert.ToString("var player=") & _myJSONstring) + ";"
     Page.ClientScript.RegisterClientScriptBlock(Me.[GetType](), "player123", player, True)       
End Sub



<form id="form1" runat="server">

    <script type="text/javascript">
        $(player).each(function (index, person) {
            alert('AddressID: ' + person.AddressID +
          ' AddressLine1: ' + person.AddressLine1 +
          ' City: ' + person.City
        );
    });
    </script>
</form>

Answer 1

I'll be utilizing C# rather than Visual Basic, but you could essentially do this:

Code Behind:

JavaScriptSerializer serializer = new JavaScriptSerializer();
List<Address> deserialize = serializer.Deserialize<List<Address>>(address);
foreach(Address address in deserialize)
{
     // Do something with Exposed Properties:
}

The Address Class will be very, very basic:

public class Address
{
     public int Id { get; set; }
     public string Street { get; set; }
     public string City { get; set; }
     public string State { get; set; }
     public string Zip { get; set; }
}

That is essentially the backend, now all you have to do on the front-end is:

function BuildAddress(Id, Street, City, State, Zip) {
     var address = null;
     item = {
          Id: Id,
          Street: Street,
          City: City,
          State: State,
          Zip: Zip
     };
}

A clean function to build our object. Now, we actually need to pass that content:

var address = new Array();
var convertAddress;

address.push(BuildAddress(id, street, city, state, zip));
convertedAddress = JSON.stringfy(address);

$.ajax({
     url: '<%= Page.ResolveUrl("~/Services/Location.aspx") %>'
     data: { Address: convertedAddress},
     type: 'POST',

     success: function (address) {
          var result = JSON.parse(address);
          // Do something with result, example: result[0].City
     }
});

That will pass the data in the manner your attempting. You'll have to play with it a bit though.