Consume REST API from Blazor WebAssembly

hi everyone and welcome i'm bruce bashan this is the seventh part of the series on how to develop a software application in this part i'll show you how to call and consume our rest api from the blazer web assembly application that we created in the previous tutorial we'll also create our first ui to show a list of categories before jumping to the primary job let's have a quick look at what we'll cover in this tutorial register http client with the dependency injection container and pass it the restful service address inject http client to the razer component enable cross-origin resource sharing on the restful service side display the list of categories with their images so let's get started if you followed the previous video you'd know that we changed our user interface to be a blazer web assembly application to test it you need to run it alongside the rest api if you use visual studio as the development tool you'll specify multiple startup projects in the solution to do this right click on the northwind solution and select the properties option from the shortcut menu in the solution property pages dialog box select the startup project item on the left pane and then select multiple startup projects option on the right pane in the list of projects change the action to start for the norseman.api and northwind.web projects click on the ok button to apply the changes and close the dialog box now run the solution [Music] [Music] you see that both the api and the web application are now running at their own address write down or copy the urls as we need to use them later in the projects you might have noticed that the swagger ui is displayed when we run the rest api because by default it's configured to show swagger in the development process for those who don't know about swagger just to say that swagger is an open source framework that helps us design build document and consume restful services it provides many different tools for developing interacting with and documenting apis i haven't removed swagger from the rest api intentionally because it's a friendly tool for testing the api still if you want you can remove it by modifying the launch settings file and also the configure services method in the startup class before starting our main job stop debugging to proceed with modifying the project's files now it's time to call the web api from the blazer application the first step for blazer is to know what address the web api is working at to do this open the program class in the blazer project [Music] as you see this statement registers the http client with the dependency injection container later we inject it into the components to communicate with the web api to get or send data you may know that http client is used to send and receive http requests and responses from a resource identified by a yuri http client is implemented using the browser's fetch api and is subject to its limitation including enforcement of the same origin policy this is an important thing that you must be aware of when calling a web api with a different origin i'll talk about this later in this video because we want the blazer app to communicate with the web api so paste the address you already copied as the base address into here [Music] also keep in mind that a better approach is to use i http client factory instead of directly creating instances of http client class but let's talk about this at another time we want to display a list of all categories in our blazer application for this we need a razer component which is usually added to the pages folder this folder contains the routable components or pages with a razer file extension that make up the blazer application so right click on it and first add a folder named categories [Music] then right click on the categories folder and select razer component from the shortcut menu in the add new item dialog box enter category list as the component name with a capital c [Music] now edit the newly added component this way enter page slash categories at the top of it [Music] the page directive specifies the route for the page so a url such as https double forward slash localhost at port 44380 slash categories is a request to display the category list page note that the page directive should be the first statement on a page next inject an instance of the http client to the page by using this statement [Music] [Music] [Music] now in the code section declare a category collection to hold the estate of the category list [Music] you see that the category object is unknown or undefined for the blazer app so we need to add a reference to the models project you also need to add a using statement to the underscore import.razer file this file includes common razor directives in the app's components such as using directives for namespaces after the change the category class is no longer unknown now create an override version of the uninitialized async method to asynchronously receive all categories it's invoked when the component is initialized so we'll have [Music] [Music] [Music] [Music] after the task returned by uninitialized async completes the component is rendered with the updated state if the categories object is null the category list hasn't populated yet in this case we want to show a loading message to the users so add this markup to the beginning of the page [Music] [Music] otherwise we'll show the list of categories in a tables structure so [Music] [Music] [Music] [Music] [Music] [Music] well if you run the program now you'll see an error shown at the bottom of the page [Music] [Music] i do not intend to discuss error handling in this video but i'll talk about the reason for this error and how to fix it in our example the blazer app running at https slash slash localhost at port 44380 makes a cross-origin resource sharing request to the web api running at https slash localhost at port 44360 remember that a blazer web assembly application is running inside a web browser therefore it's restricted by the browser security to make requests to a different origin this restriction is called the same origin policy the same origin policy restricts but doesn't prevent a malicious site from reading sensitive data from another site to make requests from the browser to an endpoint with a different origin the end point must enable cross-origin resource sharing so let's see how to do that [Music] go to the startup class in the rest api project [Music] the first step is to add cross-origin resource sharing service to the services container so add the following statement to the configure services method [Music] from this code you can see that both http and https addresses of the blazer app have been added to the policy next you need to add the cors middleware so add the following statement in the configure method [Music] note that the use course must be called in the correct order the call to use course must be placed after use routing and before use authorization [Music] i'd also like to show you how to display the category images on this list to do this you must know the following information first all images in the norsemen database are stored as binary or byte data second the graphics format of the images is bitmap third they all include 78 leading bytes as ole data to be handled by the ole object in the microsoft access databases note that the norseman database was first released on microsoft access in our application we have to escape these leading bytes to show the images correctly and fourth to display images in binary format you need to encode them in 64 base string representation and use them in markup like the following [Music] but as i said before there are 78 leading bytes in each image and we need to skip them so [Music] [Music] [Music] all right let's build and run the app one more time and see the results [Music] that's great it's working nicely okay before saying goodbye let's make a few minor changes to the ui to make it look better first change the title here to northwind traders to this end you need to go to the nav menu component and change the text in the anchor element second add navigation for the category list so that you don't need to type the url in the address bar to do this you need to add a list item element to the unordered list [Music] finally create a style sheet named styles.css in the css folder under the www root folder [Music] add the following rule to it [Music] [Music] [Music] drag this css file onto the index.html page in the www root folder [Music] now apply the new css rule to the image element on the page [Music] let's try our app once again [Music] [Music] well contrary to expectations the images are still displayed in their original size this is because browser cache hasn't yet been updated with a new style sheet to force the cache to be updated press shift and f5 keys at the same time [Music] yes it looks better that's all for now i hope you've enjoyed it if you have any questions regarding the content of the videos i'd be happy to discuss them with you in the comment sections if you like this video please do not forget to give it a thumbs up and subscribe thanks for watching i'll see you in the following video

Channel: Roozbeh Shad

Views: 15,716

Keywords: CORS, Blazor, WebAssembly, Consume REST API, Call REST API, Blazor Tutorial

Id: DMbPdGf6-rw

Length: 20min 8sec (1208 seconds)

Published: Thu Nov 25 2021