Blazor Server Database First Approach Entity Framework Core Tutorial

hello friends welcome to my youtube channel in this video we will see how we can use database first approach use using entity framework core in our blazer server projects so let's begin with the tutorial so here we have open sql server in sql server will simply connect it click on connect and in the database we will right click on create a new database we are going to name it as demodb click on ok so this creates the database and right click on db new query and here we will create create table product for product we will give simply id and name okay and we'll create it so here it creates the product let's open visual studio so in visual studio so on the database side we have created one database and in that we have one table so now in visual studio we'll click on file new project and we'll create simply click on blazer app next and we will name it as blaze demo dot ui and the solution as blazer demo click on create we'll remove this configure for https and select blazer server app click on create so this will create a blazer server web application now in this blazer demo we'll right click and add new project and click class library dot net core click on next and we will name it as demo dot data models click on create and we'll delete the class1.cs file we will add one more project now click add new project and this time we'll again one more add class library.net core and here we will name this as demo dot business service we can name it as business logic this will be the logical layer wherever we'll write all the logic of our application and we will add one api as well add new project and we'll select asp.net core web application next and we will name it as demo dot api click on create api configure for https will remove it click on create okay so we have all the four layers we have the ui we have the api data models and business logic so now in the database first approach we will create we will have to add few dependencies on this data models so we'll right click and manage new kit packages so on this manage nuget packages we have to add three packages microsoft dot entity framework core and we'll install it so this is installed successfully then we have tools install it then we have sql server and install it so on this dependencies we can see in the packages we have installed three packages entity framework core sql server and tools after that you simply have to run one scaffold command so this scaffold command refers to our database server the database here we have demodb and the connection and the library which we are using the package and the output directory where the models will be generated and this force command is like if it already exists then we simply have to overwrite it so we'll copy it and go in this package manager console and here you can see the default project we have to set as data models and here also right right click on data models for time being and set a startup project and simply paste it and execute so once that is successfully executed okay so here we'll see that it has created the database context then the model so in the database context here there is one warning regarding the connection string we will comment it off now if in the database if we create one more table copy paste and name it as category and click on create in we see that the category table if we refresh it still it is not coming here so what we have to do is we have to run the command once again so whenever there's a update in the database we simply have to execute this scaffold command one more time come back here again and comment of the warning so here we get the category and the product so let's add few records in both the tables or any one of the table product already tap 200 rows product one price one product two price two product three price three product four and price 4 so let's see the record selects product so we have all the 4 records now we are done with the data models so this data models we have to add as a reference to our api to the business logic and the demo ui simply right click and add will go in the dependencies add project reference demo dot data models click on ok then on the ui add a project reference demo dot data models click on ok find so let's build the project once again so everything is successful so so far we have created four layers we have created the database we have created the data models by running the scaffold command so whatever we have in database the same replica we have it here in the data models project and also the database connect connection which is refers to our demo db context and here it contains all the db set as well so now what we have to do is we have to simply pull the data from our database using all the entire structure so here in this service we'll add few folder services and here we'll create some add a new class and we will name it as product service and add a new class and we will name it as well this time select interface i product service and click on add and we'll make it as public and the interface as well public in this interface we will add one method which will return get products and here if you hover on it it will show us that we should inherit the demo.datamodels.models folder so that's it and here on this product service we will implement the interface i product service and it will show us that we should implement it it is returning this now this is all fine now we have to get the connection with the database demodb context let's go db full text equal to null and we'll create the constructor of this and inject the dependency copy it and paste it here and name it as db context and this dot underscore db context equal to db context now using this db context we have to get the list of products return maybe context dot products dot 2. to list so here we have to inherit system dot link you so here we have the entire service ready so this business logic so here's we are simply pulling the records from the database nothing much complex but in case this business logic layer this is simply used to write all the complex logic because as per the architecture we are not supposed to write anything in the api so we have to create this layer and this business logic layer we have to reference it in the api so here in the dependencies we have to right click and add project reference demo dot business launching we have to reference it okay and simply save it so we are done with our business logic layer because we have created the service now in the controller section we have this weather forecast will delete it off and you will delete this as well and from the startup we have to simply there's nothing here we'll build this so everything is fine so far on the controller we'll add new controller and in the api controller we'll select empty we will name the controller as product controller so in this product controller we will private read only we'll use the product service i product service equal to null and we simply have to import the namespace and then inject this in the constructor in this dot that's the product service equal to product service now here we have to write and get method so we have created an object of the service which is in the business logic layer and injected that now to get the record we have to create this gear products and we have to return okay so now here we have to create data equal to using this service dot get products that's it so this api will receive a call and it will simply call the business logic layer so it has just a simple call and it is http get and the route will be great product so the path is api flash product slash cad products so in this properties launch setting instead of this forecast we will have api slash this is the default uh api launch url api slash product slash get products okay so here we have it now the connection string if we see carefully it is being mentioned in the db context so this connection string we don't want it here we'll simply copy it because like whenever we deploy we cannot deploy the entire project again if there's a change in the connection string so we'll simply and this needs to be added in the app settings so in the app settings we simply paste it here in the connection string in the app setting we have to in this above this login section we will add a connection string section and paste everything here so here if you see we have the connection strings and inside the connection string we have named our connection as db connection and given the path of the database server along with the database so that's it now simply let's run it let's build the solution so everything successful so far we close everything let's run the demo api and see if it pulls the data from the database okay okay so we have not actually we have not registered this service in the startup the api so here we'll go and add this will inject this so here we have to do two settings one settings regarding the database connection because whatever we have given in the app setting dot json from this app setting dot json file we have to pull the connection and con mention it in the configure service also we have to inject the service which we are using it here in the product controller we are using this product service so that we have to inject it here as a dependency so this settings here we have to use demo db context and simply use the data models and use event ddt framework core and use business service so all these three we have referenced it here now let's build it once so this time it should get the data from the db let's run it okay so all the four records bit work we have in the database that is being retrieved here as output now we are completed with our api data models and business logic now we have to call this api on our front end which is ui and pull the data so whatever data we have this forecast service default service is there we'll simply delete it off and in the pages we have this fetch data dot eraser that also will delete we don't want that and let's build it if we so it has failed and the error is like you're not able to get this data folder will remove it no problem also the weather forecast service we have removed it that is also not required now we will add one folder here add folder to create services now in the business logic layer also we have services but that is the service to interact with the database and this service whatever we are going to create in the ui folder the front end that service is actually to interact with the api so the ui will call the api the api will call the business logic and business logic will make use of data models using the database db context and try to pull the data so here we will name the service as front end service so we can create services according to our domain as well or according for example if we have product we have admin we have category customer so for each and everything we can create a separate service as well or we can have a single service to call all the apis so here we will had a new class this time we'll add interface front and service.css and the interface will make it public in this front end service will simply narrate it here now in this front-end service we have to add the logic method to pull call our api so here we will create list of product get products and will inherit the required namespace this we will in cash put it inside a task because we're going to call it using await in the sync and in the front end service will allow it to implement it so it has implemented this now we have to inject we have to create an object of private read only http blind underscore http and equal to null and this http client is part of system.net so that will implement billing will using now we have to inject this http client inside the constructor this dot http client equal to http client now return ht http client not now here we have to write the code to pull the call our api so for that purpose so for that purpose we'll simply write this method using stp client get the list of product and call our api api product get products and here we have to use a sink and a weight keyword because this dv call will be asynchronous now you can see that we are not able to get this method so for this we have to install when you get package here in our front end so that package is for so that package is this one microsoft.asp.net core blazer http client so simply copy the package manager command and go in this package manager console and this time we have to set the ui as the default project and in this select ui let's clear off and paste it and enter so once this is installed successfully we have to simply import it using the namespace and it will start working so in our front-end service we have written the code to call the api so this front-end service will call it now we have to register this service in our startup.cs in the configure services so here in this service startup.cs we have to add the http client and instead of product service we have to add front and service okay so this way we are injecting the service in our http client and here we are going to write the port number of the api so so our front-end service is ready to call the api and api will call the business logic and make use of data models and dp context to pull the data so we have already seen like that our api is already running and it is getting the data now our front end service is also ready now simply we have to create one page and add eraser component and let's name it as data view click on add and in this we have to create the grid structure to display the data so on this dataview.tracer will simply paste and i'll explain what it is here we are using the front-end service and we'll name it as underscore content service and this front-end service we simply call the get products so we are what we are doing here is simply we are creating an object of the front-end service and injecting it here and using that object we are calling the get products so this front-end service will this object from the from the blazer component it will call the front-end service and this front-end service will call the api and the control from the api will go to the business logic and from the business logic it will pull the data and then it will again reverse back the data and send it on the ui so here we have the fetch data and instead of product name we have name and third one we have price product price so that's it now we have to simply close everything and set the api and the ui both as the startup so right click on the blazer project and multiple startup projects start and the start the api and ui both are set as the startup project and we'll simply run it to see if it works so both our api and ui are launched so the api port number is 502 let's run it once again five zero two two six four so this number we have to give it in the ui so that it works proper in startup.cs we have to give the correct port number now let's run it so the api is getting called and pulling the data and the ui let's click on fetch data so here we can see the data being pulled from the database just to see how the control goes on let's put the breakpoint here on this and also on the api and also on the business logic services and simply go back on home and come back data so first it will the control will go on the front end service let's put a breakpoint here on the dataview.razer as well to see click on continue so from there it will go on the product controller put a breakpoint here as well continue then it will go in the product service which is part of business logic then continue here if you see the data we have all the four records being returned out then click on continue and here we can see the product being displayed so here in this video we have seen all the four different layers and whenever you're going to deploy it this api will get deployed separately and the ui will get deployed separately or we can deploy it on the same port as well so whenever we deploy we simply have to change the app setting and change the connection string of our database server actually where we are going to deploy and in the demo ui in the startup.cs we simply have to change the port number that's it so that was it for today see you in the next video and thanks for watching and if you have any doubt regarding this entire video you can let us know in our comment box and we'll surely try to reply thanks for watching so you

Channel: Coding Jackpot

Views: 14,474

Keywords:

Id: VkT-iMkrpdA

Length: 33min 3sec (1983 seconds)

Published: Sun Apr 18 2021