In this article I will explain with an example, how to send and receive JavaScript Array to web service Web Method using ASP.Net AJAX in C# and VB.Net.
 
 

HTML Markup

The HTML Markup consists of following controls:
ScriptManager – For enabling AJAX functions.
Button – For fetching and displaying city name and population.
The Button has been assigned with a JavaScript onclick event handler.
<asp:ScriptManager ID="ScriptManager" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<input id="btnCityName" type="button" onclick="GetCityNameArray()" value="Get City Name Array" />
<input id="btnCityObject" type="button" onclick="GetCityObjectArray()" value="Get Cities Object Array" />
 
 

Sending and receiving JavaSctipt Array to Web Service using AJAX

GetCityNameArray

Inside the GetCityNameArray JavaScript function, cities are stored in the Array and GetCityNameArray function calls which has Array as a parameter.

OnSuccessGetCityNameArray

Inside the OnSuccessGetCityNameArray JavaScript function, the FOR loop is executed and alert message will display.

GetCityObjectArray

Inside the GetCityObjectArray JavaScript function, name and population properties are set. Then, CityObjectArray method is called where cities and OnSuccessCityObjectArray method are passed as a parameter.

OnSuccessCityObjectArray

Inside the OnSuccessCityObjectArray JavaScript function, the FOR loop is executed. Then, name and population values will display in Alert Message Box.
<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]);
        }
    }
 
    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>
 
 

Namespaces

You will need to import the following namespaces.
C#
using System.Web.Services;
using System.Collections.Generic;
 
VB.Net
Imports System.Web.Services
Imports System.Collections.Generic
 
 

Property Class

The Class consists of following properties.
C#
public class City
{
    public string Name { get; set; }
    public string Population { get; set; }
}
 
VB.Net
Public Class City
    Public Property Name As String
    Public Property Population As String
End Class
 
 

WebMethod [PageMethod]

Simple Array

In this Web Method, the string Array is passed as a parameter.
Note: The following Web Method is declared as static (C#) and Shared (VB.Net), it is decorated with Web Method attribute, this is necessary otherwise the method will not be called from client side jQuery AJAX call.
 
Finally, cities are returned.
C#
[WebMethod]
public static string[] GetCityNameArray(string[] cities)
{
    return cities;
}
 
VB.Net
<WebMethod>
Public Shared Function GetCityNameArray(ByVal cities As String()) As String()
    Return cities
End Function
 
 

Screenshot

Get List of Cities

Send and receive JavaScript Array to Web Service Web Method using ASP.Net AJAX
 

Get List of Cities using JavaScript

Send and receive JavaScript Array to Web Service Web Method using ASP.Net AJAX
 

Array of Objects

In this Web Method, the Generic List collection of City is passed as a parameter.
Note: The following Web Method is declared as static (C#) and Shared (VB.Net), it is decorated with Web Method attribute, this is necessary otherwise the method will not be called from client side jQuery AJAX call.
 
Finally, cities are returned.
C#
[WebMethod]
public static List<City> CityObjectArray(List<City> cities)
{
    return cities;
}
 
VB.Net
<WebMethod>
Public Shared Function CityObjectArray(ByVal cities As List(Of City)) As List(Of City)
    Return cities
End Function
 
 

Screenshot

Get City and Population

Send and receive JavaScript Array to Web Service Web Method using ASP.Net AJAX
 

Get City and Population using JavaScript

Send and receive JavaScript Array to Web Service Web Method using ASP.Net AJAX
 
 

Downloads

Download Code