.Net 6 Blazor Server CRUD Without Web Api

hello friends welcome to my channel uh in this video we are going to see how we can uh create the crud operations without web api in our previous video tutorial we have seen how we can develop this cloud operations using web api and different database first approach but in this video we are going to see how we can develop this without web api so here i have opened like already which what we have developed in the previous video tutorial if you haven't watched that video you can i'll request you to watch that the link is given in the description now here if you see we have created this using crowd operation but here here if you see we have this different layers like the blazer app is there then the entire logic is in different uh class library then we have the api then we have the models okay but what we are going to do is now all this into a single blazer app without without this api okay so what let's add a new blazer application inside the same solution so add new project and we'll select glazer server app and we'll name it as blazer one laser one and click on next and okay dot net five i think i have opened open with 2022 so i opened it again in visual studio 2022 because there was no option for dotnet six so it's loading fine so in this blazer app one will add a new project so add a new project and we'll select blazer server app next and we'll name it as laser on e1 dot net 6 and create okay so here i have the blazer one and i'll set this blazer one as the startup project fine and we'll delete this data and we'll delete this fetch data and from the program file we'll delete it off services and this data all good now here we are going to add three libraries three nougat packages and manage nuget packages first one will be microsoft dd framework core second one will be tools so these three packages we have already added in our demo api these are demo models okay but now we want everything into the single project so we are adding it again in this blazer one and we have sql server fine now here we have created this custom models and models so but here in this blazer one will add a new folder add a new folder and we'll name it as db db objects database objects and in this database object will execute our package manager command replace our blazer1 so we are going to use this command the scaffold db context server will be the your sql server database name trusted connection and this package nuget package we are using and the output directory is db objects so copy it and simply paste it here and execute it this will generate data database objects fine now if you see this here we have the connection string and the warning so we'll comment of both lines because we'll be taking the connection string from our program app settings fine so on this index page we'll be removing all this survey prompt and hello world and we'll be creating one folder with the name models and in this models we are going to copy these two things employ an response model and put it here and we'll simply change it to blazer one razor one dot models so what we have done here is this we have copied two classes we have employee class and another one we have a response model that's it nothing else fine so we have our db objects ready we have our modules now one thing we need is we need a service where we can write our entire logic so for that we'll be adding a service but if you see this service which is there in this blazer one laser app one here we are using this employee service and we have this http client to call our api if you see here we are mentioning the path of the api but in this case now everything is in the same project blazer one so we don't need the http client anymore but we need to have a service which can interact with our data db context and get the data so we'll be creating these two same services again but we'll be changing the content so in this i'll create a folder in blazer one add a new folder and we'll name it as services and inside this will paste to service emp service and this one so here i'll name it as blazer1 and this will also be the namespace will be blazer1 okay and we won't be using this so i'll just remove all the methods from this method from this class everything is empty i go in this one here also everything is empty i'll remove the error one also so we have a pretty empty service emp service now let's go to the index page and on this index page we will copy all this content i'll explain it once again what i have what is there in this page i'll copy everything and paste it on index dot raiser fine so we have this four name space and everything so here i have this imp service and this one we will name it as blazer one services and blazer one models okay we're just changing the path so everything now refers to this this model folder and this services okay and also okay this is fine now if we go down here i have this employee okay this employee is we have created already in our models folder if you see here we have employee okay and we are getting the employees okay so we have this get employees add new employ all these four methods are there and only in this these four methods we have to create in the employee service but we have skipped this demo api there's no api now so what we have to do is like we have to skip this api and we have to directly go in this business logic and copy the content from here so i'll just minimize all the four methods and i'll copy this because we are not using http anymore so we simply want our blazer one app to directly use the service and put it here so here if you see we need the employee db context for that we will be using blazer1.db objects path fine and this employee service okay this is the constructor name emp service so inside the constructor we inject it then we need the response model so for that we are using models folder right now if you see all the errors are gone and we'll go to the interface also from the logic layer and copy these four methods and paste it in the employee service fine so i have all the pages done for me now if i go and see the index.tracer page i'll be getting these errors get employees okay go to the implementation of it i have this get employee but it is returning a list of employee info okay so what i'll have to do is i'll have to loop through and get a list of employee now you can say like why i have created this employee here and because the database uh employee info over here but in case i want to add some validations like this name company or required fields then in that case i cannot use this employee info because it's part of the db context of operations okay so that for that i have created this so the only uh thing we have to do is in the services while getting the employee while getting the employee we have to uh look through each and simply create a list and written out was it here i have a list of employee i have to create and employees and these employees i'll be adding this data so here i'll be creating a new employee and that i will add it in this list and finally i will be returning this employees list because on the index what we are expecting we are expecting a list of employee not employing info definition wise both objects are same but we are simply using it again id will be item.id name will be item.name employee dot years of experience will be this employee dot company will be item dot company and same definition we have to update it in this employee service and while passing add new employee we have to change it to employ here also employ so same goes in the employee service so get employee is perfectly fine now add new employee we are expecting employee info so info we cannot add it again so we have to here we have to create from employee we have to assign it to employee info employee info so here what we are doing we are creating a local object of this uh employee info and whatever we are receiving from the employee object that we are simply assigning it here and adding it to the database the same way will have to do for update employee for update and employ this data yeah this looks fine you have to change it here to employ okay so this looks fine and also in the delete delete also looks fine okay so these methods are perfectly fine so what we have done is like in the previous tutorial we described like how we can uh call from this uh using this api but what we have done in blazer one is like we have created this db context here models here and one service in previous application there was a service in blazer app one and there was a service in business logic as well now what we have come and we have api as a separate okay this model is used this type of thing is used when we have a large erp and where like the project is very very vast so in future when we use this type of distributed it it becomes more flexible to upgrade in future as per the when as and when the requirement keeps on changing for any software so but if we have a small application like two three forms and we don't want to use this one then we can simply use this this way okay now what we have to do is like if you see the index page here we have this await so we have to remove this await same goes for here or oh wait we have to improve fine so we have removed the await from all the locations and here what we have done is like we have simply we have this employee list and employee so this employee we have binded to this edit form and we have created this uh input text field employee name input text field company and at the end we have a button so on click of the button we are calling this add new employee so whatever data is being attached to this employee model because we have mentioned it here in the edit form as a model so that we are passing it to the method employee okay so on click of it we are simply passing it and once on update then we have a table structure below here uh with all this detail they have six table headers and we have a loop inside the loop we are using this id then we have a three editable fields like name company experience and two buttons one for update another delete so inside both this we are in delete we are passing the employee id and in update we are passing the entire object and that same parameter we are again forwarding it to the employee service so this is what we have already covered this in our previous tutorial so i will not explain that much here so as far as combining is concerned now few settings need to be added here like what happened to this employee service we haven't done anything here because if we see the blazer app one then here we have added this employee service then we have mentioned the http client now we don't have http client anymore so what needs to be done in that case so for that some different kind of settings need to be applied in this program okay so i will add those settings now so here we are what we are going to add now is we go to this uh api so here if you see in this demo api we have two settings which we already discussed here we have this add scoped and we have the db context so we'll copy both and then we'll go to the blazer one in blazer one program settings just above this builder dot build we'll add these two settings okay employee db context so here we can use this blazer one dot db context and use sql for use sql server we have this entity framework core okay then now this employee service now the employee service we have we have renamed it as amp service so we'll just make it amp service and we'll change the it refers to services folder of the blazer now these two settings are only enough if we see in uh in our previous approach distributed like approach multi-layer approach there we have added a different setting for blazer blazer server we have a http client and a singleton okay but for api we have another thing we have this uh db context and ad scoped okay but here we have simply only one thing only two lines we have added add db context and add scope okay so only these two things are enough and also we'll copy the connection string from the api so here we have the connection string and we'll simply put it in the app setting of the single blazer one so now this looks fine now let's run this only single application blazer one so let's run it okay so here you have it now here you see there's no api and we have got the data from the database now let's add a new record so we have got the new record i think there's an error could not find alert okay we haven't imported the we haven't imported the script file okay so that will copy from this one and put it in the web root and also the host one in host we have to refer it so that also will copy and paste just host we'll add it now let's run it again now let's update it so now we are getting the updated alert and let's delete one of them okay so we have got everything now everything looks works fine without api and so we have discussed two approaches in our two of our videos the first one is also different and this one is also different both are unique both have their own advantages and disadvantages but if the project is small it's very very small like two three forms then you can simply instead of maintaining this much different different layers and we can simply accommodate everything in the same without api okay fine so that that was it for today's video see you in the next video if you have any doubt if you haven't subscribed to this channel please subscribe so that you get the latest update whenever there's a new video thanks for watching you

Channel: Coding Jackpot

Views: 5,964

Keywords:

Id: gHL962D9JQQ

Length: 22min 48sec (1368 seconds)

Published: Mon Mar 07 2022