In this article I will explain with an example, how to return List collection from Controller using jQuery AJAX in ASP.Net Core (.Net Core 8).
Note: For beginners in ASP.Net Core (.Net Core 8) MVC, please refer my article ASP.Net Core 8: Hello World Tutorial with Sample Program example.
 
 

Model

The Model class consists of following properties
public class CustomerModel
{
    public int CustomerId { get; set; }
    public string Name { get; set; }
    public string Country { get; set; }
}
 
 

Controller

The Controller consists of following Action methods.

Action method for handling GET operation

Inside this Action method, simple the View is returned.
 

Action method for handling jQuery AJAX operation

This Action method handles the call made from the jQuery AJAX function from the View.
Note: The following Action method handles AJAX calls and hence the return type is set to JsonResult.
 
Inside the Action method, a Generic List collection of CustomerModel class object is created and returned back as JSON to the jQuery AJAX function.
public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public JsonResult GetCustomers()
    {
        List<CustomerModel> customers = new List<CustomerModel>();
        customers.Add(new CustomerModel { CustomerId = 1, Name = "John Hammond", Country = "United States" });
        customers.Add(new CustomerModel { CustomerId = 2, Name = "Mudassar Khan", Country = "India" });
        customers.Add(new CustomerModel { CustomerId = 3, Name = "Suzanne Mathews", Country = "France" });
        customers.Add(new CustomerModel { CustomerId = 4, Name = "Robert Schidner", Country = "Russia" });
 
        return Json(customers);
    }
}
 
 

View

HTML Markup

The HTML of View consists of HTML Table which will be populated using jQuery AJAX.
Inside the jQuery document ready event handler, an jQuery AJAX is made to the Controller’s Action Method i.e. GetCutomers.
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.
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <table id="tblCustomers">
        <tr>
            <th>Customer Id</th>
            <th>Name</th>
            <th>Country</th>
        </tr>
    </table>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "POST",
                url: "/Home/GetCustomers",
                data: "{}",
                success: function (response) {
                    PopulateTable(response);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });
        });
 
        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>
</body>
</html>
 
 

Screenshot

ASP.Net Core: Return List collection from Controller using jQuery AJAX
 
 

Downloads

Download Code