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>

check out some similar SO previous postings stackoverflow.com/questions/15747264/… — MethodMan
– MethodMan, Commented Oct 17, 2014 at 19:22
possible duplicate of pass list item from c# to javascript array — MethodMan
– MethodMan, Commented Oct 17, 2014 at 19:23
This is not a same question. I want to read the updated list from server side as well. — user1263981
– user1263981, Commented Oct 17, 2014 at 19:32
so does that mean you need the list available for a return lap to the server? as in a) page load (no data, load search form), b) search submit (get list) c) page load 2 (process list result client side and display). d) return lap (new post, what happens here? another search, user picks options..?) — zach
– zach, Commented Oct 17, 2014 at 19:39

Greg · Accepted Answer · 2014-10-17 19:42:51Z

3

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.

answered Oct 17, 2014 at 19:42

Greg

11.5k2 gold badges51 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1263981 Over a year ago

i have managed to send the data to client script by calling script block from code behind and then send the data back to server side from client side by calling web service method of asp.net page. At web service level i think i can only save the returned data in session as i can't access server controls in this method. Do i need to refresh my asp.net page to invoke session data and then show it on web page? Or save data in session at client side and then do post back? Do i have to refresh this page? I need to send the data back to server for further modification before showing them on page.

Greg Over a year ago

That is really an entirely new question, however the approach I conveyed sends entire objects to and from. So you shouldn't need access to the control directly, take the data and simply use Javascript to modify the areas on the page. So you'll need to be more "clear".

Collectives™ on Stack Overflow

How to pass Generic List from code behind to javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related