React with Asp.Net Core web Api Full Stack Crud Application

hi welcome back today I'm going to teach asp.net core with react.js full stack development web API credit system step by step let me see the demo first so this is the demo here the simple form design which will be able to fill the student details so there's two Fields student name and post I am going to enter the new student as Peter course I am going to interact PHP click register button shouldn't register successfully click OK from has been clear newly created record will be added into the below table you can see here now here if you want to edit the record there is a two choice you will be able to edit and delete have two options if you want to edit the record click edit button the editable record will be passing to the phone here you will be able to edit the record so here I'm going to edit the student Peter James of course I am going to address PHP JSP click update button now you can see at this time registration updated click ok now here updated record will be so in the table you can now you can you will be able to see here very simple now if you want to delete the record that's another button called delete click delete button system step by step will teach first I am going to develop my backend so backend I am going to use asp.net core so here web API so here Visual Studio 2022 I have installed in your machine I am going to open this app click here and open you can see here this is the user interface you will be able to get it so here there's a choice create a new project click on here create a new project now you can see here she sharp windows and desktop so here I'm going to select as C shop you have select C sharp at this time I'm going to select the application which has windows here I'm going to select as web so here the option fit click web here you can see here asp.net web API so at the moment we are not using this one we are using this for asp.net core web API okay here we have used this stressful hdb service all the things you have to configured over here asp.net core web API select this option click next here you have to give the name of the project I am going to name of the project f react asp correct click next click create you have to wait until the project created after project has been created you are getting this window right so here this window here this is your project name react ASP grid so you can see this is our folders controller properties all the things are there now first what I'm going to do here is I'm going to add some Departed 6. so first select the react ASP credit this project right click now here you can see manage in your get packages here we have to download the packages now here where you will be able to install your dependencies right so here the install update you can click browse tab here first I'm going to install the uh Entity framework code design so I type entity framework code design you just set this one entity frame code you just type on this one Entity framework code design here you can see the second one Microsoft entity frame sorry this one not this Entity framework for design so here you will be able to find it over here um there should be foreign right click on this one click install a task to uh click ok accept the license now you can see the installation has been completed this package after that second one I'm going to install the SQL Server in order to connect with their databases so SQL Server so here if you go to the code code first approach you have to download it okay right so this is must okay so here I'm going to go to the code first code first approach so here you have to type the database SQL Server so SQL Server uh excuse or not exclusive design I need SQL Server SQL Server you have to install this like I just click ok accept the license third dependency I'm going to install it as a tools entity core tools um tools you have to get a tools not common tools you have only the tools the design say entity Microsoft Entity framework tools select this one install it click OK accept the license that we have to install the JSM so your news soft Json this one click on the first option click install click ok you can see here all the dependent installations completed so you can see this is your project asp.net sorry react ASP trade here you can see here the dependencies they are the separate difference package is created under the package you have a package yes so this packages here what are the packages you installed it will be list out code design SQL server and tools and news of Json in order to access the Json formats and this package is a must right okay after done the stuff the Second Step what I am going to do is here so I'm going to this screen I'm going to close them after done without stuff this one also you have to close them right now here to this is a controller okay after that what I'm going to do then I'm going to first I'm going to create a models so what I want to create the models so I'm going to create a separate folder right click add new folder before I'm going to name it as models so models folder this model folder I'm going to create a model right click add new item class student student class student at the blank class has been created now here first off I'm going to do is here I'm going to see inside the class the black class inside the class first timeline to create the three Fields ID student name and course so first what I am going to do is I'm going to click here first time I'm going to create public look at the public int idea so that get inside method get and set method the same thing control sheet copy control with paste below second one should be string this one should be stored a name here shortly write a St name student name get and set method we have a another variable I'm going to create as course string course right we have a three properties okay ID name is for name and Cooks right so these are the database Fields uh table Fields so here I'm going to create the ID okay so we have to specify that uh key so I'm going to get a key to write like this okay e y key forget the key it's a prime like here clicking this one here is automatically import the component here using system component model data annotation it automatically created right you have to save this one after done the things you have to create okay now your model has been created successfully now after that what I'm going to do is I'm going to create the student DB context okay student repeat context I am going to create right you have to create the separate folder otherwise you will be creating this folder asset okay create the model folder as well yeah otherwise you can create the different folder as service and you inside the service folder you are created right so I'm I'm going to create inside this folder also select the model folder right click add here I'm going to create the another class new item class this class I'm going to create task student DB context class second class I've been created the blank index class this class I am going to generate the DB context this DB context which will be inherit from entity code okay Infinity core application will be context okay it will be here if you are not installed the Microsoft ndd code it will be not if you can't access this DB cut text class okay it is reside on the entity core application right after the other stuff what you are doing is here I'm going to click on this file this painting symbol you have to generate the generate Constructor student DB context option here this is the format you have the generator okay this is the format they they give up this update communicate with the database access right so click on this one here we have we have created the database okay we have created the databases you have to create the databases okay right okay now after that what you're going to do this here I'm going to in order to create the database first you have to write public debited DB set here at a student it will be this annotation will be your first step key okay no need to type anything else it automatically if you activate set it automatically we have only one models student dot CSS this model it will be indicated if you press Tab Key it will be automatically you have done this okay students okay students it will be getting secular right very simple it will be needed like this okay after that what you are going to do is then we have to make it as good after I've got your mind over this here I'm going to do anything is your right protector you write anything is protected um protected get protected all right here we have to create database connection I'm going to the database connection on configuring non-configuring okay database connection press the tab key on your keyboard it add playing okay if you have plus one one configuring if you're type 1 configuring dynamically you have to type DB context Builder inside here create the database connection press tab Q on your keyword it automatically indicates it J option Builder use SQL Server mean if you press Tab Key it automatically first we have to they ask to create your database connection right so here what you're going to do is you have to see inside here you have to given the database connection over here but very simple you have to given the database connection if you are not installed SQL Server you have to install the latest version of execution okay I've already installed the SQL Server right while installing the SQL Server okay by installing SQL Server what is the user credential you have use for the username you have to while installing the SQL Server what is the username you are given along with the password you have to given the user potential inside here right now first what I am going to do is we have to test that so first go to the View server Explorer so click the server Explorer you can hear the DB connection all things are there now here you can see simply uh I'm going to create the properties you have a database connection is there okay we have to modify them this one okay it's a database connection right the database connection is there okay now what I'm going to select is the same thing inside the connection string I'm going to get there okay if you the first the first time you haven't get this one okay okay so so what I'm going to do is here I'm going to write it manually then you will be able to understand how to create the database yourself so here you have the data source you type data source okay data source equal dot mean the current machine it will be indicated the current Mission if you have used any server you have to specify the name of the server okay this if you are using the current machine with your current my computer your Facebook dot it automatically indicate your name of the computer after that go to anything any here catalog your database name catalog he called your database name whatever name you can keep I'm going to give the database name as e s you can write l b s you can BS after that you have tried use ID user ID e code is said while I am installing the user ID and provide the essay password equal one two three your type one two three right that's it okay that's the thing here right after that trusted uh you're right trust truster trust server certificate certificate foreign that's it foreign databases available you'll be able to check now I'll be okay first you have to check what other database is available now you have a good idea now you can see here these are databases you can click the database this icon you can see this is our database there right this already I have created this is right now I'm going to create this database right so you can see look at this one now I'm going to change as initial lbs layout right uh other things are same right now here we have done you have to change this one as well student DB context you have to write like this right now in order to create a database what I'm going to do is first time first things here we have this database location we have we are given here is that the name we are we have to create the database so first I'm going to go to the uh programming.cs so here I'm going to type I have to just print I I given this course don't worry about that one paste this one before the app I'm going to give the Builder service at context student DB context okay this one DB context mean what is that context name we are given this same contents you have to given as a programming.css file Builder service at DB student DB context option use SQL Server build a configuration the same name you have given what's the name you have created the DB context here that is very important stuff after that uh app setting.json file go here here also we have to give the connection string okay connection strings also the important stuff right the connections click comma to write a connection script right here student DB context this is the context name server Dot database your what is the name okay lb yes name right so you have to give this one right this option that's it that's the thing we have to do it right now let's save our now let's do the things also we are given uh connective screen you have to given this one because 20 what is your name you are given the the same connection string application a GSS correct no problem now let's create the database so after that you have to save all tools SQL and you get manager package management here you have given look right at migration you need them right you have to create the database you have type like this at migration to migrate the database we need to press enter key foreign slash database database press enter key on your keyboard now you can see the update all the models are completed successfully here it will be created your database you will be great to all the tables here okay now you will be able to checking through your SQL Server refresh it go to the database and check it here there will be assist there inside the lbs database you will be able to see the table which is a student table you'll be able to see the tables what's the table you have to create okay very simple okay all things are there all right now let's back to our application now you can see here there is a separate folder has been created which is a migration you can see here inside the migration folder you have a different two files are created here this is a migration file circuit you can see here these are migration files you can see here the complete the table creation model is there ID name course you will be able to see here all the details so inside this migration folder okay very simple right now our migration has been created successfully now I am going to go to create the controller so go to the controller folder write it I'm going to create a new controller so add new controller selected API empty API controller empty click add here I'm going to cut the name as student controller student controller click connect now you can see here your controller has been created successfully you can see here the student controller.cs here this is the file route API controller this is the API access right so here this is a class student controller 18 year controller base right now here first what I am going to do here is here I'm going to create that uh your great private private read only student context student DB context student DB context so to create the front DB context right now what I'm going to do is here I'm going to create the public we have to write public student public student controller so let's student control that protect student controller you have to write here student here press captioning keyboard it will be take care of all the things now okay after that we have tried it's a simple construct it's a concept I have created and it's a Constructor this also this the uh construct right you have to press Tab Key on your keyboard again right so it did be take care of this one but you have to create a Constructor over here okay right after that what you're going to do is here the same thing this one okay right here right this is the your right this is the efficient rate right like this keep it right perfect now what I'm going to do is after that read-only context DB text right context right right now I'm here I'm going to create the API here so here right first one is http HTTP this one should be the get request I'm going to load the value so get HTTP get now here we have right route so right routes to the routes your right gate student get student details right get student right here you have to write the public assign tasks tasks I another Blood student so right here get screwed open and close scale bracket create student right here you got written written the output is assigned you have write a white perfect student TV context dot student s dot student property dot two list fact before that's it that's the thing you have quite perfect these are your largest student teachers okay all right right so after that I'm going to uh at the moment we don't have a student details we have right another thing you said post method so you have to get the same thing I just copy and paste it this one you have right hit post when you get the record records you have to write it get request if I get post this again post it just right so this one should be there student post so you're right here student uh here right here student uh add student head student right routes we are trying to add student now here we have right so public the same thing public assign this one copy paste it you have to write here task look like stars you're right student at student then add student that's right student writer object if you're trying to object student object right like this look at the object of student how's that what you are going to do is here this context if you have to store the things all the records will be showing this context right context dot student a student can't answer the student contact stability or student table dot add method or save this object of student what are the objects you are receiving here via the front end you have to save it in the context right after that you have to avoid press Tab Key on your keyboard you have to context dot save after that you have written after this one or that what you're going to do is we have to uh update this code so I have to update this to that the same thing I just this one should be there HTTP patch not post this front patch so battery just right so the rows this one should be there updates to that when you update a student your bright light dot you have write like this here slash so you have a ID we need ID for updated student you are right like this right after that what you're going to do is you're quite public assign tasks student update student foreign through an object you had called student object dot state Tab Key it automatically take care of it the 2022. right what you are what you are going to write okay it is modified the entry you have to if you have if you have to modify that but the entry on your table we have to make the adjustment it will be modified all right that's why it will take like this correct modified here right called avoid but first step unit or keyboard avoid student DB context save changes right very simple you have right return your keyboard touch in your keyboard create bit finish with that objective right after that we have another current operation which is said delete delete record so how to delete the record okay yes it will mention HTTP delete here uh regular routes you saw the same Mouse so just copy and paste it say on on leave your right delete delete student delete student that's it till so that the same ID we get that again use the letters right so yeah this time you have write a public boom delete caption keyboard delete student get the ID right so inside this create the Boolean type Boolean type here write the a equal okay the variable a partition value you can create false at the first time you are false okay right if the record is available only it will be true right so you have to create a variable via student equals student context this DB context dot student Dot find ID find ID and deal the records but if the student is if yeah it mentioned tap request caption if if stored and it is not null what you are going to do is I am going to delete the record so how to do this there it's there here this one should be bully screw so right a equal true right now what you're going to do is you have to enter entry so here student uh you're right student uh you have to write dot entry sorry DB context student is find right here right context Dot entry student dot state Community keyboard it will take care of it but if the entry is there if the student is not enough if the record is there it will be deleted the record into the database table and here you have to write the table thanks dot save changes so rightly start equal to a equals equal false definite after that we applied to return a that's it that's the thing that's something these are the AP have to write it okay very simple way we have done it right simple one uh now let's execute and check whether it's working fine or not uh Mr shagger you have to shagger this one so all the things we have to done save our let's run it foreign here you all things we have here get student add student update student daily student all the apis are here there right now I'm going to post the click here post this one I'm going to add the record so here try out ID should be automatic remote so here we have to type this one student name which is a John course Java execute now here the record has been created right so now here if you got the load get try out execute here it's working will be added if you get the records you'll be able to see that right another fetch record the edit record you go here cry out you click try outboard then only you'll be able to right okay you should try it right so get method so what is the ID first also id1 right so here I want to update the record so the patch there's a patch report uh the ID id1 John it's not like Peter of course I'm going to change as JSP click execute sorry you have to specify the ID one execute from here it it will be updated successfully right now I'm going to delete the record now you can see here go to the get shown you to execute that okay don't be drawn to the record one record will be there now if you want to update the record delete the record here go to the delete click yes what's the record I try out id1 I am going to delete right one click execute success true now if you go again check execute there's nothing here I already have one record have delete these are the restful API Works successfully we have completed the restful API access here I'm going to start with the react.js right in this in this if you go to the location where you save your backend file here the react ESP credit this is your backend the backend part we have completed now what I'm going to do is I'm going to create the separate folder in order to manage the front end and back end this one should be I'm going to create Okay so they have to write common name asp code MBC correct right here the separate name we have to give the name ASP right this inside here I am going to put it here this file right okay okay this one should be our backlit okay if you want you can uh rename it here as backup this is a professional way to do the program back okay foreign so front end I'm going to cover about which one is a real so how to install react go to the you have to start here get started react click here you have to create create a new app this is a command which you want to running to create that copy this one uh you have to copy this one right now I'm going to go to open the terminal on over here yeah I'm going to create this one okay I'm going to create the fountain right inside this project directory so CMD copy right click it will paste it here I'm going to change name as this one should be uh react ASP font create KSP code front you like this you can read front react we don't need them ASP core front press enter key on your keyboard now here our front-end applications now what I'm going to do is here this is a react right so here you can see that is a front end right now here I'm going to go inside the folder so follow the instruction your type CD ESP credit front end front percentage right you go inside the folder now I have code space Dot this all your project will be open up the VS coordinator if you are not installed vs code editor you must install the vs code okay it is easy to manage the front-end application cool after open up your vs quarter you can see here right now here you can see nod modules public folder inside the public folder we have an index.html so here this is this is the root we have a application is rendering on real application okay so it will be calling here this one is a SRC inside SRC app.js file this is the when you run that it will show the defaults react application look like this right so what does is a react index.js it will be rendering the app follow this what is the what you are right and inside is here it will be rendering and after that it will be calling to the root root will be you're getting here and running that's why you're calling react is a single page application now this is a compound right now what you are going to do is here let's we now need this all things we just get rid of these lines all things the default things will only demo right okay it's a basic things just a basics now let's we solve this we know it then we just get rid of these lines okay now I need only here I'm going to write the testing purpose you have to use H1 tag hi when it's running or not right now let's you can open the terminal and uh here we have we can run it the simple way we have run it you go over here this one should be our front end here we are going to CMD that open negative CMD your channel is very fast start successfully it will be displayed now let's back to our react okay now here I'm going to create a new component so select the SRC folder new folder I'm going to the components you can change the component folder I am going to create a new component which is where a student credit dot Chase right now here uh what you're going to do is yeah whatever how to do the thing same thing just copy it paste inside here only the difference we have to give this the name that gives student correct this is how we have made the new component this component name function name basic over here right okay now this student component we are call it this here write it over here calling now here with this component path we have to give so right here import employee so this one's named employer create this One Import credit inside a component folder it's a component folder which name is student credit you have to specify the path now let's save all now let's back to Applications I will be displayed high will be perfect right now let's change the text something like Ctrl s it's working perfect now what you're going to do is here I'm going to go to first here I'm going to calling the uh both platform so I you just go to the bootstrap site here you can copy this form form style and paste it is completely form will be there right now I've already done all the quotes Okay instead of wasting the time so I just copy this all the code I'll be explained don't worry about that because it takes too much of time to complete the project that's why I copy this all the codes I paste it over here right now here they will start at device close now here inside we have recreate the adding as stored and details after three you have to create the due tag inside view tag we have a form tag form tab consists of three fields ID employee student name course so here this is the efficient way to write the react app so here you can see here the input box you can see the input box you can see the text class this is a bootstrap Form controller so ID hidden field ID should be done with set is value on change okay here we have uh maintain them on state right now what you are going to do is inside the function tag that I'm going to paste this function you don't already use it about that this whole score I provide you I'll be explaining it right right perfect all things right now what you're going to do is I'm going to go to the terminal I'm going to open the terminal because this is the front end okay it's a front end I'm going to open a terminal I am going to install the mpm I X iOS because if you are if you install the this one you can access the restful API so that you have to install this this dependency this is the must okay right now here we have installed the API part successfully here right sorry let's back to our document project right so here now we have to import the this Library okay then only we will be not right like these two things we have to import it over here like xo6 right right now let's do the things right first inside the function we have to create use the use State we have to maintain the use State okay so we have to create that with consent type so ID set ID you have to get a get and set method use State we have made in the state I just we have a three Fields ID is the student name and course we have three Fields you have to meet an assistant okay this set name set course right this one should be we have a students students because it will be lowered the students okay so slow routers right so after that use use effect mean which it will be lowered at the details into the table right you have to specify that your uh URLs right so here first what I'm going to do is this the students because we have to look at the table students right reduce the soda right first what I'm going to do is we have to lower the data so how to load the data this is your student form we have a two buttons after that we have a table this is table columns student ID student name and course so option mean this is the edit and delete buttons right after that students map function employee mean we have created the variable students set users have been the form is loaded it goes to that this is the the particular restful API okay this API I how to copy and paste it I will be explained in few minutes don't worry about that okay let's get the data and passing to the set users variable the result.data then if you are passing to here that set users will be passing to the student okay they said if you are calling set user passing the student the student you'll get the data there's a predefined method function map load the student this is a plural plural here exchange as a singular without a singular foreign student ID student name and course it will be written course we have a button uh edit student and delete student you write this also the edit student right student okay now with the same function we have gate table no problem right just save all right okay now after view the records course there is this book API and view the records when you click edit record so it goes to the function this one should be there delete student this one should be there edit student all right okay now first add the records in the database right so after all the record should be explaining at the records here we have write SD name course right so what I get here is this is simple HTML form you already know okay but this value one chain this is the react we have to pass it right value says the name on change event is this function we have created okay so what is the value you are type on this particular St name text field it will be passing to the passing to this variable and it will be this one giving to here what is the cost you are typing this method pass into this variable okay that is thing it will be happening over here right when you click save button what happen is what's the course version HD name your typing yes this values goes to when you click save button it scores a save yeah when you click save button on click method save it goes to the function save function event prevent his try resources post is a post request is a request St name this is the name you have to we have right run here okay so this is the name in our database there are uh backend we have a name this one okay here in our API we have a name is D name and post okay I already saw in my shagger okay it will go and edit that according to the particular API the record will be added acquisition after add the record load the table right after all the field need to be clear right after that if you want to edit the record here in your table your table we have a two choices edit student and delete student option if you click when you click edit student it goes to the edit student function what does at any student function it's what is the row you are clicking click on the table so all the record should be passed into the form okay passing this form HD name set course so if you maintain the state yeah this all the your SD name course this all the form value will be handling the state okay State the function which will be handling all your foreign right here it will be when you click edit button it's coming to here all the form data it will be assigned with your phone right along with the ID okay after that when you make the changes click edit button so this time the records go into the patch this attachment action method this is a API which will be handling the part right you're finding and this ID St name and this time record will be updated right after the menu won't delete the record that also we have a button delete delete so that get a student ID okay get a student ID and go to the delete function get the ID and passing to here and go to the restful API and delete the record and after this record for mapping clears okay this is all the things form has been clear and the center table is load the simple works you have done in this CPU uh this area okay very simple okay this is I have I have written the simple symbol this is the form loading code this is the saving part yeah separate the saving part this is the delete part this update part okay very simple code I have written the clear code very simple clear code I have data okay this is a form design this is a simple one we having a react okay now what you are going to do is I'm going to first I am going to run my back and Park now let's run the backend part first okay okay firstly how to run the back end after that we have run the front end right now my backend is running you can see here get post patch all the requests I'm going to this this all the API I'm going to give as into our front end okay so front-end framework try out okay you can see the all the things right so here I'm going to again I'm going to test it right so if you have to execute that if already we'll check it again we have to do it right now the same request this is apiary case I'm going to say okay here this one simple you'll get this liquidity like this here this one request you are this one okay simply you have to just go to your front end go to perfect get student basic ocean here you are just place it over inside this bracket all right perfect after that second one uh we have a second one is ADD records add data so go to the this one right now here simple you can get it this one post request try out these are your work passes hacker James course PHP click execute all right this is the request copied let's see right okay let's back it if you record the added right now right now let's back to our another things he said patch request the patch you have rightly as I said I disobed side you have to address ID or to get it there loaded 32 right now what you're going to do is I'm going to edit the record ID to cry out 22 Peter 22 course HTML execute successfully updated this Apache you can see this one not ID so take it only these things ID also getting this one in our front front end okay I discover you have to call the API simple you are called AP after being shaker very simple way to handle same thing like a postman so delete also here what is idea going to delete try out I do execute it's true okay delete that request okay so this one should be the delete okay this one copy the ID is coming from a front end we are front end part we are typing the ID okay delete it just listen right that's it now let's save our and go back to our application this one I'm going to running my already my content is running back end is running I'm going to run my front end front end is compiling employee did not Define yes right here I have add some error that's why it's yeah this one should be not employees this one should be the students that's why it takes error foreign now let's see this one error which is a line set 66 okay this one should be the employee students foreign students right now let's compile successfully now let's back to our turnover front end out output look like this will see so front end it's up here to close the tab open a new tab and and check out check it out right now you have to open a new tab and check it out now the app is running now let's set the record so now here one thing you have forgot to edit so let's stop the programming one thing you have to edit go to the program.cs file here is a program this is all the uh core application configuration is there we already done this one we have given this the contextdb database creation we have done okay you can see the builders vco okay the Builder object we have created there you have to call the student DB context right after that you have to build the app right here what you're going to do is we have to commonly in order to communicate with the front-end and backhand we have to Discord get the policies we have given the policies right other cross Co r s cross policies done only it will be work without the the school API work without any problem it will be give the Evolve the thing shallow okay the policy out give the hello Adder methods all the things you have to give that hello okay this is the policy you have to give then only it will be work right don't worry about that this is all the source code I provide you now let's run save on now it will be work now you have my backend this work is the back end check out the front end I'm going to add the record James course Java click register button student registration successfully now you can newly create student will be you can see over here if you want to create another student Peter course PHP click register student registration successfully you will be able to get the one if you want to edit the record click carry button record passing successfully should make any changes as JSP click update button record updated successfully here it will change it if you want to read the record click delete button delete a successfully right uh it's working so effectively well if you have any doubt you can ask me anytime if you like my Channel Please Subscribe me like me thank you for watching

Channel: Tutus Funny

Views: 29,970

Keywords: React with Asp.Net Core web Api Full Stack Crud Application, react js, .net core, web api, asp.net core with react, react with asp.net core, .net core web api, react js crud web api, asp.net core with react web api, asp.net core tutorial, asp.net core, asp.net core mvc, asp.net react, asp.net rest api tutorial, asp.net react crud, asp.net react tutorial

Id: Nip4k4JPa3w

Length: 68min 58sec (4138 seconds)

Published: Thu Jan 05 2023