ASP.NET Core – CRUD With React.js And Entity Framework Core

Introduction

In this article, we are going to create a web application using ASP.NET Core 2.0 and React.js with the help of Entity Framework Core database first approach. We will be creating a sample Employee Record Management system and perform CRUD operations on it. To read the inputs from the user, we are using HTML Form element with required field validations on the client side. We are also going to bind a dropdown list in the HTML Form to a table in the database using EF Core.

We will be using Visual Studio 2017 and SQL Server 2014.

Prerequisites

• Install .NET Core 2.0.0 or above SDK from here.
• Install the latest version of Visual Studio 2017 Community Edition from here.
• Download and install the latest version of Node.js from here.
• SQL Server 2008 or above.

Source code

Before proceeding, I would recommend you to get the source code from GitHub.

Creating Table

We will be using two tables to store our data.

1. tblEmployee
   Used to store the details of employee. It contains fields such as EmployeeID, Name, City, Department, and Gender.
2. tblCitiesThis contains the list of cities and used to populate the City field of tblEmployee table. It contains two fields CityID and CityName.

Execute the following commands to create both tables.

1. CREATE TABLE tblEmployee (
2. EmployeeID int IDENTITY(1,1) NOT NULL PRIMARY KEY,
3. Name varchar(20) NOT NULL ,
4. City varchar(20) NOT NULL ,
5. Department varchar(20) NOT NULL ,
6. Gender varchar(6) NOT NULL
7. )
8. GO
10. CREATE TABLE tblCities (
11. CityID int IDENTITY(1,1) NOT NULL PRIMARY KEY,
12. CityName varchar(20) NOT NULL
13. )
14. GO

Now, we will put some data into the tblCities table. We will be using this table to bind a dropdown list in our web application from which the desired city can be selected. Use the following insert statements.

1. INSERT INTO tblCities VALUES('New Delhi');
2. INSERT INTO tblCities VALUES('Mumbai');
3. INSERT INTO tblCities VALUES('Hyderabad');
4. INSERT INTO tblCities VALUES('Chennai');
5. INSERT INTO tblCities VALUES('Bengaluru');

Now, our Database part has been completed. So, we will proceed to create the MVC application using Visual Studio 2017.

Create MVC Web Application

Open Visual Studio and select File >> New >> Project. After selecting the project, a “New Project” dialog will open. Select .NET Core inside Visual C# menu from the left panel.

Then, select “ASP.NET Core Web Application” from available project types. Put the name of the project as ReactCrudDemo and press OK. 

After clicking on OK, a new dialog will open asking you to select the project template. You can observe two drop-down menus at the top left of the template window. Select “.NET Core” and “ASP.NET Core 2.0” from these dropdowns. Then, select “React.js” template and press OK.

Now, our project will be created. You can observe the folder structure in Solution Explorer as shown in the below image.

Here, we have our Controllers and Views folders. We won’t be touching the Views folders for this tutorial since we will be using React.js to handle the UI. The Controllers folders will contain our Web API controller. The point of interest for us is the ClientApp folder where the client side of our application resides. Inside the ClientApp/components folder, we already have few components created which are provided by default with the React.js template in VS 2017. These components will not affect our application, but for the sake of this tutorial, we will delete fetchdata.tsx and counter.tsx files from ClientApp/app/components.

Adding the Model to the Application

We are using Entity Framework core database first approach to create our models. Navigate to Tools >> NuGet Package Manager >> Package Manager Console.

We have to install the package for the database provider that we are targeting which is SQL Server in this case. Hence, run the following command: 

1. Install-Package Microsoft.EntityFrameworkCore.SqlServer

Since we are using Entity Framework Tools to create a model from the existing database, we will install the tools package as well. Hence run the following command:

1. Install-Package Microsoft.EntityFrameworkCore.Tools

After you have installed both the packages, we will scaffold our model from the database tables using the following command:

1. Scaffold-DbContext "Your connection string here" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models -Tables tblEmployee, tblCities

Do not forget to put your own connection string (inside ” “). After this command is executed successfully you can observe a Models folder has been created and it contains three class files myTestDBContext.cs, TblCities.cs and TblEmployee.cs. The name of your DB Context class will be the name of your database suffixed with the word Context. Here my database name is myTestDB, hence the context class name is myTestDBContext.

Hence, we have successfully created our Models using EF core database first approach.

Now, we will create one more class file to handle database related operations.

Right click on Models folder and select Add >> Class. Name your class EmployeeDataAccessLayer.cs and click Add button. At this point in time, the Models folder will have the following structure.

 

Open EmployeeDataAccessLayer.cs and put the following code to handle database operations.

1. using Microsoft.EntityFrameworkCore;
2. using System;
3. using System.Collections.Generic;
4. using System.Linq;
5. using System.Threading.Tasks;
7. namespace ReactCrudDemo.Models
8. {
9. public class EmployeeDataAccessLayer
10. {
11. myTestDBContext db = new myTestDBContext();
13. public IEnumerable<TblEmployee> GetAllEmployees()
14. {
15. try
16. {
17. return db.TblEmployee.ToList();
18. }
19. catch
20. {
21. throw;
22. }
23. }
25. //To Add new employee record
26. public int AddEmployee(TblEmployee employee)
27. {
28. try
29. {
30. db.TblEmployee.Add(employee);
31. db.SaveChanges();
32. return 1;
33. }
34. catch
35. {
36. throw;
37. }
38. }
40. //To Update the records of a particluar employee
41. public int UpdateEmployee(TblEmployee employee)
42. {
43. try
44. {
45. db.Entry(employee).State = EntityState.Modified;
46. db.SaveChanges();
48. return 1;
49. }
50. catch
51. {
52. throw;
53. }
54. }
56. //Get the details of a particular employee
57. public TblEmployee GetEmployeeData(int id)
58. {
59. try
60. {
61. TblEmployee employee = db.TblEmployee.Find(id);
62. return employee;
63. }
64. catch
65. {
66. throw;
67. }
68. }
70. //To Delete the record of a particular employee
71. public int DeleteEmployee(int id)
72. {
73. try
74. {
75. TblEmployee emp = db.TblEmployee.Find(id);
76. db.TblEmployee.Remove(emp);
77. db.SaveChanges();
78. return 1;
79. }
80. catch
81. {
82. throw;
83. }
84. }
86. //To Get the list of Cities
87. public List<TblCities> GetCities()
88. {
89. List<TblCities> lstCity = new List<TblCities>();
90. lstCity = (from CityList in db.TblCities select CityList).ToList();
92. return lstCity;
93. }
95. }
96. }

Now, we will proceed to create our Web API Controller.

Adding the Web API Controller to the Application

Right click on Controllers folder and select Add >> New Item.

An “Add New Item” dialog box will open. Select ASP.NET from the left panel, then select “API Controller Class” from templates panel and put the name as EmployeeController.cs. Press OK.

This will create our Web API EmployeeController class. We will put all our business logic in this controller. We will call the methods of EmployeeDataAccessLayer to fetch data and pass on the data to the frontend.

Open EmployeeController.cs file and put the following code into it.

1. using System;
2. using System.Collections.Generic;
3. using System.Linq;
4. using System.Threading.Tasks;
5. using Microsoft.AspNetCore.Mvc;
6. using ReactCrudDemo.Models;
8. namespace ReactCrudDemo.Controllers
9. {
10. public class EmployeeController : Controller
11. {
12. EmployeeDataAccessLayer objemployee = new EmployeeDataAccessLayer();
14. [HttpGet]
15. [Route("api/Employee/Index")]
16. public IEnumerable<TblEmployee> Index()
17. {
18. return objemployee.GetAllEmployees();
19. }
21. [HttpPost]
22. [Route("api/Employee/Create")]
23. public int Create(TblEmployee employee)
24. {
25. return objemployee.AddEmployee(employee);
26. }
28. [HttpGet]
29. [Route("api/Employee/Details/{id}")]
30. public TblEmployee Details(int id)
31. {
32. return objemployee.GetEmployeeData(id);
33. }
35. [HttpPut]
36. [Route("api/Employee/Edit")]
37. public int Edit(TblEmployee employee)
38. {
39. return objemployee.UpdateEmployee(employee);
40. }
42. [HttpDelete]
43. [Route("api/Employee/Delete/{id}")]
44. public int Delete(int id)
45. {
46. return objemployee.DeleteEmployee(id);
47. }
49. [HttpGet]
50. [Route("api/Employee/GetCityList")]
51. public IEnumerable<TblCities> Details()
52. {
53. return objemployee.GetCities();
54. }
55. }
56. }

We are done with our backend logic. Therefore, we will now proceed to code our frontend using React.js.

Creating React.js Components

We will be adding two React components to our application –

1. FetchEmployee component – to display all the employee data and delete an existing employee data.
2. AddEmployee component – to add a new employee data and edit an existing employee data.

Right click on ClientApp/components folder and select Add >> New Item. An “Add New Item” dialog box will open. Select Scripts from the left panel, then select “TypeScript JSX File” from templates panel, and put the name as AddEmployee.tsx. Press OK. This will add a JSX file inside components folder. JSX stand for JavaScript XML. JSX is a preprocessor step that adds XML syntax to JavaScript.

 

 

Similarly, add FetchEmployee.tsx file insideClientApp/components folder.

Now, our ClientApp folder will have following structure.

FetchEmployee Component 

Open FetchEmployee.tsx file and put the following code to it.

1. import * as React from 'react';
2. import { RouteComponentProps } from 'react-router';
3. import { Link, NavLink } from 'react-router-dom';
5. interface FetchEmployeeDataState {
6. empList: EmployeeData[];
7. loading: boolean;
8. }
10. export class FetchEmployee extends React.Component<RouteComponentProps<{}>, FetchEmployeeDataState> {
11. constructor() {
12. super();
13. this.state = { empList: [], loading: true };
15. fetch('api/Employee/Index')
16. .then(response => response.json() as Promise<EmployeeData[]>)
17. .then(data => {
18. this.setState({ empList: data, loading: false });
19. });
21. // This binding is necessary to make "this" work in the callback
22. this.handleDelete = this.handleDelete.bind(this);
23. this.handleEdit = this.handleEdit.bind(this);
25. }
27. public render() {
28. let contents = this.state.loading
29. ? <p><em>Loading...</em></p>
30. : this.renderEmployeeTable(this.state.empList);
32. return <div>
33. <h1>Employee Data</h1>
34. <p>This component demonstrates fetching Employee data from the server.</p>
35. <p>
36. <Link to="/addemployee">Create New</Link>
37. </p>
38. {contents}
39. </div>;
40. }
42. // Handle Delete request for an employee
43. private handleDelete(id: number) {
44. if (!confirm("Do you want to delete employee with Id: " + id))
45. return;
46. else {
47. fetch('api/Employee/Delete/' + id, {
48. method: 'delete'
49. }).then(data => {
50. this.setState(
51. {
52. empList: this.state.empList.filter((rec) => {
53. return (rec.employeeId != id);
54. })
55. });
56. });
57. }
58. }
60. private handleEdit(id: number) {
61. this.props.history.push("/employee/edit/" + id);
62. }
64. // Returns the HTML table to the render() method.
65. private renderEmployeeTable(empList: EmployeeData[]) {
66. return <table className='table'>
67. <thead>
68. <tr>
69. <th></th>
70. <th>EmployeeId</th>
71. <th>Name</th>
72. <th>Gender</th>
73. <th>Department</th>
74. <th>City</th>
75. </tr>
76. </thead>
77. <tbody>
78. {empList.map(emp =>
79. <tr key={emp.employeeId}>
80. <td></td>
81. <td>{emp.employeeId}</td>
82. <td>{emp.name}</td>
83. <td>{emp.gender}</td>
84. <td>{emp.department}</td>
85. <td>{emp.city}</td>
86. <td>
87. <a className="action" onClick={(id) => this.handleEdit(emp.employeeId)}>Edit</a> |
88. <a className="action" onClick={(id) => this.handleDelete(emp.employeeId)}>Delete</a>
89. </td>
90. </tr>
91. )}
92. </tbody>
93. </table>;
94. }
95. }
97. export class EmployeeData {
98. employeeId: number = 0;
99. name: string = "";
100. gender: string = "";
101. city: string = "";
102. department: string = "";
103. }

Let’s understand this code. At the top we have defined an interface “FetchEmployeeDataState” which has two properties –

1. empList of type “EmployeeData” class to hold the employee data.
2. loading of type “boolean” to indicate if the data is being loaded onto the page.

After this, we have defined a component class “FetchEmployee” which inherits the abstract class React.Component. Inside the constructor of this class, we are calling the base class constructor using Super() and then initializing the fields of the interface to their default values.

We are also calling our web API method using fetch and set the empList value and also set the loading to false. The fetch method is invoked inside the constructor so that the employee data will be displayed as the page loads.

At the end of constructor, we are binding handleDelete and handleEdit method. This binding is necessary to make “this” work in the callback.

Then we have our “render()” method which will render our HTML elements onto the DOM. We will check if the data has finished loading or not and then call renderEmployeeTable method which will return an HTML table to display all the employee data on the web page. Every row of the table also had two action method – Edit and Delete for editing and deleting the employee record.

Next, we have handleDelete method which accepts employeeID as a parameter. This will prompt the user with a confirmation box and if the user selects yes then it will delete the employee with this employeeID.

The handleEdit method will invoke an edit request on the employee record by passing the employee id in the URL parameter and redirects to AddEmployee component.

At the end, we have defined an EmployeeData class having the same properties as of our TblEmployee Model class to hold the employee data. 

AddEmployee Component 

Open AddEmployee.tsx file and put the following code into it:

 

1. import * as React from 'react';
2. import { RouteComponentProps } from 'react-router';
3. import { Link, NavLink } from 'react-router-dom';
4. import { EmployeeData } from './FetchEmployee';
6. interface AddEmployeeDataState {
7. title: string;
8. loading: boolean;
9. cityList: Array<any>;
10. empData: EmployeeData;
11. }
13. export class AddEmployee extends React.Component<RouteComponentProps<{}>, AddEmployeeDataState> {
14. constructor(props) {
15. super(props);
17. this.state = { title: "", loading: true, cityList: [], empData: new EmployeeData };
19. fetch('api/Employee/GetCityList')
20. .then(response => response.json() as Promise<Array<any>>)
21. .then(data => {
22. this.setState({ cityList: data });
23. });
25. var empid = this.props.match.params["empid"];
27. // This will set state for Edit employee
28. if (empid > 0) {
29. fetch('api/Employee/Details/' + empid)
30. .then(response => response.json() as Promise<EmployeeData>)
31. .then(data => {
32. this.setState({ title: "Edit", loading: false, empData: data });
33. });
34. }
36. // This will set state for Add employee
37. else {
38. this.state = { title: "Create", loading: false, cityList: [], empData: new EmployeeData };
39. }
41. // This binding is necessary to make "this" work in the callback
42. this.handleSave = this.handleSave.bind(this);
43. this.handleCancel = this.handleCancel.bind(this);
44. }
46. public render() {
47. let contents = this.state.loading
48. ? <p><em>Loading...</em></p>
49. : this.renderCreateForm(this.state.cityList);
51. return <div>
52. <h1>{this.state.title}</h1>
53. <h3>Employee</h3>
54. <hr />
55. {contents}
56. </div>;
57. }
59. // This will handle the submit form event.
60. private handleSave(event) {
61. event.preventDefault();
62. const data = new FormData(event.target);
64. // PUT request for Edit employee.
65. if (this.state.empData.employeeId) {
66. fetch('api/Employee/Edit', {
67. method: 'PUT',
68. body: data,
70. }).then((response) => response.json())
71. .then((responseJson) => {
72. this.props.history.push("/fetchemployee");
73. })
74. }
76. // POST request for Add employee.
77. else {
78. fetch('api/Employee/Create', {
79. method: 'POST',
80. body: data,
82. }).then((response) => response.json())
83. .then((responseJson) => {
84. this.props.history.push("/fetchemployee");
85. })
86. }
87. }
89. // This will handle Cancel button click event.
90. private handleCancel(e) {
91. e.preventDefault();
92. this.props.history.push("/fetchemployee");
93. }
95. // Returns the HTML Form to the render() method.
96. private renderCreateForm(cityList: Array<any>) {
97. return (
98. <form onSubmit={this.handleSave} >
99. <div className="form-group row" >
100. <input type="hidden" name="employeeId" value={this.state.empData.employeeId} />
101. </div>
102. < div className="form-group row" >
103. <label className=" control-label col-md-12" htmlFor="Name">Name</label>
104. <div className="col-md-4">
105. <input className="form-control" type="text" name="name" defaultValue={this.state.empData.name} required />
106. </div>
107. </div >
108. <div className="form-group row">
109. <label className="control-label col-md-12" htmlFor="Gender">Gender</label>
110. <div className="col-md-4">
111. <select className="form-control" data-val="true" name="gender" defaultValue={this.state.empData.gender} required>
112. <option value="">-- Select Gender --</option>
113. <option value="Male">Male</option>
114. <option value="Female">Female</option>
115. </select>
116. </div>
117. </div >
118. <div className="form-group row">
119. <label className="control-label col-md-12" htmlFor="Department" >Department</label>
120. <div className="col-md-4">
121. <input className="form-control" type="text" name="Department" defaultValue={this.state.empData.department} required />
122. </div>
123. </div>
124. <div className="form-group row">
125. <label className="control-label col-md-12" htmlFor="City">City</label>
126. <div className="col-md-4">
127. <select className="form-control" data-val="true" name="City" defaultValue={this.state.empData.city} required>
128. <option value="">-- Select City --</option>
129. {cityList.map(city =>
130. <option key={city.cityId} value={city.cityName}>{city.cityName}</option>
131. )}
132. </select>
133. </div>
134. </div >
135. <div className="form-group">
136. <button type="submit" className="btn btn-default">Save</button>
137. <button className="btn" onClick={this.handleCancel}>Cancel</button>
138. </div >
139. </form >
140. )
141. }
142. }

This component will be used for both adding and editing the employee data. Since we will use EmployeeData class to hold the data, we have imported it from FetchEmployee component.

The interface AddEmployeeDataState has four properties.

1. title – to show “Create” or “Edit” on the top of the page
2. loading – to check if the page has finished loading data
3. cityList – to hold the list of cities from tblCities table
4. empData – to hold the employee data to bind it to the HTML form

Inside the constructor of component class “AddEmployee” we are initializing the fields of the interface to their default value and then setting the value of CityList property by fetching the data from tblCitiestable. We will use this to bind a dropdown in our HTML form. Since we are fetching the city list inside our constructor, the dropdown list will be populated as the page loads.

This component will handle both Add and Edit request. So how will the system differentiate between both requests? The answer is routing. We need to define two different route parameters, one for Add employee record and another to edit employee record. We will be defining these in routes.tsx file shortly.

If an edit request is made then the employee id will be passed in the parameter. Inside the constructor, we will read the value of URL parameter empid. If the value of empid is greater than zero then this is an edit request and we will set the value of title to “Edit”, fill the data in empData property and set loading to false.

If the empid value is not set then it is an add request and we will set the value of title to “Create” and set loading to false.

The handleSave method will handle the save event on the form. Based on whether the URL has empid parameter or not we will send a request for PUT or POST and upon success, redirect the user back to FectchEmployee component.

The renderCreateForm method will return an HTML form to be displayed on the webpage. We have set the default value in all the fields of the Form. If an Add request is made then all the fields will empty. If an edit request is made then it will fill the data of the corresponding employee in the fields. We bind the select element using cityList property that we have populated in our constructor.

At this point in time, you might get an error “Parameter ‘props’ implicitly has an ‘any’ type” in AddEmployee.tsx file.

If you encounter this issue, then add the following line inside tsconfig.json file.

“noImplicitAny”: false

Defining route and navigation menu for our Application

Open ClientApp/routes.tsx file and put the following code in to it.

1. import * as React from 'react';
2. import { Route } from 'react-router-dom';
3. import { Layout } from './components/Layout';
4. import { Home } from './components/Home';
5. import { FetchEmployee } from './components/FetchEmployee';
6. import { AddEmployee } from './components/AddEmployee';
8. export const routes = <Layout>
9. <Route exact path='/' component={Home} />
10. <Route path='/fetchemployee' component={FetchEmployee} />
11. <Route path='/addemployee' component={AddEmployee} />
12. <Route path='/employee/edit/:empid' component={AddEmployee} />
13. </Layout>;

In this file, we have defined the routes for our application as below.

• / – if base URL is hit then it will redirect to Home component
• /fetchemployee – It will redirect to FetchEmployee component
• /addemployee – it will redirect to AddEmployee component to add a new employee record
• /employee/edit/:empid – we are passing the employee id in the parameter. it will redirect to AddEmployee component to edit the exisiting employee data 

The last thing remaining is to define navigation menu for our application. Open ClientApp/components/NavMenu.tsx file and put the following code to it.

1. import * as React from 'react';
2. import { Link, NavLink } from 'react-router-dom';
4. export class NavMenu extends React.Component<{}, {}> {
5. public render() {
6. return <div className='main-nav'>
7. <div className='navbar navbar-inverse'>
8. <div className='navbar-header'>
9. <button type='button' className='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
10. <span className='sr-only'>Toggle navigation</span>
11. <span className='icon-bar'></span>
12. <span className='icon-bar'></span>
13. <span className='icon-bar'></span>
14. </button>
15. <Link className='navbar-brand' to={'/'}>ReactCrudDemo</Link>
16. </div>
17. <div className='clearfix'></div>
18. <div className='navbar-collapse collapse'>
19. <ul className='nav navbar-nav'>
20. <li>
21. <NavLink to={'/'} exact activeClassName='active'>
22. <span className='glyphicon glyphicon-home'></span> Home
23. </NavLink>
24. </li>
25. <li>
26. <NavLink to={'/fetchemployee'} activeClassName='active'>
27. <span className='glyphicon glyphicon-th-list'></span> Fetch employee
28. </NavLink>
29. </li>
30. </ul>
31. </div>
32. </div>
33. </div>;
34. }
35. }

And that’s it. We have created our ASP.NET Core application using React.js and Entity Framework core database first approach.

Execution Demo

Press F5 to launch the application.

A web page will open as shown in the image below. Notice the navigation menu on the left showing navigation link for Home and Fetch Employee pages.

Click on Fetch Employee in the navigation menu. It will redirect to FetchEmployee component and displays all the employee data on the page. Notice the URL has “/fetchemployee” appended to it as we have defined in our routes.tsx file.

Since we have not added any data, hence it is empty.

Click on CreateNew to navigate to /addemployee page. Add a new Employee record as shown in the image below. You can observe that the City field is a dropdown list, containing all the city names that we have inserted into tblCities table.

After inserting the data in all the fields, click on “Save” button. The new employee record will be created and you will be redirected to the /fetchemployee page, displaying records of all the employees. Here, we can also see action methods Edit and Delete.

If we want to edit an existing employee record, then click Edit action link. It will open Edit page as shown below where we can change the employee data. Notice that we have passed employee id in the URL parameter.

Here, we have changed the City of employee Neha from Bengaluru to Mumbai. Click on “Save” to return to the fetch-employee page to see the updated changes as highlighted in the image below.

Now, we will perform Delete operation on an employee named Rajesh having Employee ID 2. Click on Delete action link. It will open a JavaScript confirmation box asking for a confirmation to delete.

Once we click on “OK” the employee with name Rajesh will be removed from our record and you can see the updated list of the employee as shown below.

Conclusion

We have successfully created an ASP.NET Core application using React.js and Entity Framework core database first approach with the help of Visual Studio 2017 and SQL Server 2014. We have used HTML forms to get data from the user and bind the dropdown list to the database table using Entity framework.

Fork this application on GitHub and let me know your valuable feedback in the comments section below.