React.js crud operations using mvc core web api

CRUD OPERATIONS IN REACT JS USING MVC CORE WEB API+SQL SERVER

1) download and install node.js in your computer

2) then open command prompt by pressing win+r afer that type npm i -g react and press enter

3) open visual studio

step 1: click on create new project

step 2: then click on ASP.NET Core Web Application and Click next button

step 3:then give a name to project and click on create button

step 4:then select react js and click on create button

now project is created shown below

step 6: create sql database and table

so, open sql server management studio and create data base and table

step 7 : Now go to visual studio

Step 8: right click on project and then click on manage nuget packages

then install ..... 1) Microsoft.EntityFrameworkCore.SqlServer

2)Microsoft.EntityFrameworkCore.Tools

After you have installed both the packages, we will scaffold our model from the database tables using the following command shown in step 9.

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

Scaffold-DbContext "Data Source=DESKTOP-L3Q3AHO\SQLEXPRESS01;Initial Catalog=Employee;Integrated Security=True" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models

automatically when scaffold we have successfully created our Models using EF core database first approach.

Now,the Models folder will have the following structure.

Employeetbl.cs:

EmployeeContext.cs

Step 9:

Goto appsettings.json and add connection inside it,shown below.

{

"Logging": {

"LogLevel": {

"Default": "Information",

"Microsoft": "Warning",

"Microsoft.Hosting.Lifetime": "Information"

}

"connectionstrings": {

"sqlconnection": "Data Source=RAJESH\\SQLEXPRESS01;Initial Catalog=Employee;Integrated Security=True;"

"AllowedHosts": "*"

}

Step 10:

Goto startup.cs and appsettings.json connectionstring inside it shown below.

services.AddDbContext<EmployeeContext>(options => options.UseSqlServer(Configuration.GetConnectionString("sqlconnection")));

Step 11: api controller

right click on controllers folder and add api controller and give a name to it with extention Controller

open it and add create action methods inside it.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNetCore.Mvc;

using Microsoft.EntityFrameworkCore;

using Reactproject.Models;

namespace Reactproject.Controllers

{

[ApiController]

[Route("api/[controller]")]

//Employee Controller

public class EmployeesController : ControllerBase

{

private readonly EmployeeContext _context;

public EmployeesController(EmployeeContext context)

{

_context = context;

}

// get all employee data from data base

[Route("GetAllEmployees")]

[HttpGet]

public async Task<ActionResult<IEnumerable<Employeestbl>>> GetEmployees()

{

return await _context.Employeestbls.ToListAsync();

//var Name = "Rajesh";

//var product = _context.Employeestbls

// .FromSqlRaw("EXECUTE dbo.GetEmployee {0}", Name)

// .ToList();

//return product;

}

//get employee by id

[Route("GetEmployeebyid/{id}")]

[HttpGet]

public async Task<ActionResult<Employeestbl>> GetEmployee(int id)

{

var employeestbl = await _context.Employeestbls.FindAsync(id);

if (employeestbl == null)

{

return NotFound();

}

return employeestbl;

}

// update employee using id

[Route("UpdateEmployee/{id}")]

[HttpPut]

public object PutEmployeestbl(int id, Employeestbl employeestbl)

{

if (id != employeestbl.Id)

{

return BadRequest();

}

_context.Entry(employeestbl).State = EntityState.Modified;

try

{

_context.SaveChangesAsync();

}

catch (DbUpdateConcurrencyException)

{

if (!EmployeestblExists(id))

{

return NotFound();

}

else

{

throw;

}

Responce obj = new Responce()

{

Status = "Success",

Message = "Updated Successfully"

};

return obj;

}

//add new employee to db table

[HttpPost]

[Route("PostEmployee")]

public object PostEmployee(Employeestbl employeestbl)

{

_context.Employeestbls.Add(employeestbl);

_context.SaveChangesAsync();

return new Responce

{

Status = "Success",

Message = "Data Successfully"

};

}

//delete employee based on id

[Route("DeleteEmployee/{id}")]

[HttpDelete]

public object DeleteEmployeestbl(int id)

{

var obj = _context.Employeestbls.Where(x => x.Id == id).ToList().FirstOrDefault();

if (obj == null)

{

return NotFound();

}

_context.Employeestbls.Remove(obj);

_context.SaveChanges();

return new Responce

{

Status = "Success",

Message = "Data Successfully"

};

}

private bool EmployeestblExists(int id)

{

return _context.Employeestbls.Any(e => e.Id == id);

}

step 12:

Open clientApp folder and add create Folders inside components folder

1)Employee

2)Services

and create http-common.js file and below code in it for base url of application

step 13: create employeeservices.js file inside Services folder

employeeservices.js :

import http from '../http-common'

class employeeservice {

getAll() {

debugger;

return http.get("/GetAllEmployees");

}

get(id) {

debugger;

return http.get(`/GetEmployeebyid/${id}`);

}

create(data) {

debugger;

return http.post("/PostEmployee", data);

}

update(id, data) {

debugger;

return http.put(`/UpdateEmployee/${id}`, data);

}

delete(id) {

debugger;

return http.delete(`/DeleteEmployee/${id}`);

}

deleteAll() {

return http.delete(`/Employees`);

}

export default new employeeservice();

step 14: open employee folder and create below .js files

addemployee.js:

import React from 'react';

import employeeservice from '../Services/employeeservice'

import { Container, Col, Form, FormGroup, Label, Input, Button } from 'reactstrap';

//email validation

const validEmailRegex = RegExp(/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i);

const validateForm = errors => {

let valid = true;

Object.values(errors).forEach(val => val.length > 0 && (valid = false));

return valid;

};

class addemployee extends React.Component {

constructor(props) {

super(props)

this.state = {

id: '',

mobilenumber: '',

email: '',

errors: {

nameError: '',

mobilenumberError: '',

emailError: ''

}

//validations

handleChange = (event) => {

debugger;

event.preventDefault();

this.setState({ [event.target.name]: event.target.value });

const { name, value } = event.target;

let errors = this.state.errors;

switch (name) {

case 'name':

errors.nameError =

value.length ==""

? ' Please enter name!'

: '';

break;

case 'email':

errors.emailError =

validEmailRegex.test(value)

? ''

: 'Email is not valid!';

break;

case 'mobilenumber':

errors.mobilenumberError =

value.length != 10

? 'Please enter 10 digit mobilenumber !'

: '';

break;

default:

}

this.setState({ errors, [name]: value });

}

//submit new employee

Addemployee = (event) => {

debugger;

event.preventDefault();

if (validateForm(this.state.errors)) {

console.info('Valid Form')

debugger;

employeeservice.create({

email: this.state.email

}).then(json => {

if (json.data.status === 'Success') {

console.log(json.data.status);

alert("Data Save Successfully");

this.props.history.push('/listemployees')

}

else {

alert('Data not Saved');

debugger;

this.props.history.push('/listemployees')

}

})

}

else {

debugger;

console.log("invalid");

}

render() {

//disabled submit button when fields empty

const { name, mobilenumber, email } = this.state;

const isEnabled = name.length > 0 && mobilenumber.length > 0 && email.length > 0;

//html code

return (

<h4 className="PageHeading">Enter Student Informations</h4>

<Col>

{this.state.errors.nameError.length > 0 && <span style={{ color: "red" }}>{this.state.errors.nameError}</span>}

</Col>

</FormGroup>

<Label for="Mobilenumber" sm={2}>Mobilenumber</Label>

{this.state.errors.mobilenumberError.length > 0 && <span style={{ color: "red" }}>{this.state.errors.mobilenumberError}</span>}

</Col>

</FormGroup>

<Label for="Email" sm={2}>Email</Label>

{this.state.errors.emailError.length > 0 && <span style={{ color: "red" }}>{this.state.errors.emailError}</span>}

</Col>

</FormGroup>

</Col>

<Col>

</Col>

<button type="button" disabled={!isEnabled} onClick={this.Addemployee} className="btn btn-success">Submit</button>

</Col>

<Button color="danger">Cancel</Button>{' '}

</Col>

</Col>

</FormGroup>

</Col>

</Form>

</Container>

);

}

employeedit.js:

import React from 'react';

import employeeservice from '../Services/employeeservice'

import { Container, Col, Form, FormGroup, Label, Input, Button } from 'reactstrap';

//email validation

const validEmailRegex = RegExp( /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i);

const validateForm = errors => {

let valid = true;

Object.values(errors).forEach(val => val.length > 0 && (valid = false));

return valid;

};

class employeedit extends React.Component {

constructor(props) {

super(props)

this.state = {

id: '',

mobilenumber: '',

email: '',

errors: {

nameError: '',

mobilenumberError: '',

emailError: ''

}

//validations

handleChange = (event) => {

debugger;

event.preventDefault();

this.setState({[event.target.name]: event.target.value });

const { name, value } = event.target;

let errors = this.state.errors;

switch (name) {

case 'name':

errors.nameError =

value.length == ""

? ' Please enter name!'

: '';

break;

case 'email':

errors.emailError =

validEmailRegex.test(value)

? ''

: 'Email is not valid!';

break;

case 'mobilenumber':

errors.mobilenumberError =

value.length != 10

? 'Please enter 10 digit mobilenumber !'

: '';

break;

default:

}

this.setState({ errors, [name]: value });

}

// get the employee by id

//eg:https://localhost:44375/employee/1034

componentDidMount() {

this.getemployee(this.props.match.params.id);

}

getemployee(id) {

employeeservice.get(id)

.then(response => {

this.setState({

id: response.data.id,

mobilenumber: response.data.mobilenumber,

email: response.data.email

});

})

.catch(e => {

console.log(e);

});

}

//update employee when click on submit button

updateemployee = (event) => {

event.preventDefault();

if (validateForm(this.state.errors)) {

console.info('Valid Form')

debugger;

employeeservice.update(this.state.id, this.state).then(json => {

if (json.data.status === 'Success') {

console.log(json.data.status);

alert("Data Updated Successfully");

this.props.history.push('/listemployees')

}

else {

alert('Data not Saved');

debugger;

this.props.history.push('/listemployees')

}

})

}

render() {

const { name, mobilenumber, email } = this.state;

const isEnabled = name.length > 0 && mobilenumber.length > 0 && email.length > 0;

//html code

return (

<h4 className="PageHeading">Enter Student Informations</h4>

<Col>

{this.state.errors.nameError.length > 0 && <span style={{ color: "red" }}>{this.state.errors.nameError}</span>}

</Col>

</FormGroup>

<Label for="Mobilenumber" sm={2}>Mobilenumber</Label>

{this.state.errors.mobilenumberError.length > 0 && <span style={{ color: "red" }}>{this.state.errors.mobilenumberError}</span>}

</Col>

</FormGroup>

<Label for="Email" sm={2}>Email</Label>

{this.state.errors.emailError.length > 0 && <span style={{ color: "red" }}>{this.state.errors.emailError}</span>}

</Col>

</FormGroup>

</Col>

<Col>

</Col>

<button type="button" disabled={!isEnabled} onClick={this.updateemployee} className="btn btn-success">Submit</button>

</Col>

<Button color="danger">Cancel</Button>{' '}

</Col>

</Col>

</FormGroup>

</Col>

</Form>

</Container>

);

}

export default employeedit;

listemployees.js:

import React, { Component } from 'react';

import { Link } from 'react-router-dom';

import employeeservice from '../Services/employeeservice'

class listemployees extends Component {

constructor(props) {

super(props);

this.state = { business: [], loading: true };

}

componentDidMount() {

this.componentemplist();

}

// to get employee list data

componentemplist() {

debugger;

employeeservice.getAll()

.then(response => {

this.setState({ business: response.data, loading: false });

debugger;

})

.catch(function (error) {

console.log(error);

})

}

//to delete employee

deleteemployee (id) {

debugger;

employeeservice.delete(id)

.then(json => {

if (json.data.status === 'Success') {

this.props.history.push('/addemployee')

alert('Record deleted successfully!!');

}

})

}

//html coding part

render() {

let contents = this.state.loading

? <p><em>Loading...</em></p>

: <table className='table table-striped' aria-labelledby="tabelLabel">

<thead>

<tr>

<th>PHONE NUMBER</th>

<th>EMAIL ID</th>

<th colSpan="4">Action</th>

</tr>

</thead>

<tbody>

{this.state.business.map(employee =>

<td>{employee.id}</td>

<td>{employee.name}</td>

<td>{employee.mobilenumber}</td>

<td>{employee.email}</td>

<td>

<button className="btn btn-sm btn-danger btn-delete-user" onClick={() => this.deleteemployee(employee.id)}>Delete</button>

<Link to={"/employee/" + employee.id}

className="btn btn-sm btn-warning btn-delete-user" > Edit </Link>

</td>

</tr>

)}

</tbody>

</table>

return (

<div>

<h1 id="tabelLabel" >Employee list</h1>

{contents}

</div>

);

}

export default listemployees

step 15: app.js for routing and menu buttons

App.js:

import React from 'react';

import addemployee from './components/Employee/addemployee';

import listemployees from './components/Employee/listemployees';

import employeedit from './components/Employee/employeedit';

import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

function App() {

return (

<Link className="btn btn-success" to={'/addemployee'} >Add employee</Link>

</li>

<Link className="btn btn-success" to={'/listemployees'} >employee List</Link>

</li>

</ul>

</div>

</nav> <br />

</Switch>

</div>

</Router>

);

}

export default App;

OUTPUT:

https://www.c-sharpcorner.com/article/crud-operations-using-web-api-and-reactjs/
https://bezkoder.com/react-crud-web-api/
https://www.c-sharpcorner.com/article/crud-operations-in-reactjs-with-axios-using-web-api-and-sql-server/
https://www.educative.io/edpresso/react-form-validation

Rajesh

Search This Blog

React.js crud operations using mvc core web api

Comments

Post a Comment