In this article I will explain with an example, how to populate Grid (GridView) using ReactJS and AJAX in ASP.Net MVC.
This article will make use of ASP.Net MVC and ReactJS.Net as backend.
Note: For beginners in ASP.Net MVC ReactJS, please refer my article ASP.Net MVC ReactJS Hello World Example.
 
 
Database
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
Download and install Northwind Database
 
 
Creating an Entity Data Model
The very first step is to create an ASP.Net MVC Application and connect it to the Northwind Database using Entity Framework.
Note: For beginners in ASP.Net MVC and Entity Framework, please refer my article ASP.Net MVC: Simple Entity Framework Tutorial with example. It covers all the information needed for connecting and configuring Entity Framework.
 
Following is the Entity Data Model of the Customers table which will be used later in this project.
Populate Grid (GridView) using ReactJS and AJAX in ASP.Net MVC
 
 
Controller
The Entity Framework is now configured and hence now we can create a Controller and write code to fetch the records from the Customers Table of the Northwind Database.
The Controller consists of two 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
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public JsonResult AjaxMethod()
    {
        NorthwindEntities entities = new NorthwindEntities();
        return Json(from customer in entities.Customers.Take(10)
                    select customer);
    }
}
 
 
ReactJS JSX file
Following ReactJS.jsx file consists of a CustomerTable class which extends ReactJS Component.
Constructor
Inside the Construtor, 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>
    <style type="text/css">
        body { font-family: Arial; font-size: 10pt; }
        table { border: 1px solid #ccc; border-collapse: collapse; background-color: #fff; }
        table th { background-color: #B8DBFD; color: #333; font-weight: bold; }
        table th, table td { padding: 5px; border: 1px solid #ccc; }
        table, table table td { border: 0px solid #ccc; }
    </style>
</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
Populate Grid (GridView) using ReactJS and AJAX in ASP.Net MVC
 
 
Downloads
Download Code