In this article I will explain how to send and get arrays between JavaScript and Web service Web Methods using ASP.Net AJAX PageMethods

Enabling PageMethods
To enable PageMethods I have added a ScriptManager on the page and also set its EnablePageMethods property to true
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods = "true">
</asp:ScriptManager>
 
Simple Arrays
We will first start with passing and fetching simple array of strings from JavaScript to Web methods.
Client Side:
Here’s a client side JavaScript method that calls a server side Web Method and passes the cities array to it. The Web Method in turn returns the cities array of strings back which is received in the success method of the PageMethod call.
<script type = "text/javascript">
    function GetCityNameArray() {
        var cities = ['Mumbai', 'Delhi', 'Chennai'];
        PageMethods.GetCityNameArray(cities, OnSuccessGetCityNameArray);
    }
    function OnSuccessGetCityNameArray(response) {       
        for (var i in response) {
            alert(response[i]);
        }
    }
</script>
 
I am calling the above event on click of the following HTML button
<input type = "button" onclick = "GetCityNameArray()" value = "Get City Name Array" />
 
Server Side:
On server side the web method simply returns the array it received from the JavaScript of the page.
C#
[System.Web.Services.WebMethod]
public static string[] GetCityNameArray(string[] cities)
{
    return cities;
}
 
VB.Net
<System.Web.Services.WebMethod()> _
Public Shared Function GetCityNameArray(ByVal cities() As String) As String()
    Return cities
End Function
 
Screenshots:
Pass Array to server side web service webmethod using ASP.Net AJAX and client side JavaScript
In the above screenshot you will notice how the array is sent from JavaScript is received server side via the Web Method.
Receive Array from server side web service webmethod client side using JavaScript ASP.Net AJAX
In the above screenshot you will notice how the array sent by the server side web method is received by the client side JavaScript method.

Array of Objects
In the first part we saw how we can pass and fetch simple arrays to server side using Web method and ASP.Net AJAX PageMethods. Now we will learn how to pass class object arrays to server side and also how to receive the class object arrays back in client side JavaScript functions.
Class:
First I’ll create a simple property class of City which has two simple properties
1. Name – Name of the City
2. Population – Population of the City.
C#
public class City
{
    private string name;
    public string Name
    {
        get
        {
            return name;
        }
        set
        {
            name = value;
        }
    }
 
    private int population;
    public int Population
    {
        get
        {
            return population;
        }
        set
        {
            population = value;
        }
    }
}
 
VB.Net
Public Class City
    Private _name As String
    Public Property Name As String
        Get
            Return _name
        End Get
        Set(ByVal value As String)
            _name = value
        End Set
    End Property
    Private _population As Integer
    Public Property Population As Integer
        Get
            Return _population
        End Get
        Set(ByVal value As Integer)
            _population = value
        End Set
    End Property
End Class
 
Client Side:
The below JavaScript function builds an array city objects and passes it to a Web method using ASP.Net AJAX PageMethod. The Web method simply returns the received city object array back to the JavaScript function as response which is then received by the success method of the PageMethod call.
<script type = "text/javascript">
    function GetCityObjectArray() {
        var cities = new Array();
        var city = {};
        city.Name = "Mumbai";
        city.Population = 2000;
        cities[0] = city;
        city = {};
        city.Name = "Delhi";
        city.Population = 1000;
        cities[1] = city;
        city = {};
        city.Name = "Chennai";
        city.Population = 3000;
        cities[2] = city;
        PageMethods.CityObjectArray(cities, OnSuccessCityObjectArray);
    }
    function OnSuccessCityObjectArray(response) {
        for (var i in response) {
            alert(response[i].Name + " " + response[i].Population);
        }
    }
</script>
 
I am calling the above event on click of the following HTML button
<input type = "button" onclick = "GetCityObjectArray()" value = "Get Cities Object Array" />
 
Server Side:
On server side the web method simply returns the city object array it received from the JavaScript of the page.
C#
[System.Web.Services.WebMethod]
public static List<City> CityObjectArray(List<City> cities)
{
    return cities;
}
 
VB.Net
<System.Web.Services.WebMethod()> _
Public Shared Function CityObjectArray(ByVal cities As List(Of City)) As List(Of City)
    Return cities
End Function
 
Screenshots:
Pass custom busines class object Array to server side web service webmethod using ASP.Net AJAX and client side JavaScript
The above screenshot displays how the array of objects sent to the server via ASP.Net AJAX PageMethod is received by the server side web method.
Receive custom business class object Array from server side web service webmethod client side using JavaScript ASP.Net AJAX
The above screenshot displays how the array of objects is received client side by the JavaScript function.

With this we come to the end of this article. You can download the complete working source code in C# and VB.Net using the download link provided below.

Download Code