React js or react-native with Asp.net Web API – User Registration, Login and Logout Operations part1

1. Install and Configure Required Modules for React.js

We need additional modules for navigating the views, accessing RESTful API and styling the front end. Type this commands to install the required modules.

npm install --save react-router-dom
npm install --save-dev bootstrap
npm install --save axios

Next, open and edit `src/index.js` then replace all codes with this.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/bootstrap/dist/css/bootstrap-theme.min.css';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import Login from './components/Login';
import Register from './components/Register';

ReactDOM.render(
  <Router>
      <div>
        <Route exact path='/' component={App} />
        <Route path='/login' component={Login} />
        <Route path='/register' component={Register} />
      </div>
  </Router>,
  document.getElementById('root')
);
registerServiceWorker();

As you see that Login and Register added as the separate component. Bootstrap also included in the import for make the views better. Now, create the new login and register files.

mkdir src/components
touch src/components/Login.js
touch src/components/Register.js

2. Add List of Book to Existing App Component

As you see in the previous step that App component act as home or root page. This component handles the list of books. Open and edit `src/App.js` then replace all codes with this codes.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router-dom';
import axios from 'axios';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      books: []
    };
  }

  componentDidMount() {
    axios.defaults.headers.common['Authorization'] = localStorage.getItem('jwtToken');
    axios.get('/api/book')
      .then(res => {
        this.setState({ books: res.data });
        console.log(this.state.books);
      })
      .catch((error) => {
        if(error.response.status === 401) {
          this.props.history.push("/login");
        }
      });
  }

  logout = () => {
    localStorage.removeItem('jwtToken');
    window.location.reload();
  }

  render() {
    return (
      <div class="container">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">
              BOOK CATALOG &nbsp;
              {localStorage.getItem('jwtToken') &&
                <button class="btn btn-primary" onClick={this.logout}>Logout</button>
              }
            </h3>
          </div>
          <div class="panel-body">
            <table class="table table-stripe">
              <thead>
                <tr>
                  <th>ISBN</th>
                  <th>Title</th>
                  <th>Author</th>
                </tr>
              </thead>
              <tbody>
                {this.state.books.map(book =>
                  <tr>
                    <td><Link to={`/show/${book._id}`}>{book.isbn}</Link></td>
                    <td>{book.title}</td>
                    <td>{book.author}</td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

As you can see, there's a call to Book RESTful API when the page is loaded. If API calls response `401` error status then it will be redirected to the login page. We also put a logout button inside the condition where JWT token does not exist in local storage.

3. Add a Component for Login

Previously we have created a Javascript file for login component. Now, open and edit `src/components/Login.js` then add/replace this lines of codes.

import React,{Component} from 'react';
import FaceBookLogin from 'react-facebook-login';
import GoogleLogin from 'react-google-login';
import {PostData} from './postdata';
import {Redirect} from 'react-router-dom';
import Header from '../Results/Header';
import './login.css'
class Welcome extends Component{
constructor(){
    super();
    this.state={
        redirect: false,
        datas:[],
        mode:'view',username:'',username1:'',email:'',email1:'',password:'',password1:'',telphone:''
    };
    
    this.handleSave = this.handleSave.bind(this);
    this.handleEdit = this.handleEdit.bind(this);
    this.handleEdit3 = this.handleEdit3.bind(this);
    this.handleEdit2 = this.handleEdit2.bind(this);
    this.handleEdit1 = this.handleEdit1.bind(this);
    this.onChange = this.onChange.bind(this);
}

onChange(e){
    const state = this.state
    state[e.target.name] = e.target.value;
    this.setState(state);
}

  
  handleSave() {
    this.setState({text: this.state.inputText, mode: 'view'});
  }

  handleEdit() {
    this.setState({mode: 'edit'});
  }
  handleEdit3() {
    const {username,username1,email,email1,password1,telphone,password} = this.state;

    this.setState({mode: 'edit1'});
  }
  handleEdit2(){
    var url = document.referrer;
    alert(url);
    var url1 = url.split('://')[1].split('/')[1]
    alert(url1)
    const {username,username1,email,email1,password1,telphone,password} = this.state;
fetch('http://localhost:49716/api/UseAuth/login?username=' + username + '&&password='+password)
.then((res) => res.json())
.then((res) => { // responseData = undefined
localStorage.setItem('UserName',res.UserName);
localStorage.setItem('UserID',res.UserLoginId);
  alert(res);
  this.props.history.push('/'+url1);

});

    }


  handleEdit1(){
const{username,username1,email,email1,password,password1,telphone} = this.state;
fetch('http://localhost:49716/api/UseAuth/register?customerphoneno=' + telphone + '&&customername='+username1+ '&&password='+password1+ '&&email='+email)
.then((result) =>{localStorage.setItem('jwktoken1',result.data);
this.setState({message:'Registration failed'});this.props.history.push("/login")}).catch((error)=>{if(error.responce.status === 401){this.setState({message: "Registration failed"})}});
  }

signup(res,type){
let postData;
if(type === 'facebook' && res.email){
    postData ={
name:res.name,
provider:type,
email:res.email,
provider_id:res.id,
token: res.accessToken,
provider_pic: res.picture.data.url
};
}
if(type === 'google' && res.w3.U3){
    postData ={
        name:res.w3.ig,
        provider:type,
        email:res.w3.U3,
        provider_id:res.El,
        token: res.access_token,
        provider_pic: res.w3.Paa
    };
}

if(postData){
PostData('signup',postData).then((result)=>{
    let responseJson = result;
    sessionStorage.setItem("userData",JSON.stringify(responseJson));
    this.setState({redirect:true});
});
}
else{}
}



renderButton() {
    const {username,username1,email,email1,password1,telphone,password} = this.state;
    if(this.state.mode === 'view') {
      return (
<div>
<div className="row">
<label>Please Login </label></div>
<div className="row">
       <label>username</label> <input type="text" value={username} id="username" name="username" placeholder ="username" onChange={this.onChange}/></div>
       <div className="row">     <label>password</label><input type="text" id="password" value={password} name="password" placeholder="password" onChange={this.onChange}/></div>
       <div className="row">
        <button onClick={this.handleEdit2}>
            login
          </button></div>
          <div className="row">    <a onClick={this.handleEdit}>
            Register
          </a></div>
          <div className="row"> <a onClick={this.handleEdit3}>
            forgot password
          </a>    </div>
          </div>
      );
    } else  if(this.state.mode === 'edit'){
      return (
        <div>
            <div className="row">    <label>Please Register </label>    </div>
            <div className="row">    <label>username</label> <input type="text" value={username1} name= "username1" placeholder="Username" onChange={this.onChange}/>    </div>
            <div className="row">    <label>password</label><input type="text" value={password1}  name= "password1" placeholder="Password" onChange={this.onChange}/>    </div>
            <div className="row">    <label>email ID</label> <input type="email" value={email} name="email" placeholder="Email" onChange={this.onChange}/>    </div>
            <div className="row">   <label>Phone No</label> <input type="tel" value={telphone} name="telphone" placeholder="telphone" onChange={this.onChange}/>    </div>

            <div className="row"> <button onClick={this.handleEdit1}>
            Register
          </button>    </div>
          <div className="row">  <a onClick={this.handleSave}>
            Login
          </a>    </div>
          <div className="row"> <a onClick={this.handleEdit3}>
            forgot password
          </a>    </div>
          </div>
      );
    } else if(this.state.mode === 'edit1'){
return(
<div>
<div className="row">    <label> request for new Password </label>    </div>

<div className="row">    <label>email ID</label> <input type="email" value= {email1} id="email1" name="email1" placeholder="Email" onChange={this.onChange} required />    </div>

<div className="row">  <a onClick={this.handleSave}>
            Login
          </a>    </div>
</div>
);

    }
  }





render(){
if(this.state.redirect || sessionStorage.getItem('userData'))
{
    return(<Redirect to={'/home'}/>)
}
const responseFacebook = (response) => {
console.log('facebook console');
console.log(response);
this.signup(response,'facebook');
}

const responseGoogle = (response) =>{
console.log("google console");
console.log(response);
this.signup(response,'google');
}
var shown = {
    display: this.state.shown ? "block" : "none"
    
};

var hidden = {
    display: this.state.hidden ? "block" : "none"
}
return(
<div>
    <Header/>
    <h2 id = "welcome"> </h2>
    <div className="container">
  <div className="row">
    <div className="col-md-3">
    <div  >
    {this.renderButton()}
  </div>


    </div>
  </div>
    </div>
    </div>
</div> 





    </div>

);

}

}

export default Welcome;

4. Run and Test the Full Stack Secure Application

It's a time for test the whole full stack secure application. The React.js application will integrate with Express.js by building the React.js application. Type this command to build the React.js application.

npm run-script build

Next, type this command to run the Express.js application.

npm start

Open the browser then point to `localhost:3000`. You will see the default landing page redirected to the login page.

And here's the rest of the register page and main page.

That's it, the complete tutorial of securing full stack web application using Passport.js authentication. If there's something wrong with the steps of the tutorial, you can compare it with the full working source code from our GitHub.

React.JS — Component Data Transfer

In React JS, there’s often a need to pass data from one component to another. If you are passing data from somewhere in a component, to somewhere else inside the same component, this can be done through state.

So what is state?

The heart of every React component is its “state”, an object that determines how that component renders & behaves. In other words, “state” is what allows you to create components that are dynamic and interactive.

Think of state as the difference between water, ice and vapor. It’s the same object, but depending on conditions, it can behave differently. That’s the same way we use state within components. We can change the way objects appear, or interact by changing the state of those objects within a component.

How do I change state in a component?

Normally you would need to declare the state after you set the constructor. That might look something like this:

class component_A extends Component {
 constructor() {
 super();
 this.state = {
 data: [],
 };

}

In this case, we are defining the state of data. I’ve defined it here as an empty array. We could have used an empty object, or empty quotes, depending on the data type we wanted to change the state of. Then when we are ready to change the state, we would simply use “this.setState.” With our example above, it might look like this:

this.setState({data: data});

Okay, so let’s say you have two components, and you need to pass data from one component to another. Well, you wouldn’t be able to use state. State can only be transferred within the component where it was created. Instead, you can use props, or properties. Let’s imagine you have a React project, with a file structure that looks like the following:

Here, we have component_A, with files nested inside of it, and then it’s child components, component_B and component_C. It’s very likely that component_A would have data that we would need to access in component_C. How would we access that, or pass the data from component_A to component_C? Basically, what we want to do, is this:

I want to pass the property of color from the parent component to one of the child components. We can pass prop using “this” the same way we set the state in a component earlier. In that example, the state could the be used and passed throughout the component. Passing data from parent to child components is only slightly trickier, in that, we can’t pass data in an unbroken chain to other components. In the above example, we would actually need to pass the data, in this case, {this.props.color} from component_A to component_B and then to component_C. It would look like this:

What if I want to pass data back up the chain, from child to parent?

This is a slightly more difficult process.

1. Define a callback in the parent which takes the data as a parameter.
2. Pass that callback as a prop to the child.
3. Call the callback using this.props.[callback] in the child, and pass in the data as an argument.

From our above example, our code might look something like this:

class component_A extends Component {
 constructor() {
 super();
 this.state = {
 listDataFromComponent_C: “ “,
 };

}

myCallback = (dataFromComponent_C) => {

this.setState({ dataFromComponent_C: dataFromComponent_C});

Now from within the child component (component_C) we can pass something to callbackFromParent:

this.props.callbackFromParent(listInfo);

Because props are static, while state can be changed, once you have passed data from a child to a parent, or from parent to a child, you may need to interact with it differently within that new component. In order to do this, set this parameter as a state within the new component. It might look like the following:

class component_A extends Component {

constructor (props) {

super(props);

this.state = {

dataFromComponent_C: “ “

};

},

myCallback = (dataFromComponent_C) => {

this.setState({ dataFromComponent_C: dataFromComponentC });

This is just a brief explanation of how to change data within a component, and transfer data to other child and parent components. I hope this is helpful, and feel free to reach out if you have any questions, or if I missed anything. Thanks!

show hide divs in react js method 2

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {text: '', inputText: '', mode:'view'};
    
    this.handleChange = this.handleChange.bind(this);
    this.handleSave = this.handleSave.bind(this);
    this.handleEdit = this.handleEdit.bind(this);
  }
  
  handleChange(e) {
    this.setState({ inputText: e.target.value });
  }
  
  handleSave() {
    this.setState({text: this.state.inputText, mode: 'view'});
  }

  handleEdit() {
    this.setState({mode: 'edit'});
  }
  
  renderInputField() {
    if(this.state.mode === 'view') {
      return <div></div>;
    } else {
      return (
          <p>
            <input
              onChange={this.handleChange}
              value={this.state.inputText}
            />
          </p>
      );
    }
  }
  
  renderButton() {
    if(this.state.mode === 'view') {
      return (
          <button onClick={this.handleEdit}>
            Edit
          </button>
      );
    } else {
      return (
          <button onClick={this.handleSave}>
            Save
          </button>
      );
    }
  }
  
  render () {
    return (
      <div>
        <p>Text: {this.state.text}</p>
        {this.renderInputField()}
        {this.renderButton()}
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Server-side paging and sorting in React JS

Introduction

This is the 3rd article of the series "React.js with asp.net MVC application".
In the previous post, I have shown you Displaying tabular data from database in react js Today I am going to show you server-side paging and sorting  using React.js, ASP.NET MVC and entity framework.

In the previous article, we fetched all the data from a server at once which can be a performance issue fetching a large amount of data from server side at once. To resolve this performance issue, here in this article I will show you how to implement server-side paging and sorting in React JS.

Here We will fetch a list of employee data (JSON data) from a database via ajax and then we will create React components for displaying the employee data list in the tabular format with server-side paging and sorting.

Just follow the following steps in order to implement Datatables server-side paging, sorting and filtering in React JS.

[Note: If you already visited my previous article and implemented the same, you can start from step - 7.]

Here In this article, I have used Visual Studio 2013 

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>Show tabular data from database in React JS with server-side paging and sorting</h2>
 
@* HTML *@
<div class="container" id="griddata">
    
</div>
 
@* CSS *@
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
@* Jquery *@
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
@* ReactJS 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 *@
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
@* ReactJS component *@
 
<script type="text/babel">
    @* Here we will create React component *@
 
    @* 1. Paging component *@
    var GridPager = React.createClass({
        render : function(){
            var li = [];
            var pageCount = this.props.Size;
            for(var i = 1; i <=pageCount; i++){
                if(this.props.currentPage == i){
                    li.push(<li key={i} className="active"><a href="#">{i}</a></li>);
                }
                else{
                    li.push(<li key={i} ><a href="#" onClick={this.props.onPageChanged.bind(null,i)}>{i}</a></li>);
                }
            }
            return (<ul className="pagination">{li}</ul>);
        }
    });
   
    
    @* 2. Table row component *@
   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.Country}</td>
                    <td>{this.props.item.City}</td>
                </tr>
            );
        }
    });
    @* 3. Table component *@
    var EmployeeGridTable = React.createClass({
        getInitialState : function(){
            return {
                Data : {
                    List : [],
                    totalPage : 0,
                    sortColumnName : null,
                    sortOrder : null,
                    currentPage : 1,
                    pageSize : 3
                }
            }
        },
        componentDidMount : function(){
            this.populateData();
        },
        @* function for populate data *@
        populateData: function(){
            var params = {
                pageSize : this.state.Data.pageSize,
                currentPage : this.state.Data.currentPage
            }
            if(this.state.Data.sortColumnName){
                params.sortColumnName = this.state.Data.sortColumnName;
            }
            if(this.state.Data.sortOrder){
                params.sortOrder = this.state.Data.sortOrder;
            }
 
            $.ajax({
                url : this.props.dataUrl,
                type : 'GET',
                data : params,
                success : function(data){
                    if(this.isMounted()){
                        this.setState({
                            Data : data
                        });
                    }
                }.bind(this),
                error: function(err){
                    alert('Error');
                }.bind(this)
            });
        },
        @* function for pagination *@
        pageChanged:function(pageNumber,e){
            e.preventDefault();
            this.state.Data.currentPage = pageNumber;
            this.populateData();
        },
        @* function for sorting *@
        sortChanged : function(sortColumnName, order , e){
            e.preventDefault();
            this.state.Data.sortColumnName = sortColumnName;
            this.state.Data.currentPage = 1;
            this.state.Data.sortOrder = order.toString().toLowerCase() == 'asc' ? 'desc':'asc';
            this.populateData();
        },
        @* function for set sort icon on table header *@
        _sortClass : function(filterName){
            return "fa fa-fw " + ((filterName == this.state.Data.sortColumnName) ? ("fa-sort-" + this.state.Data.sortOrder) : "fa-sort");
        },
        @* render *@
        render : function(){
            var rows = [];
            this.state.Data.List.forEach(function(item){
                rows.push(<EmployeeGridRow key={item.EmployeeID} item={item}/>);
            });
            return (
                <div>
                    <table className="table table-responsive table-bordered">
                        <thead>
                            <tr>
                                <th onClick={this.sortChanged.bind(this,'FirstName',this.state.Data.sortOrder)}>First Name
                                    <i className={this._sortClass('FirstName')}></i></th>
                                <th onClick={this.sortChanged.bind(this,'LastName',this.state.Data.sortOrder)}>
                                    Last Name
                                    <i className={this._sortClass('LastName')}></i></th>
                                <th onClick={this.sortChanged.bind(this,'EmailID',this.state.Data.sortOrder)}>
                                    Email
                                    <i className={this._sortClass('EmailID')}></i>
                                </th>
                                <th onClick={this.sortChanged.bind(this,'Country',this.state.Data.sortOrder)}>
                                    Country
                                    <i className={this._sortClass('Country')}></i>
                                </th>
                                <th onClick={this.sortChanged.bind(this,'City',this.state.Data.sortOrder)}>
                                    City
                                    <i className={this._sortClass('City')}></i>
                                </th>
                            </tr>
                        </thead>
                        <tbody>{rows}</tbody>
                    </table>
                    <GridPager Size={this.state.Data.totalPage} onPageChanged={this.pageChanged} currentPage={this.state.Data.currentPage}/>
                </div>
            );
        }
    });
    ReactDOM.render(<EmployeeGridTable dataUrl="/home/getEmployeeList"/>, document.getElementById('griddata'));
</script>
<style>
    #griddata th
    {
        cursor: pointer;
    }
    .fa
    {
        float: right;
        margin-top: 4px;
    }
</style>

If you see, here I have created three React components named GridPager (for generating paging links), EmployeeGridTable (for generating the table, where data will be displayed) and EmployeeGridRow (for generating table rows with data item).

Also, I have added functions populateData (for fetching data from the server), pageChanged(paging functionality), sortChanged (for sorting event) and _sortClass (for adding sort icon on table header column).

Step-8: Add reference of System.Linq.Dynamic

Here I have added System.Linq.Dynamic reference from NuGet packages
Go to Solution Explorer > Right click on References > Manage NuGet packages > Search with "System.Linq.Dynamic" > Install.

Step-9: 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 getEmployeeList(string sortColumnName = "FirstName", string sortOrder = "asc", int pageSize=3, int currentPage=1)
{
    List<Employee> List = new List<Employee>();
    int totalPage = 0;
    int totalRecord = 0;
 
    using (MyDatabaseEntities dc = new MyDatabaseEntities())
    {
        var emp = dc.Employees;
        totalRecord = emp.Count();
        if (pageSize > 0)
        {
            totalPage = totalRecord / pageSize + ((totalRecord % pageSize) > 0 ? 1 : 0);
            List = emp.OrderBy(sortColumnName + " " + sortOrder).Skip(pageSize * (currentPage - 1)).Take(pageSize).ToList();
        }
        else
        {
            List = emp.ToList();
        }
    }
 
    return new JsonResult
    {
        //Data = new { List = List, totalPage = totalPage, sortColumnName = sortColumnName, sortOrder = sortOrder, currentPage = currentPage},
        Data = new { List = List, totalPage = totalPage, sortColumnName = sortColumnName, sortOrder = sortOrder, currentPage = currentPage, pageSize = pageSize },
        JsonRequestBehavior = JsonRequestBehavior.AllowGet
    };
}

[Note: you can see the line 24 (yellow marked), I have updated this line on 19th feb 2016. Added a missing parameter pageSize]

Step-10: Run Application.

Updated on : Monday, February 22, 2016 [Note: Here I have updated the code for add search box. You just need to update 2 steps code of this article, step-7 and step-9. Here I have marked updated lines with yellow background.] download

Updated step-7

@{
    ViewBag.Title = "Index";
}
 
<h2>Show tabular data from database in React JS with server-side paging and sorting</h2>
 
@* HTML *@
<div class="container" id="griddata">
    
</div>
 
@* CSS *@
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
@* Jquery *@
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
@* ReactJS 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 *@
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
@* ReactJS component *@
 
<script type="text/babel">
    @* Here we will create React component *@
    @* New : Search box component *@
    var SearchBox = React.createClass({
        handleChange : function(e){
            console.log('search');
            this.props.onSearchChanged(e.target.value);
        },
        render: function(){
            return (
                <div style={{marginBottom:15+'px',float:'right'}} ><input type="text" value={this.props.searchText} placeholder="search" onChange={this.handleChange}/></div>
            )
        }
    });
    @* 1. Paging component *@
    var GridPager = React.createClass({
        render : function(){
            var li = [];
            var pageCount = this.props.Size;
            for(var i = 1; i <=pageCount; i++){
                if(this.props.currentPage == i){
                    li.push(<li key={i} className="active"><a href="#">{i}</a></li>);
                }
                else{
                    li.push(<li key={i} ><a href="#" onClick={this.props.onPageChanged.bind(null,i)}>{i}</a></li>);
                }
            }
            return (<ul className="pagination">{li}</ul>);
        }
    });
   
    
    @* 2. Table row component *@
   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.Country}</td>
                    <td>{this.props.item.City}</td>
                </tr>
            );
        }
    });
    @* 3. Table component *@
    var EmployeeGridTable = React.createClass({
        getInitialState : function(){
            return {
                Data : {
                    List : [],
                    totalPage : 0,
                    sortColumnName : null,
                    sortOrder : null,
                    currentPage : 1,
                    pageSize : 3,
                    searchText:''
                }
            }
        },
        componentDidMount : function(){
            this.populateData();
        },
        @* function for populate data *@
        populateData: function(){
            var params = {
                pageSize : this.state.Data.pageSize,
                currentPage : this.state.Data.currentPage,
                searchText : this.state.Data.searchText
            }
            if(this.state.Data.sortColumnName){
                params.sortColumnName = this.state.Data.sortColumnName;
            }
            if(this.state.Data.sortOrder){
                params.sortOrder = this.state.Data.sortOrder;
            }
 
            $.ajax({
                url : this.props.dataUrl,
                type : 'GET',
                data : params,
                success : function(data){
                    if(this.isMounted()){
                        this.setState({
                            Data : data
                        });
                    }
                }.bind(this),
                error: function(err){
                    alert('Error');
                }.bind(this)
            });
        },
        @* function for pagination *@
        pageChanged:function(pageNumber,e){
            e.preventDefault();
            this.state.Data.currentPage = pageNumber;
            this.populateData();
        },
        @* function for sorting *@
        sortChanged : function(sortColumnName, order , e){
            e.preventDefault();
            this.state.Data.sortColumnName = sortColumnName;
            this.state.Data.currentPage = 1;
            this.state.Data.sortOrder = order.toString().toLowerCase() == 'asc' ? 'desc':'asc';
            this.populateData();
        },
        searchChange : function(value){
            var d = this.state.Data;            
            d.searchText = value;
            this.setState({
                Data : d            
            });
            this.populateData();
        },
        @* function for set sort icon on table header *@
        _sortClass : function(filterName){
            return "fa fa-fw " + ((filterName == this.state.Data.sortColumnName) ? ("fa-sort-" + this.state.Data.sortOrder) : "fa-sort");
        },
        @* render *@
        render : function(){
            var rows = [];
            this.state.Data.List.forEach(function(item){
                rows.push(<EmployeeGridRow key={item.EmployeeID} item={item}/>);
            });
            return (
                <div>
                    <SearchBox onSearchChanged={this.searchChange} searchText={this.state.Data.searchText}/>
                    <table className="table table-responsive table-bordered">
                        <thead>
                            <tr>
                                <th onClick={this.sortChanged.bind(this,'FirstName',this.state.Data.sortOrder)}>First Name
                                    <i className={this._sortClass('FirstName')}></i></th>
                                <th onClick={this.sortChanged.bind(this,'LastName',this.state.Data.sortOrder)}>
                                    Last Name
                                    <i className={this._sortClass('LastName')}></i></th>
                                <th onClick={this.sortChanged.bind(this,'EmailID',this.state.Data.sortOrder)}>
                                    Email
                                    <i className={this._sortClass('EmailID')}></i>
                                </th>
                                <th onClick={this.sortChanged.bind(this,'Country',this.state.Data.sortOrder)}>
                                    Country
                                    <i className={this._sortClass('Country')}></i>
                                </th>
                                <th onClick={this.sortChanged.bind(this,'City',this.state.Data.sortOrder)}>
                                    City
                                    <i className={this._sortClass('City')}></i>
                                </th>
                            </tr>
                        </thead>
                        <tbody>{rows}</tbody>
                    </table>
                    <GridPager Size={this.state.Data.totalPage} onPageChanged={this.pageChanged} currentPage={this.state.Data.currentPage}/>
                </div>
            );
        }
    });
    ReactDOM.render(<EmployeeGridTable dataUrl="/home/getEmployeeList"/>, document.getElementById('griddata'));
</script>

Updated step-9 

public JsonResult getEmployeeList(string sortColumnName = "FirstName", string sortOrder = "asc", int pageSize = 3, int currentPage = 1, string searchText = "")
{
    List<Employee> List = new List<Employee>();
    int totalPage = 0;
    int totalRecord = 0;
 
    using (MyDatabaseEntities dc = new MyDatabaseEntities())
    {
        var emp = dc.Employees.Select(a => a);
        //Search
        if (!string.IsNullOrEmpty(searchText))
        {
            emp = emp.Where(a => a.FirstName.Contains(searchText) || a.LastName.Contains(searchText) || a.EmailID.Contains(searchText) || a.City.Contains(searchText) || a.Country.Contains(searchText));
        }
        totalRecord = emp.Count();
        if (pageSize > 0)
        {
            totalPage = totalRecord / pageSize + ((totalRecord % pageSize) > 0 ? 1 : 0);
            List = emp.OrderBy(sortColumnName + " " + sortOrder).Skip(pageSize * (currentPage - 1)).Take(pageSize).ToList();
        }
        else
        {
            List = emp.ToList();
        }
    }
 
    return new JsonResult
    {
        //Data = new { List = List, totalPage = totalPage, sortColumnName = sortColumnName, sortOrder = sortOrder, currentPage = currentPage},
        Data = new { List = List, totalPage = totalPage, sortColumnName = sortColumnName, sortOrder = sortOrder, currentPage = currentPage, pageSize = pageSize, searchText = searchText },
        JsonRequestBehavior = JsonRequestBehavior.AllowGet
    };
}

LIVE DEMO  DOWNLOAD