Displaying tabular data from database using React.js

Saturday, February 06, 2016 Sourav Mondal ReactJS

Introduction

In the previous post, I have shown you "Hello World" example using ReactJS in asp.net mvc. Today I am going to show you, how to display tabular data from a database (list of data) using React.js, ASP.NET MVC and entity framework.

Fetch data from database and display in tabular format is a very common task in web development. Before this article, I have explained how to fetch data from database in angularjs and how to retrieve and display database data using jquery in MVC.

Today we will see, how to display tabular data from database in ReactJS. Here in this article, we have not implemented paging, sorting and filtering for making the application simple and understandable. In the next part of this series, we will see paging, sorting and filtering using ReactJS, ASP.NET MVC and entity framework.

Here We will fetch a list of employee data (JSON data) from a database via ajax and then we will create a React component for displaying the employee data list in the tabular format.

Just follow the following steps in order to implement "Displaying tabular data from database using React.js".

Step - 1: Create New Project.

Go to File > New > Project > ASP.NET Web Application (under web) > Entry Application Name > Click OK > Select Empty template > Checked MVC (under "Add folders and core references for" option) > OK

Step-2: Add a Database.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Step-3: Create a table for store data.

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.

In this example, I have used a table as below

Employee Table

Step-4: Add Entity Data Model.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-5: Create an MVC Controller.

Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Templete "empty MVC Controller"> Add.

Here I have created a controller named "HomeController"

Step-6: Add new action into your controller for getting the view, where we will implement our ReactJS component.

Here I have added "Index" Action into "Home" Controller. Please write this following code

public ActionResult Index()
{
    return View();
}

Step-7: Add view for your Action and design.

Right Click on Action Method (here right click on Index action) > Add View... > Enter View Name > Select View Engine (Razor) > Add.
HTML Code

@{
    ViewBag.Title = "Index";
}
<h2>Display tabular data from database using react js</h2>
@* HTML *@
<div id="griddata" class="container">

</div>
@* Bootstrap CSS *@
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
@* Jquery *@
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
@* React Library *@
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
@* JSX parser library *@
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
@* ReactJS components *@
<script type="text/babel">
    @* Here we will create 2 react component 1 for rows and another for table  *@
    var EmployeeGridRow = React.createClass({
        render : function(){
            return (
                <tr>
                    <td>{this.props.item.FirstName}</td>
                    <td>{this.props.item.LastName}</td>
                    <td>{this.props.item.EmailID}</td>
                    <td>{this.props.item.City}</td>
                    <td>{this.props.item.Country}</td>
                </tr>
            );
        }
    });

    var EmployeeGridTable = React.createClass({
        getInitialState: function(){
            return {
                items:[]
            }
        },
        componentDidMount:function(){
            @* Fetch data via ajax *@
            $.get(this.props.dataUrl, function(data){
                if(this.isMounted()){
                    this.setState({
                        items: data
                    });
                }
            }.bind(this));
        },
        render : function(){
           var rows = [];
            this.state.items.forEach(function(item){
                rows.push(<EmployeeGridRow key={item.EmployeeID} item={item}/>);
            });
           return (<table className="table table-bordered table-responsive">
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email ID</th>
                        <th>City</th>
                        <th>Country</th>
                    </tr>
                </thead>
                <tbody>
                    {rows}
                </tbody>
            </table>);
        }
    });
   ReactDOM.render(
        <EmployeeGridTable dataUrl="/home/getEmployeeData"/>,
        document.getElementById('griddata')
    );
</script>

Here I have created two React components named "EmployeeGridTable" and "EmployeeGridRow".

Step-8: Add another action to your controller for return data(employee) list as JSON Data

Here I have used "GetEmployeeData" Action for fetch data. Please write this following code

public JsonResult GetEmployeeData()
{
    using (MyDatabaseEntities dc = new MyDatabaseEntities())
    {
        var data = dc.Employees.OrderBy(a => a.FirstName).ToList();
        return new JsonResult { Data = data, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }
}

Step-9: Run Application.

Live Demo Download