Call Web Api in .Net 6 Blazor Server HttpClient Rest Api

hello friends welcome to my youtube channel in this video we're going to see how we can call a web api in dot net 6 blazer server so we have already uh seen this entire problem and how to solve this problem like how to call a web api in dot net 5 now in dot net 6 there are few changes so we are going to uh see how it can be done in dot net 6 so let's begin with our tutorial so we are going to create a blazer server app and let's name it as blazer app one and click on next and select dot net 6 as the long term framework and this will create the web application so it creates the default web app and you're going to create a new project so simply right click on the solution and add a new project and this time we are going to create asp.net core web api click on next and let's name it as demo api click on next and click on create so here i have the demo api let's create one library class library for project for models so we have this class library click on next let's name it as demo models click on next and click on create so let's delete this class1.cs file and from from demo api let's delete the default controller let's delete this weather forecast and from here let's delete this data folder and okay and from this pages we have the default so let's remove this as well and from let's try to build it so we are getting few errors let's solve them let's remove this because we have deleted the data folder fine let's comment it off fine so we have this blazer app then we have the api and the model so in this demo model let's add a folder and let's name it as models and in this let's add a class let's name it as employee info or let's name it as employee and here we have let's make it as public and inside this will create few properties like id name so here i have the employee id and the name so in this controller let's add a add a new controller let's select api click on add let's name it as employee controller i'll click on add so here i have the default controller so in this controller we're going to add a get method here i have this get employees and it returns action result so here we are going to return create a list of employees and then return a list of employees using this employee object so here i have a very simple code list of employee so let's add the reference so here it has add reference to demo models fine so it is referring to demo models dot model and that reference is already added now here it's a simple code i've created a list and then i'm creating an employee with id and name employee 2 employee 3 employee and returning a list of employees this is this is a pretty simple api method inside this controller fine now let's go and in this blazer app and add a services folder add a service new folder and let's add a class let's name it as employee service let's add the interface as well and this we are going to simply add the get employees http client so let's do that and let it inherit from i employee service so here i have added this http client okay we're not going to use any third party library or nothing any nuget packages simply http client we are using and in this let's save it we are going to add a method to get the employees so here i have created a very simple method uh and using this http client get this from json async i'm calling this api employee get employees okay and here i just need to import the demo model so i'm clicking on add reference to demo model so i can get this list now simply i'll copy this and put it here in this interface as well same way i will add the using demo models fine so what we have done is we have created the employee service and its interface we have we are ready with our controller and its action method as well get employees and we have the demo model as well now simply what we are going to do is we are going to go on this index page and write the code to fetch the method fetch the data using the api so let's do that so here we're going to add the code section inside this code we are going to add this employee list before that we are going to make use of the using we need to import this using demo models dot model so here it goes it simply adds it here fine now we're going to add the on initialized on component initialized method so inside this method we are going to add the method to get the employees so let's create the get employees method before get employee methods we'll have to inject the services so we are using this laser app one dot services and we are creating an object of employee service so we can now we can create the get employees method so here i've created this employee list and i'm calling this employee service dot get employees which we'll call the http client and which will indirectly call the api so this get employees needs to be called from this fine now let's add few lines of code to display the employee list here so let's add a table so here i've added a table it's a simple table i have added the bootstrap class as well then i have the table header with the table row number name then i have a table body with a for each loop and which is looping the employee list and another index and the name so here it is now so that's it now let's see how it runs before adding that before making it to run we have to add few references in our blazer app program.cs file so let's learn that okay so here i have to add the employee service in our builder services so i'll remove this line and i'll add these two lines so here i have the employee service so i'll be adding this using and i have the employee service so this single turn is for employee service and for using making use of the http client i have added this in this add http client and i provided the base address like the url of the api so this looks fine now let's set the startup project as these two so let's go to the properties and multiple startup projects i have the blazer app one and the api apply okay and let's run them now okay there's some error weather forecast okay let me build the solution okay so there's one page here patch data so let's delete that let's build the solution build succeed let's run the solution now so here we have the api and this is what the api let's test the api we have configured swagger that's why it is showing like this so here we have try it out and execute so here if we see we are getting this employee id name all the and here we have the local host name is 52 localhost number as port number 5294 so here we are getting this no connection could be made because the target machine actually refused it because we have mentioned the local host number as 5071. so let's change that here in our program.cs of our ui laser app fine now let's start it again so here we can see the employee list whatever is there as part of the api is getting displayed here though this looks simple now so here what we have done is like we have called the api and pulled the data on the blazer app using dot net 6 http client but there is one more thing is like uh some people what they want is like they don't want this demo api api to be some separate they want this api and controller to be part of this blazer f1 in that case what we'll have to do is like we will have to add the controller uh here itself in this section so let's try that away because that is all that is also one of the requirement like some may not want this different api they want this api to be part of this app one itself okay so let's try to do that let's try to combine this demo api so i'll create one more i'll add one more project in this add new project and blazer server app next laser all in one okay so i have this blazer all in one and here what i'm going to do is like i'm going to add this services folder copy this services folder from laser app 1 and put it here and here i'm going to simply add blazer all in one let's clean them and also in this employee service i'm going to add blazer all in one so what i've done is i've copied this services folder from laser app one and put it here now on this index i'll simply copy the code from blazer app1 let me copy everything and let's put it here in this index razor fine now what we will do is like we have this let's change it to blazer all in one and here this models this models what we have this in as a supply separator class library let's copy that as well and put it here in blazer all in one okay so let's change the name space for that as well all in one okay so what we have done is like we have copied the services and we have copied the models now on the pages front we're getting few errors so let's change it blazer all in one and this looks fine now on the services employee service we are getting blazer all in one so this also looks fine in employee interface also we are getting this so we have changed the name space for the services as well as the model okay and on the pages index also all the errors are gone now what we need is like we need the controller okay so what we have to do is like we have to go in the api and let's copy the controller folder and put it here okay we can uh you can create all these services models manually as well we have already created in this three projects that's why we're just copying it so in this employee controller here if you see we can simply write blazer all in one you can simply change the name space okay so here i have it now if you see what we have done is like we have given the here if you see the blazer app one in blazer app one we have added this two lines of code okay add single turn and add http client so these two we can copy and paste it here and we can simply paste it here fine and whatever is required like using blazer or services path that folder we can add okay but here if you see this localhost path won't be won't be there because uh localhost port number 5294 won't be there because now we don't have a separate api and a separate ui both are part of the same project blitz are all in one so in that case what we have to do is we have to see what is the port number for our ui and that we have to add it here okay also we are using control here okay we are using controller as a part of this blazer app project so if you go in the controller section in the controller project program cs file you will see one line map controller so we have to copy this map controllers and in this blazer all in one you don't find uh this so we simply have to add it here okay map controllers fine so this way controllers will will be able to fetch the controller as well independently now let's set this as the startup project blazer all in one and simply run it now in blazer all in one we don't have a api all are part of the same project let's get the port number first so we have this localhost 5162 so localhost 5162 let's add it here in this client base address and let's see how it goes okay so that way also we are going to be able to pull the data and let's see how if what happens if we call the api separately api now api is not there okay but it's the controller is part of the same project so we are using the same local uh port number we have this api employee get employee okay okay we're getting this there's nothing at this address get what is let me check what is there what is the controller okay we have get employees okay added the wrong address get employees okay so i can i'm able to call the api independently on the same port number and i'm able to pull the data as well so what we have done is like we have combined all the three projects into a one so there are two approaches discussed in this video one approach is like we can host it separately uh this suppression separate hosting or like maintaining as a separate project can be used when we have a large project like very very big project but if the project is small and you don't have one to manage all these three different projects then you can simply use this pattern and simply uh in a single project you can simply make use of it also like uh in in our next video we're going to see how we can uh do crud operations using this different patterns different uh without using api and with without with using api as well okay so that was it in this video see you in the next video thanks for watching

Channel: Coding Jackpot

Views: 11,856

Keywords:

Id: cqRqkJaLgls

Length: 18min 55sec (1135 seconds)

Published: Thu Mar 03 2022