React js with Asp.net Web API – CRUD Operations part1

n this article, we’ll create a CRUD application using React js with Web API. CRUD Operations Insert Update and Delete will be implemented inside an Asp.net Web API Using Entity Framework and then consumed from an Angular 5 Application.

Following tools and modules are used for this project :

– react CLI
– react js
– ngx-Toastr (npm package)
– Bootstrap and Font-Awesome Icons
– VS Code & Visual Studio Editor

we assume that you have installed required packages and software for angular 5 application development.
Download project source code from GitHub : react js With Web API – CRUD Operations.

Create SQL Server DB

First of all, let’s create a database to work with. I use Management Studio to create and manage SQL database.

Created a Database with name ‘WebAPIDB’, In this application we’ll deals with details of employees. so an employee table is created using following SQL Script.

Transact-SQL

1 2 3 4 5 6 7

CREATE TABLE [dbo].[Employee]( [EmployeeID] [int] IDENTITY(1,1) NOT NULL primary key, [FirstName] [varchar](50) NULL, [LastName] [varchar](50) NULL, [EmpCode] [varchar](50) NULL, [Position] [varchar](50) NULL, [Office] [varchar](50) NULL)

Here EmployeeID column is the Primary Key and IDENTITY column for the table. Because of IDENTITY specification, we don’t insert values into EmployeeID column. SQL Server will take care of that. It will start from 1 and incremented by 1 upon new record insertion.

Create Web API Application

Database is ready, Now let’s create an Asp.Net Web API project.

Open Visual Studio, Go to File > New > Project (Ctrl + Shift +N).

then select Web API template.

So here we have created a brand new Web API Project. Now let’s add Entity Model for the DB ‘WEPAPIDB’ inside Models Folder.

Right Click on Models Folder > Add > New Item.

Name your Entity Model as DBModels.edmx.

Select Generate From database.

In Data Connection Window, Click On New Connection.

Provide SQL Server Instance Details and Select the DB.

As per previous window, we’ll save DB Connection string in WebConfig as DBModel. After creating this Entity Model there will be a class with this name (DBModel), we’ll create an object of this class in-order to interact with database.

After previous window, you may see an extra window as follows, if you have multiple Entity Framework Versions, then select one of them.

then select tables that we want to add inside the Entity Model.

Click on Finish. Diagrammatic Representation of EF Model looks like this.

Inside this DBModels.edmx, you can see a DBModels.Context.cs file for DBModel Class. we’ll create an object of this class to work with database.

DBModels.tt > Employee.cs contains Employee Class, which contains properties corresponding to SQL Table Columns, So this is our Model Class.

Now let’s add Employee Controller, before that don’t forget to Re-build your solution. To create a Controller, right click on controllers folder then click on Add > Controller…, Then select Web API 2 Controller with actions, Using Entity Framework Scaffolding Mechanism.then following window will be shown.

It will create Web API Controller Employee using Employee Class from Entity Model. Created controller contains web methods GET,POST,PUT and DELETE for CRUD operations READ INSERT UPDATE AND DELETE respectively. These default web methods contains model validations, we don’t do model validation in this Web API project, Form validation can be done inside angular 5 application, Employee controller without validation looks like this

EmployeeController.cs

C#

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

public class EmployeeController : ApiController {     private DBModel db = new DBModel();     // GET api/Employee     public IQueryable<Employee> GetEmployees()     {         return db.Employees;     }     // PUT api/Employee/5     public IHttpActionResult PutEmployee(int id, Employee employee)     {         db.Entry(employee).State = EntityState.Modified;         try         {             db.SaveChanges();         }         catch (DbUpdateConcurrencyException)         {             if (!EmployeeExists(id))             {                 return NotFound();             }             else             {                 throw;             }         }         return StatusCode(HttpStatusCode.NoContent);     }     // POST api/Employee     [ResponseType(typeof(Employee))]     public IHttpActionResult PostEmployee(Employee employee)     {         db.Employees.Add(employee);         db.SaveChanges();         return CreatedAtRoute("DefaultApi", new { id = employee.EmployeeI     }     // DELETE api/Employee/5     [ResponseType(typeof(Employee))]     public IHttpActionResult DeleteEmployee(int id)     {         Employee employee = db.Employees.Find(id);         if (employee == null)         {             return NotFound();         }         db.Employees.Remove(employee);         db.SaveChanges();         return Ok(employee);     }     protected override void Dispose(bool disposing)     {         if (disposing)         {             db.Dispose();         }         base.Dispose(disposing);     }     private bool EmployeeExists(int id)     {         return db.Employees.Count(e => e.EmployeeID == id) > 0;     } }

All these Web API methods are written using DB First Approach in Entity Framework. 

  make changes as follows

EmployeeController.cs

C#

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

namespace reactcrud.Controllers { public class EmployeesController : ApiController {     private DBModel db = new DBModel(); // GET: api/Employees [HttpGet] [Route("api/Employees/getemployee")] public IHttpActionResult GetEmployees() { var result = db.Employees.ToList(); return Json(result); } // GET: api/Employees/5 [HttpGet] [Route("api/Employees/getemployid")] [ResponseType(typeof(Employee))] public IHttpActionResult GetEmployee(int id) { Employee employee = db.Employees.Find(id); if (employee == null) { return NotFound(); } return Ok(employee); } // PUT: api/Employees/5 [ResponseType(typeof(void))] [HttpGet] [Route("api/Employees/PutEmployee")] [ResponseType(typeof(Employee))] public IHttpActionResult PutEmployee(int id, Employee employee) { if (!ModelState.IsValid) { return BadRequest(ModelState); } if (id != employee.EmployeeID) { return BadRequest(); } db.Entry(employee).State = EntityState.Modified; try { db.SaveChanges(); } catch (DbUpdateConcurrencyException) { if (!EmployeeExists(id)) { return NotFound(); } else { throw; } } return StatusCode(HttpStatusCode.NoContent); } // POST: api/Employees [HttpPost] [Route("api/Employees/PostEmployee")] [ResponseType(typeof(Employee))] public IHttpActionResult PostEmployee(Employee employee) { if (!ModelState.IsValid) { return BadRequest(ModelState); } db.Employees.Add(employee); db.SaveChanges(); return CreatedAtRoute("DefaultApi", new { id = employee.EmployeeID }, employee); } // DELETE: api/Employees/5 [ResponseType(typeof(Employee))] [HttpGet] [Route("api/Employees/DeleteEmployee")] public IHttpActionResult DeleteEmployee(int id) { Employee employee = db.Employees.Find(id); if (employee == null) { return NotFound(); } db.Employees.Remove(employee); db.SaveChanges(); return Ok(employee); } protected override void Dispose(bool disposing) { if (disposing) { db.Dispose(); } base.Dispose(disposing); } private bool EmployeeExists(int id) { return db.Employees.Count(e => e.EmployeeID == id) > 0; } } }

Now let’s check working of this Web API project, first of all let me add a test employee record inside Employee table.

Transact-SQL

1	INSERT Employee ( [FirstName], [LastName], [EmpCode], [Position], [Office]) VALUES ('Angelica', 'Ramos', 'AR', 'Angular Developer', 'Texas')

Now let’s run our Web API project. then navigate /api/Employee URL. It will call GetEmployees Method to retrieve employee collection from SQL server table Employee.

Here base URL is localhost:28750, we need this base URL to consume this Web API from Angular 5 Application. Thereby our Web API Project is working fine, finally let me truncate the test record from employee table.

Transact-SQL

1	truncate table Employee

Reactjs with Asp.net Web API – CRUD Operations part2

Reactjs with Asp.net Web API – CRUD Operations part3