.Net 6 Blazor Server CRUD with WebApi, EntityFramework,Database first Approach

hello friends welcome to my youtube channel so in this video we are going to see how we can create uh how we can create this crud operations in dot net 6 blazer server using web api so let's begin with our project so here i am creating a new project so in this tutorial we are going to make use of this blazer server app class library and asp.net core web api so let's first create this blazer server app click on next let the name be user app one click next and then click create so once this is done after this we are going to add two more projects to the same solution so here it is so here we are having this laser app one now to the same solution i'm going to add the web api part add new project asp.net core web api i'm going to name it as demo api and click on create so this will create the default api structure for us after this we're going to add one new project for uh class library and with this we're going to name as demo models click on next and one more which will be actually our business logic and that also will be a class library so that we're going to name as business logic fine so here we'll simply remove this class one and from this demo models also we'll remove the class one and from this api we have this controller weather forecast we'll just remove it off and this weather forecast dot cs and from this program all looks fine so we have like removed whatever default we have got here also we can remove this data and here we can comment it off this one like we always do whatever we have got we have just removed it now we have created these four solutions over here now in this demo api we are going to add a controller add new controller api mt controller and once that is done we'll simply name it as employee controller employee controller fine we have the controller here an empty controller once this is done in this business logic we are going to add a class and name it as employee service let's make it as public and we're going to add a new class or interface we can say interface and that interface you're going to name as i employ service let's make it as public and this i interface will be generated here so this i imply service inheriting this i employ service fine so here also we are done now coming to the models in this model we are going to add three nuget packages this is actually a database first approach so we are going to add the three nuget packages and that will be microsoft this core entity framework install after this it will be tools install accept and after this one more will be sql server so actually these three nuget packages are required for database first approach so we have this microsoft entity framework core sql server version is six and accept so here we have it in our models in this demo models we are going to create two folders one will be models folder and other one will be custom models fine let's build the solution and see if there's an error okay we have got some error let's click on it okay in this blazer app one we have this page fetch data so we can remove it off because it's using some services which we already deleted fine let's clean the solution clean succeed let's build it once build succeed fine let's close all tabs now here if you see well what we'll be doing is on we'll be using this index page only on the index page itself we are going to create our crowd operations so welcome we'll remove all this and we'll add the code part fine so this is our index page which we're going where we are going to add the employee information so before doing that in my database i have created this employee db and in this db we are going to create a simple table very simple table name company and years of experience here we can have some different data types but here i'm selecting n wirecar 200 for this demo purpose so i have this employee info table as part of this employee dp so here in this table if i execute this script i will get the table and here if you see i have already executed it in my local sql server table is expanding so yeah here i have the employee info it's a simple table now using we have to set this demo model as a startup project and in this package manager console we have to execute one script a simple dba schema update script which will generate our uh data models in this models folder right so let's get that script so here i have opened the script in my notepad scaffold db context server name server will be the sql server id or whatever login you have then the database name then trusted connection true then we have to specify the nuget package name microsoft entity framework core sequel server and the output directory uh will be models here fine so this script we have to simply copy and execute in our package manager console with demo models as the startup project so let's do that so build succeed over here fine so once the build is succeeded inside this demo model we'll get the db context and the one model which is employee info so it's taking time okay finally it got executed so here if you see in this one configuring we're getting this warning so we can comment of the warning also we are getting this connection string here so we can comment it off because we are going to use it in our api and in the api we can simply add it in the app settings connection string so here we are going to add the connection string let's do that so here just above this logging we can add this connection strings db connection is the name of the key and i have the details database will be employeddb fine so this employee this is the connection string which we are going to use fine now inside this employee controller here is employ controller so here we're going to write the methods to get the data before doing that let's create the structure to add the data and service required to pull the data from the api so let's add one services folder in our blazer app add new folder services and let's name this service as amp service and let's create the required interface as well let's implement the interface well now this amp service you're going we are going to inject in our programs here so let's do that so here i have added in the builders services add singleton you simply inherit the required namespace okay so i have this blazer app services folder fine this is done now on this pages section index.h razor we are going to create the required form so before doing that what we can do is like we can we need some models which to be used so we can we'll have to create some custom models so inside this model if you see this employee info here i am having this name company so we will create exact copy of this for our and we'll name it as employee we'll simply name it as employee dot cs and let's paste it here employ public class all right so we have this employee and here we are going to create this required structure for adding the employee first so we'll first add the employee then we'll get the employees and display in the grid so let's create that so here we are creating an edit form simple edit form with the model being the employee right so this model we are going to define it here in our code section private employee employee new fine in this employee we are going to inherit from i'm going to add the namespace here using demo models dot custom models dot so we are going to in this blazer app one we are going to add a reference add a project reference and we're going to include this demo models so we have this demo models dot custom models so we have this name space over here demo models dot custom models so that name space we are going to get here in this index eraser so here we have it and this employee reference is resolved because this employee refers to demo models dot custom models dot employee now inside this edit form we are going to have a table and and some fit table row and view td so we will apply some class bootstrap class fine now inside this table row we are going to add few table datas which will accept the text box information and simply add it to the grid so here i have added three in three table data so here if you see this employee we have name company years of experience so let's add that let's add one more table data so we have four table data now first will be employee dot name then company then we have years of experience then inside this button we are going to add a add new employee so we have created a very simple table structure and we have this we need this add new employee method now so let's create that public very simple method and we are going to inject the service imp service and for that we're going to use using blazer f1 dot services folder we're going to verify here so this amp service we are going to use inside this method to call the method now inside this m service method employee service we're going to add the http required classes and http reference to actually call the api so let's do that and let's complete that entire flow so here i have created a reference of this uh created object of http client and that we have injected in the control constructor of that now here we are going to get some methods to get the data save the data so let's do that so here the simple method get employee so we are referring this demo model's custom models and we are simply getting the get employees calling the api employee controller get employees then we have now we have to create a post method to save the employee or add a new employee so let's do that so here in this blazer app we have created this add new employee we are posting it using this http client and we are calling this method now once the employee is added successfully we need the response back so for that we have to create one class in this custom models and that will name it as response model so add a new class and response model.cs so inside this response model we are going to add two properties status and message so here we can see in this amp service we have this get employees and add new employee so let's add a method to delete employee so here i have simple method delete employee i'm passing the employee id and calling this api employee delete employee employee id okay so let's add these methods in the imp service okay so we have this get employee add employee and delete employee three operations we are doing for cloud operations and let's do a method for update employee as well so in this amp service we are going to do add a method for update employee update employee so it's pretty much the same method for add you're simply going to update based on the id so add employee update employee delete employee so we have all these four methods at the laser server app level now we are going to add the same in the api so let's do that so before adding into the employee controller we'll have to add it in the business logic so let's add that in the employee service first so here we can simply create the context object so here we are referring the context as employeddp context so here in this uh employee business logic service we can create this db context and for that we have to simply add reference to demo models so the reference is added now we have to inject it this db context inside our constructor of this employee service so we have created this object inside the constructor now we have we need to create four methods to simply get the data update delete and add so let's do that so here i've created a simple method get employees and we are getting the employees using the db context then we are creating a list to populate the employees adding one one employee into that from the list and simply returning it so this also if we don't want this we can simply return this list as well employee info so you can remove this off because both the objects are same at that level now we have to add a employee so here we have created a very simple method and in this simple method what we are doing add new employee we are receiving the employee info and then we are checking whether that employee already exist or not if that employee doesn't exist then we are simply adding data dot company equal to company data dot years of experience equal to input experience so we are updating this uh data object from the info object and simply calling this add instead of update and then we are doing a save change so here we are setting the response is true and the message is success so it's this simple add new employee then we have the get employee now on the similar terms we can have update employ and instead of add we can simply have update you can have this inside this and if here we can add a message if the employee is not there in the database to update then we can simply say employer does not exist and send the response as false status response is false so this is also done now we can simply have a simple delete employer delete employment lint employee id and we can see here we can get the employee id employee based on that one single record employee info if that is not null then we don't need this line we can simply remove that data same very simple method so we have here also we have we've added four methods now for our cloud operations so let's add these four methods inside our employee service let's add the definitions hit employ then we have the delete empire now we are going to add the reference in this uh this method reference inside this api so let's do that so we have this get employees so for that we have to inject this employee service inside our constructor so let's create the object so here i have simply created this employee service so let's add a reference to business logic so here i have this business logic layer then let's add the simple other methods get employees delete employees then we are going to add a new method for add and update so we have this add new employee then we'll create the update employee so we have this great template fine so in the controller also our all the four methods we have created at the controller level at the business logic level and at the blazer app level now we simply have to call this in our index.razer page in this amp service where bus forms equal to m service dot add new employee then you are going to pass the employee object if response not equal to null then here we are going to add a simple alert box to display the alert message so let's include that javascript so here in this web root we are going to add a simple add new item and javascript file and let's name it a script.js inside this we are going to add a simple function window dot alert function and alert message and we are going to include descripting the host dot cs html file header section let's add a head section over here fine and on this index we are going to inject js run time so outside this ad employer we are going to create a method which will display take the message and display so let's change it to gs runtime fine so here we'll have this await a lot employee added successfully um so here we simply have this and we simply call this alert box now let's run and see what are the port numbers so that port numbers can be added in the employee setting okay let's set the startup project and this blazer app one will be the start project api will be the start project so we are starting the user interface and the api so let's add that so we've got an error this javascript runtime here is giving some error igs so here r will be capital this should work now okay so here it's giving an error amp service so let's add a few settings in this program.cs file so to get all this error we'll have to add this http client service and mention the base address so let's so this we have added so here we have added the singleton as well as the http client so this is actually the api url which we are going to call from the blazer server so let's add that let's see how it goes so the api is running and we have this form so we have this uh three text box we have got it's not showing properly report number is 5191 so the api port is 5191 so let's add that port properly we have it here and on this index we can add container let's move this entire edit form inside this let's run it now you let's remove this bg light it's not showing properly so we'll have to do some changes here okay let it be let's add the name let's add one more table row above this name company years of experience and other one let's keep it empty so we have added two table rows now i think some css issue so here on this edit form we have removed the div which we've added extra and we have changed the table style to stable table strip and table bordered and here on this button we have simply removed the css and it's a simple button now let's see how it looks so here we have this name company and years of experience so let's before running this let's there's one more change which we need to do in this blazer uh demo api the program cs we have to add the in db context so and also we have to get the connection string so let's add the settings here so just below this add controllers we are going to add this add db context employ db context and use sql server and we are going to get using using this options dot use sql server you are going to get this db db connection and also we are going to inject in the scoped variable we're going to add the employee service now let's close all the tabs and run fine now let's add the name nothing is happening here no error okay we have got an error so we got here the error says sequence contains no element so let's put a breakpoint okay here we have added first that's the problem we can have first or default so for all the methods we are adding this first or default at our service level update employed ad employ fine let's run it now okay so we have got the message employed successfully now let's check the database whether it is added or not okay it's not added okay we'll have to add it here because we have added not equal to null so if it is null then we are going to add it if it is null then we are going to simply pass it here we don't need this one i'm going to simply add it because whatever object we are receiving we are simply going to save the same object we are simply checking whether it exist or not let's roll it again so we've got the message let's see so we have the data also now let's add a grid to display the data so we'll go on index.page and simply add the table to display the data so here we have simply created a table below this edit form and i have the id name company years of experience update and delete and same goes in the table row we are looping through the employee list we are going to create that employee list and we have the id name company as of experience we are going to add two buttons one for update and one for delete delete click so it will be id so for delete the amp id we are passing and for update we are simply passing the entire up so let's create a method to get the employees so here we have created an employee list and we are getting we have a method get employees so you this get employee method get employees method will get the employees and store in the employee list now this get employee need to be called in the page load so let's uh and also once the employee is added then also we have to call this get employee so simply we can add it in the add new employee as well now wait get employees and here let's add the onload on initial init method in the index.user page so on initialized on the page we have to call the get employees now let's run it before running it we have to simply add two more methods update click and delete click so let's add that update click the input parameter will be employed and we are simply going to pass the employee for update employee and we are going to get the response is not equal to null then we can say employ updated successfully same method will create for delete employ the input parameter will be employee id and it will be delete employee passing the employee id and it will be delete click and after delete we again getting the employee employee deleted successfully so here we have four methods now update click delete click add new employee and get employees so this completes our cloud operations now let's run it and see how it works okay so here you can see like uh this is a simple 3d now let's add one more thing okay so it's not displaying it again let's see the database it's having it let's go and see after adding an employee we are getting the employees again okay so here we'll have to add this dot state has changed same goes for here also and same for delete what we saw here is like this this uh data is only for display purpose so we'll have to add the text box to make it enable for editing so let's do that here we are doing this input bind amp dot name and same we have to do for the other two so here company and years of experience so we have introduced three text box which will display the text in the text format and we can simply edit it so let's run it again okay now let's make it eight update employ updated successfully let's go on the counter page and come back here okay so we can see here let's update it okay so here we forgot to change the text of this let's add one more so we have it here now let's change the text of this button to delete and let's run it let's click on delete so it got deleted successfully so these are simple crowd operations so we have covered like how we can add an employee we can delete our employee and update imply and this looks fine now here you see like we have created this different four layers like app laser app logic api and the models so in our next video we're going to see how we can simply uh without using the api all these layers simply combine everything into this blazer app and here in the blazer app itself how we can do the entire cloud operations so that's it for this video see you in the next video hope you like the video if you have any doubt you can simply let us know in our comment box thanks for watching

Channel: Coding Jackpot

Views: 8,743

Keywords:

Id: lDLT4jBM3gY

Length: 50min 9sec (3009 seconds)

Published: Mon Mar 07 2022