(#17) How to Insert Data the Easy Way: React JS & .NET 7 API | Insert Data using API in React JS

Hello friends how are you in this session I will show you how we can create a form in their case and then how we can insert these form data into our database so we will use the API and we will use Microsoft SQL server for the database and we will use the react.js form for inserting the data okay so if you watch the previous video in the in my previous video I have created a complete dot Net 7 API project I have created the database and in I also created a table inside a database so it is my suggestion to First Watch the previous video If you want to get the complete idea how to create the apis how to create the uh I am in database and how to call the API from the reap yes project okay so in this video basically I will not create the project I mean the react sorry the API project from the scratch I will use the project that I created in my previous video and we will just add an API the insert tip the insert data API okay so that's me directly go to the a project inside my lets me close all the files okay now I have to go to the uh react protein controller and here I have to add one another API for inserting the product data okay and let me once uh let me show you the the table which is our product table and here currently I have only uh three rows okay no that's me copy the code of the API I have already rewrite the API insert code you know copy this past year remove this Lan code and copy the road from our previous API paste here and just give a name to the route uh insert product okay and here let me give name to the API to the function I mean and it will be insert product okay now I will pass the Complete product as a parent to these insert product API and here I will return the inserted product now this API will basically validate whether the product name the product quantity is not null okay once it it is not and that it will just uh use it I mean use the add method of the context class and then it will save the changes to the database in this line and let me also return here return okay and I will return the product is to my API okay now let me Implement let me first uh check this API in the Swagger whether it's working or not no run the project the project is running successfully lets me move to this API and here let me try out okay now you can see that the product ID but I will not pro I will just apply the product name so the product name will be um test product one and let me pass here the quantity two one two okay let me execute it's return me 200 it's mean that it inserted the data successfully in the database let me see in the database currently I have three rows okay now it inserted the new row successfully now I will Implement I mean these API these insert API inside my react yes project okay now let me go to the react and here I will no addict sorry insert product okay for me the document and here lets me put here an input field so we remove these and give here the Slash and it will be type text an ID should be product name okay format the document and let me also give here a placeholder [Music] product name and lets me add one another input field here from this document and it should be number it will its ID should be quantity placeholder should be give product quantity okay Ctrl s go to the react project give product name Q quantity okay and let me give here one another break and I will give here the control X let's be put here outside of the input formative document let me give here in a button for submitting the form submit okay the button type should be submit okay Ctrl s okay now I will give here the product name I will give you the quantity and once I click the submit then these data I will send to the API and then API project will insert inside the SQL Server database okay now let me declare here to properties I mean two variables for the product ID and product name uh quantity okay set name set quantity okay and initially its value will be empty and its value will also be zero initially okay now let me copy name the value of these input field will be name let me copy and also paste here and I will give here the quantity format the document control s okay now as I will give here an unchanged function in react okay and I will set name and insert the name I will pass so here in event.target.value event Dot Target Dot value okay let me also copy these for the quantity and here I will set uh quantity okay Ctrl s now let me give here the ID okay and the name okay now and click on submit I will call the API no and the form submit I have to call a function on submit handle product inset okay and it will be the function so let me declare this function here constant handle product insert okay and and it will be the an async function lets me first here uh event dot prevent default okay format the document and here I will declare a param net param is equal to uh name should be named okay and quantity should be quantity okay and here lets me Define the base URL and I will also copy the response because I am using the base URL two times so let me declare here in one place in this place and it will be a constant okay and I will remove this one also for getting the API you know it will be my base URL and it will be a post method and I will supply here the param okay and the API URL will be oh if I just go to the project API URL will be insert product so API react product and it will be the complete URL form with the document it lets me put here a debugger and I have no to run the project unexpected excuse me I think I am doing some mistake in the code one each here in the list would have unique check the renders or phones here why I am getting this error let me copy these one so recommend this one format the document control s okay now the error is gone um I have to pass the event here and I have to remove this line control s okay now let me put here the product name is uh mobile and let me put here the quantity 10 and click on submit okay now I have get the response whether we are inserting the product successfully let me see in the database currently we have four okay now the product is in such successfully inside the database now let me go to the code again I have to check here a condition response to data okay is not defined I have to show you here the alert data insert successfully okay and I have also to empty the set name I will make it empty and I will have also to to set the quantity to zero if the data inserted successfully okay format the document control s let's refresh okay now here you can see that uh we have currently five uh I mean rows inside our table now let's be refresh again okay I have to give this product three test power 4 its quantity should be 50. submit data answer successfully okay the form becomes empty go to SQL check the result the data is insert successfully but here we once I click on the submit I am not getting the risk updated list so for these I have also to update the list one the product is inserted successfully now I have to do a very small changes for these I have to just insert a variable refresh count refresh count set refresh count and I have to copy this one and past here now these means whenever the value of these variable change then this code will be executed again so I will I mean change the value of this refresh point when I insert the data successfully in the handle product insert and then I will I will change the value of the refresh font so let me add here set refresh count refresh sorry uh I will just updated its value so its value will become by incremented by 1 okay now let me save go to the page here I have six rows [Music] um computer its quantity will be 45 let me click on submit data inserted successfully okay you can see that the list is also updated successfully computer to computer 3 sorry its quantity will be three submit okay no the data is also I mean we are getting the updated list when we insert the data successfully so it is basically the insert operation in real case for inserting the data inside your database so thank you for watching the video inside the next video I will show you how we can update any record

Channel: Noor Codelogics

Views: 158

Keywords: react forms, react crud, crud react, crud operation in react js, post api javascript, post api in react native, post api call react, post api call using fetch, axios, fetch api post data, post data to api in react, post data to api, How to insert data into database using api in react js api, insert data using asp .net api in react js, react insert data into database, insert records into database using api in react js, react crud application, react js tutorial, learn react js

Id: oB8gZSMPdx4

Length: 17min 13sec (1033 seconds)

Published: Tue Sep 26 2023