Create editable grid using ReactJs with mvc .net - part 2

 In the previous part, we created the grid with dynamic data and in this part, we will make the grid editable. We will add a save button to save the changes. We will be able to edit the grid using Reactjs and MVC.net with c#.

Note: If you didn't go through part 1 and then please go through that first because in part1 we created the grid using live data. Editable Grid using ReactJs with MVC .net - part 1

14. open power shell command from react folder and run the below commands to install the react-bootstrap-table2-editor

 npm install react-bootstrap-table2-editor --save  

15. Now make the following changes in employeeList.js file.

 import React, { Component } from 'react';  
 import BootstrapTable from 'react-bootstrap-table-next';  
 import cellEditFactory from 'react-bootstrap-table2-editor';  
 const columns = [  
   {  
     dataField: 'Name',  
     text: 'Name',  
     editable: true  
   }, {  
     dataField: 'Address',  
     text: 'Address',  
     editable: true  
   }, {  
     dataField: 'Age',  
     text: 'Age',  
     editable: true  
   }];  
 class EmployeeList extends Component {  
   constructor(props) {  
     super(props);  
     this.recordsToBeSaved = [];  
     this.state = { appMasterList: [] };  
   }  
   loadDataFromServer() {  
     fetch('/api/Employee/').then(res => res.json()).then(  
       (result) => {  
         window.results = result;  
         this.setState({  
           isLoaded: true,  
           items: result  
         });  
       },  
       (error) => {  
         this.setState({  
           isLoaded: true,  
           error  
         });  
       }  
     );  
   }  
   loadData = () => {  
     this.loadDataFromServer();  
   }  
   saveData = () => {  
     const requestOptions = {  
       method: 'post',  
       headers: {  
         'Content-Type': 'application/json'  
       },  
       body: JSON.stringify(this.recordsToBeSaved)  
     };  
     fetch('api/Employee', requestOptions).then(  
       (result) => {  
         this.recordsToBeSaved = [];  
         alert("saved successfully");  
       },  
       (error) => {  
         alert("error occured!");  
       }  
     );  
   }  
   afterSaveCell = (oldValue, newValue, row, column) => {  
     if (!oldValue && !newValue) return;  
     if (oldValue != newValue) {  
       row.rowChanged = true;  
       this.recordsToBeSaved.push(row);  
     }  
   }  
   render() {  
     const { error, isLoaded, items } = this.state;  
     if (error) {  
       return <div>Error: {error.message}</div>;  
     } else if (!isLoaded) {  
       return <button className="btn btn-primary" onClick={this.loadData}>Load Data</button>;  
     } else {  
       return (  
         <div>  
           <button className="btn btn-primary" onClick={this.loadData}>Refresh</button>  
           <button className="btn btn-primary" onClick={this.saveData}>Save</button>  
           <BootstrapTable keyField='Name' data={items} columns={columns} cellEdit={cellEditFactory({ mode: 'click', blurToSave: true, afterSaveCell: this.afterSaveCell })} />  
         </div>  
       );  
     }  
   }  
 }  
 export default EmployeeList;       

16. Now make the following changes in package.json file.

 {  
  "name": "ReactWithMvc",  
  "description": "Edtitable grid using React",  
  "main": "index.js",  
  "scripts": {  
   "webpack": "webpack"  
  },  
  "author": "CodingDekho",  
  "license": "MIT",  
  "devDependencies": {  
   "@babel/core": "^7.12.9",  
   "@babel/plugin-proposal-class-properties": "^7.10.4",  
   "@babel/polyfill": "^7.12.1",  
   "@babel/preset-env": "^7.12.7",  
   "@babel/preset-react": "^7.12.7",  
   "babel-loader": "^8.2.2",  
   "react": "^16.14.0",  
   "react-dom": "^16.14.0",  
   "webpack": "^4.44.2",  
   "webpack-cli": "^3.3.12"  
  },  
  "dependencies": {  
   "react-bootstrap-table-next": "^4.0.3",  
   "react-bootstrap-table2-editor": "^1.4.0",  
   "react-bootstrap-table2-filter": "^1.3.3",  
   "react-bootstrap-table2-toolkit": "^2.1.3"  
  }  
 }  

17. Now make the following changes in EmployeeController.cs file.

 using ReactWithMvc.Repository;  
 using System;  
 using System.Collections.Generic;  
 using System.Linq;  
 using System.Net;  
 using System.Net.Http;  
 using System.Web.Http;  
 namespace ReactWithMvc.Controllers  
 {  
   public class EmployeeController : ApiController  
   {  
     // GET: api/Employee  
     public IEnumerable<Employee> Get()  
     {  
       return new TestDbEntities().Employees.ToList();  
     }  
     public bool Post(List<Employee> data)  
     {  
       try  
       {   
         using (var context = new TestDbEntities())  
         {  
           foreach (var item in data)  
           {  
             var result = context.Employees.Where(x => x.Name == item.Name).FirstOrDefault();  
             if (result != null)  
             {  
               result.Address = item.Address;  
               result.Age = item.Age;  
             }  
           }  
           context.SaveChanges();  
         }  
         return true;  
       }  
       catch  
       {  
         return false;  
       }  
     }  
   }  
 }  

17. Now in the command prompt run the below command for web pack 

 npm run webpack  

with this command, the js code will be complied and will generate a bundle file under dist folder..

18.  Now run the project and click on the Load Data button and observe the data loaded in the grid and if you click on Address or Age fields then the cell will become editable as shown below.

19. Now click on the Save button in order to save these changes.