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.
Download and install Northwind Database
 
 
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.
Note: For beginners in ASP.Net Core and Entity Framework, please refer my article ASP.Net Core: Simple Entity Framework Tutorial with example. It covers all the information needed for connecting and configuring Entity Framework with ASP.Net Core.
 
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
ASP.Net Core: Display Grid (GridView) using ReactJS and AJAX
 
 
Downloads
Download Code