In this article I will explain with an example, how to return List collection from PageMethod using AJAX in ASP.Net WebForms using C# and VB.Net.
 
 

HTML Markup

The HTML Markup consists of following control and element.
ScriptManager – For enabling ASP.Net AJAX.
The ScriptManager has been assigned with following property.
EnablePageMethods – For calling WebMethod (PageMethod) from client script.
TABLE – For populating List collection using AJAX.
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<table id="tblCustomers">
    <tr>
        <th>Customer Id</th>
        <th>Name</th>
        <th>Country</th>
    </tr>
</table>
 
 

Namespaces

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

Class

The class consists of following properties.
C#
public class Customer
{
    public int CustomerId { get; set; }
    public string Name { get; set; }
    public string Country { get; set; }
}
 
VB.Net
Public Class Customer
    Public Property CustomerId As Integer
    Public Property Name As String
    Public Property Country As String
End Class
 
 

WebMethod (PageMethod)

Following WebMethod (PageMethod) is returning, a Generic List collection of Customer class object is created and return back as JSON to the AJAX function.
C#
[WebMethod]
public static List<Customer> GetCustomers()
{
    List<Customer> customers =  new List<Customer>();
    customers.Add(new Customer { CustomerId = 1, Name = "John Hammond", Country = "United States" });
    customers.Add(new Customer { CustomerId = 2, Name = "Mudassar Khan", Country = "India" });
    customers.Add(new Customer { CustomerId = 3, Name = "Suzanne Mathews", Country = "France" });
    customers.Add(new Customer { CustomerId = 4, Name = "Robert Schidner", Country = "Russia" });
 
    return customers;
}
 
VB.Net
<WebMethod>
Public Shared Function GetCustomers() As List(Of Customer)
    Dim customers As List(Of Customer) = New List(Of Customer)()
    customers.Add(New Customer With {.CustomerId = 1, .Name = "John Hammond", .Country = "United States"})
    customers.Add(New Customer With {.CustomerId = 2, .Name = "Mudassar Khan", .Country = "India"})
    customers.Add(New Customer With {.CustomerId = 3, .Name = "Suzanne Mathews", .Country = "France"})
    customers.Add(New Customer With {.CustomerId = 4, .Name = "Robert Schidner", .Country = "Russia"})
    Return customers
End Function
 
 

Calling the WebMethod using PageMethod

Inside the jQuery document ready event handler, a jQuery AJAX call is made to the GetCustomers WebMethod (PageMethod).
Inside the success event, JavaScript PopulateTable function is called.
 

PopulateTable function

Inside the PopulateTable function, first the HTML Table is referenced.
Then, a loop is executed over the Customers returned by the jQuery AJAX and one by one a Row is created in the HTML Table.
Note: Table insertRow method adds a new row to a Table at the specified index. If the index is supplied as -1 then the row will be added at the last position.
 
Then inside each Row, a dynamic Cell element is created and appended using jQuery.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        PageMethods.GetCustomers(function (response, userContext, methodName) {
            PopulateTable(response);
        });
    });
 
    function PopulateTable(customers) {
        var table = $("#tblCustomers");
        //Add the data rows.
        for (var i = 0; i < customers.length; i++) {
            //Add the data row.
            var row = $(table[0].insertRow(-1));
 
            //Add the data cells.
            var cell = $("<td />");
            cell.html(customers[i].CustomerId);
            row.append(cell);
 
            cell = $("<td />");
            cell.html(customers[i].Name);
            row.append(cell);
 
            cell = $("<td />");
            cell.html(customers[i].Country);
            row.append(cell);
        }
    };
</script>
 
 

Screenshot

ASP.Net WebForms: Return List collection from PageMethod using AJAX
 
 

Downloads

Download Code