In this article I will explain with an example, how to display Grid (GridView) using
ReactJS and
AJAX in ASP.Net Core.
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Model
The Model class consists of following properties.
public class Customer
{
public string CustomerID { get; set; }
public string ContactName { get; set; }
public string City { get; set; }
public string Country { get; set; }
}
Database Context
Once the
Entity Framework is configured and connected to the database table, the Database Context will look as shown below.
public class DBCtx : DbContext
{
public DBCtx(DbContextOptions<DBCtx> options) : base(options)
{
}
public DbSet<Customer> Customers { get; set; }
}
Controller
The Controller consists of following Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
Action method for handling XmlHttpRequest (XHR) AJAX operation
This Action method handles the
AJAX call made from the
XmlHttpRequest (XHR) function inside the
ReactJS class.
Note: The following Action method handles POST call and will return JSON object and hence the return type is set to JsonResult.
This Action method returns Top 10 records from the
Customers table as JSON to the
XmlHttpRequest (XHR) function inside the
ReactJS class.
public class HomeController : Controller
{
private DBCtx Context { get; }
public HomeController(DBCtx _context)
{
this.Context = _context;
}
public IActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult AjaxMethod()
{
List<Customer> customers = (from customer in this.Context.Customers.Take(10)
select customer).ToList();
return Json(customers);
}
}
ReactJS implementation
Following
ReactJS.jsx file consists of a
CustomerTable class which extends
ReactJS Component.
Constructor
Inside the Constructor, the props variable is sent to the super class so that it can be used later in the render function.
Then an Array named customers is assigned to the state.
Event Handlers
componentDidMount
This function is called when the React Component is loaded in the DOM.
Inside this function, an
XmlHttpRequest (XHR) AJAX request is made to the Controller’s Action method.
And inside the onload event handler, the received response is set in the customers Array of the state using the setState function.
Render function
The Render function returns an HTML Table with Header Row and dynamic rows generated using the customers Array.
Inside the Render function, with the help of map function, the Table rows are dynamically generated using the customers Array.
Finally, the ReactDOM.render function, render’s the class in a HTML DIV with ID dvCustomersGrid.
class CustomerTable extends React.Component {
constructor(props) {
super(props);
this.state = {
customers: []
}
}
componentDidMount() {
var request;
if (window.XMLHttpRequest) {
//New browsers.
request = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
//Old IE Browsers.
request = new ActiveXObject("Microsoft.XMLHTTP");
}
if (request != null) {
request.open("POST", "/Home/AjaxMethod", false);
request.setRequestHeader("Content-Type", "application/json");
request.onload = function () {
if (request.readyState == 4 && request.status == 200) {
var response = JSON.parse(request.responseText);
this.setState({ customers: response });
}
}.bind(this);
request.send();
}
}
render() {
return (<table cellPadding="0" cellSpacing="0">
<thead>
<tr>
<th>CustomerId</th>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
<tbody>
{this.state.customers.map(customer =>
<tr>
<td>{customer.CustomerID}</td>
<td>{customer.ContactName}</td>
<td>{customer.Country}</td>
</tr>
)}
</tbody>
</table>);
}
}
ReactDOM.render(<CustomerTable />,
document.getElementById('dvCustomersGrid'))
View
The View consists of an HTML DIV
dvCustomersGrid inside which the message from the
ReactJS will be displayed.
Then the following necessary JS files for
ReactJS application are inherited.
1. react.development.js
2. react-dom.development.js
Finally, the Customers.jsx file is inherited.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<h4>Customers</h4>
<hr/>
<div id="dvCustomersGrid"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.development.js"></script>
<script src="@Url.Content("~/Scripts/Customers.jsx")"></script>
</body>
</html>
Screenshot
Downloads