In this article I will explain with an example, how to return List collection from Handler method using
jQuery AJAX in ASP.Net Core (.Net Core 8) Razor Pages.
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; }
}
Razor PageModel (Code-Behind)
The Razor Page consists of following Handler methods.
Handler method for handling GET operation
Inside this Handler method, simple the View is returned.
Handler method for handling jQuery AJAX operation
This Handler method handles the call made from the
jQuery AJAX function from the View.
Note: The following Handler method
AJAX calls and hence the return type is set to
IActionResult.
Inside the Handler method, a Generic List collection of
CustomerModel class object is created and returned back as
JSON to the
jQuery AJAX function.
public class IndexModel : PageModel
{
public void OnGet()
{
}
[ValidateAntiForgeryToken]
public IActionResult OnPostGetCustomers()
{
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 new JsonResult(customers);
}
}
Razor Page (HTML)
HTML Markup
The HTML of Razor Page 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 Handler 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.
@page
@model Send_List_Handler_View_Core_Razor.Pages.IndexModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
@Html.AntiForgeryToken()
<table id="tblCustomers">
<tr>
<th>Customer Id</th>
<th>Name</th>
<th>Country</th>
</tr>
</table>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "/Index?handler=GetCustomers",
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
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
Downloads
