Blazor Server Call Web Api / Rest Api from Blazor Component in Asp.Net Core Tutorial

[Music] hello friends welcome to my youtube channel in this video we will see how we can call in web api in asp.net blazer server projects following this video is first we have to create a web project then api project then create data models for product so let's open visual studio in visual studio we'll click click on file new project here we will click on blazer app click on next and we will name it as demo dot ui and the solution has blazer demo click on create will remove this configure for https and select blazer server app click on create so this will create the web project demo dot ui inside our solution blazer demo now right click on blazer demo add a new project this time we will be selecting asp.net core blazerweb asp.net core web application and click on next and we will name it as demo dot api click on create and select api uncheck configure for https and click on create so now we have two projects demo api and demo ui now we have to create models so we'll click on right click on demo and add a new project this time we will be selecting class library.net code if you don't find it here you can simply scroll and find out so next and we will be naming it as demo dot data models click on create so we have the data models and we have class1.cs we'll delete that and in this data models we'll add a new class add new class we will name it as product dot cs and make it as public class this product will simply add this five properties now we have to add up data models as project reference so first we will go on demo ui on the dependencies section we'll right click and add project reference and import the dem demo dot data models click on ok same thing will repeat for con api we'll click on add project reference and demo dot data models click on ok now the api will add one more controller we already have a default controller but we are not going to use that we will click on add new controller click on api and mtm controller all right and we will name it as product controller that's it so in this controller we will create one method to get the products so here we will simply create this method return okay now written okay and in this we will create a list of product product list equal to new product list and this is showing error we will be importing we'll simply click on it and we'll get this markup and using demo dot data models so we will create products now and in this products we will add all the products we'll add it in the product list one by one and we'll return off the product list now let's so this method is almost complete to call this method you have to simply have to do api slash controller name slash controller action method name so now we have to set api and ui as the both both as the startup project so simply we have to right click on laser demo go to properties multiple startup projects and here we have to start and start the dui and the api click on apply and okay now if we simply start it off you can see that it is returning the default api api slash product slash you get products so if we call this api then we simply get it api product slash your product and the port number is 6 5 this is the api so our api is running and our data models is almost done so now we have to add a product service in web project so in this demo ui we have to add a folder for services add new folder services and in this services we have to add a class and name it as products service dot cs and also we have to add its interface by product service dot cs let's make it public in this product service we have to simply inherit it here in this product service in the interface we have to create a method to return the products for this we have to simply using demo.data models and in the product service we have to simply implement that to implement the interface and here in the product service to make http calls to the api we have to import this http client and it is part of system.net.http so we simply have to include it here and we have to inject it in the constructor so underscore http client and base dot just it will be client equal to this now this service product service is a part of ui our user interface so from here we have to call the api so to call the api you have to make an http client call and that see a little bit now you can see that we are not getting this get json async as part of this http client so for this we have to go on this link and install this microsoft asp.net core blazer http client nuget package so to simply install it we have to open this package manager console and the default project should be demo ui because we have to install it in the ui user interface project so simply paste it here and click enter so once this is done in the user interface project you in the dependencies you will find that the packages we have this nuget package installed and you simply hover over it on we can get this using this asp.net core components now the api call is done the last part is add page to display the product so to add page we have to right click on the pages folder add a new razer component and name it as grid view click on add and here we will create two regions region one in region two this will be html this will be c sharp code so that it's pretty simple to understand coding design so in this the first page will be first line will be the directive slash grid that is the route after that will be using demo dot data models and using demo dot ui dot services and then we'll be injecting that service inject i product service underscore okay so we have injected that service now using that service we will be simply calling the api now in this code we have to write we will we are declaring a variable of innumerable product and we are naming it as data it is null so once this component is initialized we will be making use of this data of it product service and in this product service we have get products the method and this get products if we do f2l is simply calling the api method now whatever data we are getting is being stored in this data variable now in this design part this design part we have added if part if data is null then we will simply shown loading part if there is some data then we will be displaying this table structure here we simply have nothing it's just a table we have which with a head and a body inside the head we have id product name price quantity brand inside the body we have a forage loop and for each data we are simply displaying the id name price quantity and brand and the route is slash grid so will simply run execute it now if we the api is running and the ui is also running now pc will get this kind of error because we have not registered our service which we have created the product service so to register the product service we have to open startup.cs and in startup.cs we have we can see here like we have some weather forecast service is also registered so here we have to service the register our product service and simply using demo um import this out and we have to mention the localhost so now if we run it and simply type grid um let's rerun it again six five four eight four the port number is different from what we mentioned here that's why it's not working okay so we have to write grid okay so when we type grid here we have the data displayed so what we'll do now is we'll just put a breakpoint in the api in the services so we are putting a breakpoint in this product service which is part of demo ui and in the api controller we are putting a breakpoint so simply go home click grid so here we can see the control is reached here and if i do f11 it goes here and it goes inside inside inside inside and you can see the product list it has four products and it returns that product control comes back and if we click on continue it comes here and continue just remove it off and we can see the data on the component so that was about today's tutorial if you have any doubt you can come write comment in the comment box and let me know so thanks for watching this video [Music]

Channel: Coding Jackpot

Views: 17,992

Keywords: .net 6, blazor, blazor server, webapi

Id: DNvl56m4t-E

Length: 17min 28sec (1048 seconds)

Published: Fri Apr 16 2021