React JS CRUD Application | Asp.Net Core Web API + Entity Framework + Sql Server

hello everyone in this video we'll try to create a grid application in react.js and for the backend we will use dotnet core web API and in this web API we will use code first approach so as you can see on your screen this is accred application let me try to create a new employee as rtaic 27 is active Okay submit so employee has been added and the list has been updated as hardik 27 1. let's try to add the same employee and if I change the age as 29 hardik one two three and let's make this employee as inactive so simply uncheck save changes you see hardik one two three 29 is active all the details has been updated now let's try to delete the moment you click on this delete button it will ask you to add a show to delete this employee if you click on cancel nothing will happen if I again click on OK so it will delete this employee let's click on it so employee has been deleted see the hardik has been deleted from the list also so in this video we'll try to create this same application for so let's continue with the video so first of all we need to install some packages so these are the packages react bootstrap axios and toastify so let me copy the first one open a terminal so all our packages has been installed if I open package.json yes perfect now inside the source folder add a new file and I'm giving it a name crud dot Js inside this file we will write all our credit operation so let's create a basic functional component here so import react from react and also we will use use state and use effect so const crud and finally export default you could so our functional component is ready so here let's use a parameter data in this variable we will store our API response for all the employees all right so use effect and let's create a dummy data for here so const employee data is equal to and here if you see our table we have ID name age is active so let's use it selective one let's copy this object and paste and let me quickly change the details and finally ID is three name let's say Rohit 34 is active zero and pass this as here let's create a use effect hook so use effect and here set data EMP data and pass blank dependency perfect so here let me remove this and let's use fragment the inbuilt react.js property and here we'll use react bootstrap table all right so if you go here so if you search react table so you will find this link and here if you see this one so let's copy this import statement from bootstrap sorry this should be used State not use effect and let's copy this one and paste it here ID name age and is active and this body we will create dynamically so let me remove the other two rows and in this T body let's use some condition conditions so if data and then data dot length greater than 0 then data dot map item index then return let's cop y to this particular row and else loading save and change this so first of all let's give a key so K is index and here we will pass item dot ID let's copy this item dot name item dot age item Dot is active so save go to app.js Let's remove this header part and import our current component let's save now let's add one more TD for the serial number and let's use this index plus 1 for the serial number save now let's start the development server by using command npm start so it will start a development server and we hopefully see this data on our browser so as you can see this complete array is visible over here perfect so our dummy data is working now let's try to add one more head for edit and delete actions and inside here let's use call span to and here we will try to use two buttons all right so button class name BTN BTN primary add it and button class name BTN BTN Danger and this we will use for delete save go back to browser perfect let me remove this perfect so we have added and delete button now let's define on click of these two buttons so here const handle added and pass ID Alert ID same copy paste for handle delete and it let's use both of them here on click handle added and pass item dot ID copy this on click event from edit and use for delete and change the Handler as handle delete so save now refresh and if I click over here you see we are able to get this ID column on both the handlers so I am removing this ID because we will not show the ID to the end user all right so we'll use this one but at the back end we will use our ID for our operations now on this added we will try to open a model popup all right and for delete we will try to show a confirmation to the end user all right so for the handle delete let's give a confirmation so if window dot confirm I'll just showed to delete this employee if that is true then as of now I am placing this alert here save go back to browser refresh and if I click on delete Sorry sure to delete cancel we didn't get the pop-up but if I click ok so it is giving the ID perfect so our confirmation is working now let's open a model pop-up with this data on edit so for model popup if you search model pop-up bootstrap in react so you will learn to this URL and if you see this this is a straightforward code of model pop-up so let's copy this and use in our component and let's also copy these handlers paste and let me copy this model pop-up and after this table place it save and on handle added let me command this and copy this handle show perfect save now go to our component so if I click on ADD it you see our model is coming let's modify our model pop-up modify employee and here we will place our form and here we will use handle update let's make copy const handle update save now if I go back to react.js so I'm going to use row call from react bootstrap okay so this one let me copy Pro call from react bootstrap I'll create a small form and and copy this inside this fragment let's use this also this container save you don't need this one so we will use the first as input type text class name form control and placeholder so in the table we have ID name age so this will be for name so enter name copy paste enter age and this we will use for checkbox if you see here so we have is active so for this we will use checkbox so check box and for this class we don't need anything let me remove this also this one but for this we will use a label is active and in the last column we will use a button class name BTN BTN primary submitter save it go back to our browser to see enter name age is active submit so we have a small form design is not good but for the functionality I'm just showing you you can use your own designing or styling for this all right so let us copy this complete Row from here and paste in this model body save and change this update say if I again go here and click on ADD it so we see name age is active we don't need this button over here let me remove this because we already have a models update button this one save changes perfect now let's use some State variable so the first one is for our name all right so const name set name and use state copy paste and this is for age set age and this is for as active set is active and initially is active is zero let's copy this this is for add new and this is for edit so edit name set edit name added Edge set edit Edge and it is active set is active and we will require one more state for ID let me give edit ID as name and set edit ID use state so we are done with our state variables so this is for add new form and the this is for the edit form all right now let's use these to the variables so if I click here so the value is name and for this value is h and this input type but for this we will use a condition as we have a property for checked so if is active equal equal one then this will be marked as checked means true else false and let's also give on change event here so on change set name e dot Target Dot value let's copy this and paste for this Edge and change the function as set age and also create a on change event handler for our checkbox so on change handle added so simply pass e and let's give a value as is active save same thing we need to do for our edit controls so let me copy these three well let's copy this entire row not this so only three columns and paste it here and simply change value and methods so the value will be edit name instead of name only and here set edit name and this will be added page set additage and for this we will use is edit active and is heart attack save and here handle what is the name set edit save and here also we will use set is active save Okay add it is active save so we are done with our event handlers also value and on change event handlers perfect now let's try to create a API so right click on the project and try to add a folder I'm giving it name models inside this model let's try to create a class so I'm using employee example for this video so employee and this employee model we will try to add some properties so the first property should be to create a property we have a short end just type prop and then hit tab it will create your property so the first property is ID and it will be integer type second property is EC it is already suggesting so I'm just giving a tab again let's copy this and let me change this as age and let's copy and make it like as active and put it in diesel type save just put a question mark after the data type so that it will accept null so let's save so our done we are with our employee model perfect now we need to include some namespaces or you can see the packages so right click on the project and click on manage nuget packages so from the browse we need to add some packages so the first one is if you see framework dot tools click on it so just select the first one click on install so it will install this package for us click on accept let's copy the another one yeah this is installed now change the package as dot SQL Server select and install let's copy the another one as Entity framework core that is installed now.net core install I accept and the last one is course that we will use when we will try to hit our apis from react.js project so install this as well I accept done so we have installed all required packages if I go back to installed tab you see we have four packages perfect this is we already have this is for Swagger so when we try to run this project so by default it will open the Swagger page through Swagger we can test our apis all right so let's close this now again go back to this models folder try to add a context class so for this I'll create class as name employee context add and this will inherit DB context so just press Ctrl dot so we need to include this namespace so using Microsoft dot entry framework.com double click on it now create Constructor to create a Constructor we have a shortcut just type ctor head tab it will create our Constructor as you can see both the names are identical now we will use DB context options and inside this pass the class name which is employee context let's give a name as options and it will inherit base options now let's create a DB set class for employees as you can see the intellisense is already suggesting so just press tab perfect so we are done with our employee context class now save go back to app settings dot Json so here we need to pass our connection string means we need to give a complete path to which server it will communicate and create the database so I have already created a connection string so just copy and paste this is very straightforward code so connection that is the default tag this is the connection sync name and we have server database security multiple active result set trust server certificate that's it I'm using if I open SQL server and if I try to connect the database engine so you see I'm using Windows authentication so that is the reason I have given Integrated Security true or trust server certificate otherwise I have to give username and password if you use SQL authentication all right now next up is go to your tools file menu and you get package manager console package manager console so here we need to give some commands the first one is add migration and give any name I'm giving initial hit enter so it will start our migration and if this will be successful then we'll have another folder in the solution Explorer called migrations so let's wait for a moment okay foreign let's try to open solution Explorer yes we got the migrations folder as you can see we have two files let's open this one and if you notice we have this override method and see this is the script which will create the class with the name employed so employees will be the name of the table and in this table we will have some Fields with the name ID name age and is active as you can see these are the data types int worker worker end all right now again go back to package manager console now give command update database hit enter so basically this command will create the database in the SQL Server so once this command will be completed will open yeah done everything is done perfect let's open SQL Server and let's refresh this database expand this go back to your app settings what is the database name over here M EMP credit DB okay perfect you see this is the database expanded open the tables and yeah we have two tables one is migrations history one is employees now let's open the new query and select Employee Credit DB let me when the command select start from employees F5 sorry I have misspelled the name perfect so we have ID name age is active these are the same properties which we gave in employees class perfect so our migrations worked and we have created our database perfect now let's try to add a controller so click on API API controller empty click on ADD give it a name so the context is employee so let's change the name values with the name employee controller add perfect so now let's create the Constructor of this class again ctor and hit tab it will create the Constructor and let's use the DB context class in our case that is employee context so private read only employee context underscore employee context and again let's copy this and use as the parameter Center score employee context equal employee context perfect so our Constructor part is done so now let's try to create a API for HTTP get public a sync task action result and that will be a list so we will use I enumerable employee and let's give it a name get employees if underscore DB funderscore employee context Dot employees equal equal null it means we don't have any employee data in our table so we will return not found else if this is not the case then we will return await employee context Dot employees Dot to list a sync save so our get API is ready that will return all the employees whatever is there in the employee table perfect save let's try to copy this API and will create a API for a particular employee based on a ID so here we will pass ID and here we will pass end ID and get employee change the API name again if there is no employee then we will return not found if this is not the case then where employee is equal to employee context dot employees dot find async and here we need to pass the ID which is shared by the front end again if employee equal equal null then we will return not found else we will return deploy and here we will use a weight save and here we need to remove this I enumerable because this API will always return a single employee save so our get apis ready that this is get and this is get by ID so now let's try to create another one for post so http post public a sink action result and here we will pass employee post employee and this will take employee class as parameter in here underscore employee context dot employees dot add employee and await underscore employee context Dot save changes a sync and finally we will return the same employee which we just added so for this create at action name of here we will give the object name get employee new ID is equal to employee employee Dot ID comma employee that is capital ID perfect so our post API is also ready what we did this employee we will take from the front end means from react.js and after getting the details from this object we will try to add this in the database and once the date this is added in the database we are returning the same object with the ID to the front end so that is our post API now let's try to create the put API simply http put and this will again take ID as get by ID so pass ID public sync action result put employee and this will take two parameters first one is ID of the employee and second one is employee class object all right and here we need to pass ID in both the parameters here also and in this employee class also otherwise it will not work so if ID is not equal equal is not equal with the employee Dot ID means by any chance if you miss ID either on Integer parameter or in the employee object so we will return bad request means ID is required in both the parameters if this is not the case then underscore employee context Dot entry employee foreign Dot state is equal to modified employee state DOT modified means we are trying to update the state of particular employee now let's use try catch so in the try block await underscore employee dot save changes and in the catch block we will use one exception that is DB update concurrence exception and here if some error exception will occur then we will throw the same exception so simply use throw and after this you will use return no content all as return simply okay it will give status code AS 200. save so we are done with our put API also so in the put API we will require two things one is ID in the parameter second one is the complete object of an employee so this employee will also have the ID and the values which you want to change in the database all right so this is our put API now let's try to create the last and pending API which is delete so HTTP delete this will also take parameter which is ID and here public async task action result delete employee end ID so if underscore employee context Dot employees equal equal null means there is no record in the database then we will return not found and if this is not the case then where employee equal await underscore employee context Dot employees dot find a sync and pass the ID which is coming from the parameter on F employee equal equal null then return not found finally underscore DB not DP employee context Dot employees dot remove and pass employee object so this will remove the database employees particular record and finally await employee context dot save changes and return okay save so let's try to build Ctrl shift B so we'll start and let's see if there is any error exception hopefully there will be no correct build succeeded now try to run this now on the browser we will see the default Swagger page and from the Swagger we will try to you know access our apis so first we'll try to add a new employee and then we'll try to get the employee list and update and delete as you can see this is that Swagger URL and this is our default project URL perfect so we have created Five apis get get by ID post put delete so let's try to add a new employee so click on this API try it out and here we need to give some details so let me give my name and is active one execute so it is executing the command let's see this will success or fail as you can see 201 this is the object perfect now go to your database and hit this command perfect we have got the data our post API is working perfect go back to browser again let's add one more employee so we're not Kohli 30 and is active is 0 execute perfect go to SQL Server so we have two employees all right now go to your get API try it out execute so hopefully we'll get a array with two objects yeah we got that so that is one array with two object one is for ID one one is for id2 perfect now let's try to check this get by ID try it out here pass the ID let's give one so it will give data of Manoj perfect if I change this ID with two so that will give pirate data done so that get my ad is also working now let's try to check this put API so let me give ID of 1 and if I change name as Manoj destroy developer and change age as 30 if you see my name is Manoj deshwal and age is 29 and his active is 1 so let me change the 0 also so let's click on execute you see bad request why the reason is we also need to give the same ID here all right so that's the common error so that's why I intentionally showed you so now give id1 now execute you see we got success go to SQL execute the command again see name age is active everything has been changed perfect so our put AP is also working now test the delete so let's delete the second one you see we have two employees so I have given ID to execute 200 success execute one so our API is up and running and inside this use effect if you see we have set data so we'll try to create a function which will give you a complete response from get API so const get data so this one this API will try to use so click on try to execute and here we'll get everything like URL response request so you see this is a URL so simply copy and inside this get data will use this axios dot get API so we need to use axios simply hit enter so it will add a reference you see axios from axios so axis dot get so put your url over here dot then result if result is okay then we will use our set data method for result dot data so it will assign a response to our variable this one data where is this one and in case of any error we will simply log our error so console Dot log error save and copy this and now call here save so you see we already have a single employee as Manoj if you see the table we only have one employee let me reconnect the server so we are getting this one now let's try to use the post API and if I go here so on this figure let's open our post API try it out let's give name Rohit age 30 is active one execute so from the Swagger we will get our URL body all right so this is our URL so now so here we'll create a post API all right so let's create a event handler for this button so on click handle save cone standle save so here go to the Swagger so this is the URL const URL now let's create data so for the data let's copy this request paste and instead of this these static values let's change the value so for post we don't need this ID and for name we have name and for H we have age variable and for is active we have is active so our data object is ready now access Dot post so the first parameter will take the URL so we already have the URL and the second one is data dot then result if resulted successful then we will call our get data to quickly bind the latest data in the table and let's create one more method for clean all the fields so I'm giving it name as clear so set name blank set age blank set is active zero and let's copy and change for edit Fields so edit name set edit Edge and set edit and also last one is set edit ID blank and now after the success in our post let's clear all the fields and if I go back to package.json we have added react dot toastify so we'll show a notification to the end user so for that let's use these to import so toast container toast and this is the CSS for react toasty file so first of all let's use this in our return method and now here we'll use toast dot success employee has been added save now go back to browser refresh let's try to add let's say Virat 31 is active zero oops we are not able to edit this is active so basically here we need to change this to we need to create a separate handle for this so handle active change let's copy this const we need to pass event object here and let's pass he went here as well not here yeah event is already there so now based on this event we will check if the checkbox is checked or not so if e Dot Target dot checked if this is true then we will use set is active equal one else zero so save and same thing we will use for our added so handle add it and this one let's copy from here set addit is active save let's copy this and go to our model and change from here also save now let's try to add the employee again we are able to check this submit you see employee has been added there are 311 perfect so our get is working post is working now try to create fault delete so again go back to our Swagger and open or delete so from delete so now in the database we have three so let's try to delete this Virat by id4 try it out divid4 execute perfect so this is our request URL so let's copy this and go here in the handle delete here so now remove this so if user click ok then we will use axios dot delete and inside this we will use a URL but instead of this static URL like number four four is the ID we will use our literal so simply pass ID here so access dot delete if This Promise gets fulfilled then it will return a result and after this if we get the result let's check if result Dot status equal equal 200 which we already got if I show you the Swagger again see we got 200 success status all right then we will simply show user as let's copy this toaster from here and here let's use catch error and here change it to in case of any error we will simply show error to the end user so let's copy this success from here paste employee has been deleted and for the error and exception simply use this one save line number 73 I okay not I this is ID save go back to browser refresh let's add any test employee test employee is 25 is active yes submit supply has been added now let's try to delete delete if I cancel nothing is happening perfect if I click on delete okay employee has been delete let me change dumb at messages deleted okay and after this we will use our get data to refresh the list save refresh again so let's try to delete this row head okay perfect employee has been deleted and list is also updated perfect so our delete is also working now let's try to work on this edit part now if you see here on your list inside this table we have given a model based on this added all right so on this edit we are getting the ID of a particular employee from the particular row all right so let's open this handle added handle added so here we will try to get the ID as if I open Swagger again so for this we will use this API get by ID if I again try it out so as of now we only have a single employee so let's pass ID as one execute so see we are getting this data so this is our URL so go back to Visual Studio code and remove this so here we will use first we will open the model pop-up and then we will use axios Dot let me use the charger first sorry so axios dot get and now pass the URL same the URL will be like this and let me copy this this one but here we need to change some properties so first if the result is okay means we are getting data from the API so we will use set edit name and inside this we are getting name as result Dot data dot name save let's copy second one is added age and here we will give Edge and third one is set and it is active and here will getting data is active and also we need to use this ID because in the added part means for the edit we will use API as put in the put API you will use ID so here simply pass this ID so we are done save let's try to test it so if I click on ADD it see my details are coming over here and let's add one more employee let's say Virat 25 is active Okay submit you see now if I add it so there are 25 is active you see is active one means we are setting the checked property as true and if I try to get my data which is Manus deshwal for this checkbox is not working means it is not checked because the value is 0 perfect so our edit is also working now we'll try to use our put API so if I go back to Swagger again and let's open our put API this one so try it out so let's try to update this record with id6 so power side is 6. and also here six and name let's say change Virat Kohli age 30 let's say 32 is active 1. execute you see we got success this is our request URL so let's go to visual studio code and go to handle update here first of all const URL is equal to this one and instead of this 6 we will use our edit ID we already have not this we need to use back text so now we will use added ID save so our URL is ready now we need to create the date object so cons data let's go to our post API this one let's copy this copy this entire thing and handle update change here so now instead of this name we will use edit name and edit age add it as active and instead of this post change it axios dot put so we will use our URL and data so get data employee has been updated save perfect go to browser refresh let's say if I added this one let me remove this developer and change as 31 is active one save changes let's open developer tools something is wrong Okay the reason is if I go back to here I need to pass ID also in the object so that is the reason I intentionally made this mistake because this is the common mistake all right so simply change this edit ID save go back to browser again refresh and now try to edit this remove this developer and that's it 23 and is active Okay save changes employee has been added and you see it list also updated but the model popper is there we need to hide that so handle update in the success call let's use handle close save let's refresh let's open it again so Manoj dash one let's say if I use Manoj one two three one save my nose one two three Thirty One perfect so you see or get get by ID delete post put everything is working so this is how you can achieve your crud operation in react.js using dot net core web API with code first approach so I hope you like this video if you did so hit the like button share comment and kindly subscribe my channel and also follow me on Instagram if you are facing any kind of technical problems you can connect with me on my Instagram my Instagram handle is open programmer you can also find my other contact details on my channel description so again if you are working on your final year project or if you are doing an internship and you have signed a project in that you are facing any kind of technical problem so you can contact me we can work together and resolve your issues so I'll see you in the next one thanks for watching take care bye bye

Channel: Manoj Kumar

Views: 50,110

Keywords: React with Asp.Net Core, Asp.Net Core with React and Redux, React CRUD with .Net Core Web API, React js CRUD, React CRUD with Hook, React Hook CRUD with Web API, React Redux with Axios, Insert Update Delete in React js, Consume Restful API from React.js, React Hook Redux, Material UI in React js, React Form Design with Material UI, React Form Validation with Material UI, React js with Web API, manojdeshwal, connectedprogrammer, openprogrammer, manoj deshwal, React JS, Full Stack

Id: OrHO7UeDwZc

Length: 74min 31sec (4471 seconds)

Published: Mon Jan 02 2023