In this article, we are going to learn more about Blazor WebAssembly HttpClient and how to use it to fetch data from the ASP.NET Core Web API server. The HttpClient service is preconfigured in BlazorWebAssembly applications, but since we are working with the API project on a different domain (Cross-origin resource sharing), we are going to create our custom HTTP logic and handle the results accordingly.

One thing to mention, when you create your Blazor WebAssembly project, you can check the ASP.NET Core hosted option that will create and configure the Web API server for your application. Both, the client and the server applications will run in the same domain. So, you can do it that way as well.

To download the source code for the article, you can visit the Blazor WebAssembly HttpClient repository. Use the Start folder to download the projects to follow along with this article and the End folder for the finished projects.

For the complete navigation of this series, you can visit the Blazor Series page.

We are going to divide this article into the following topics:

Web API Project Overview

In the Start folder, you can find two projects. The client application from the previous article, and the server Web API application. Since the Web API works with data from the SQL database, all you have to do is to modify the connection string in the appsettings.json file and start the application. This will create the database and seed the required data.

Before we start, let’s do a quick overview of the Web API application:

Web API Solution Explorer for Blazor WebAssembly HttpClient Application

We can see two projects. The Web API project and the Entities project that we are going to share with the Blazor client application.

In the Web API project, we can see a standard setup. A context class with the configuration class for seeding data, the MigrationManager class to execute our migration as soon as application starts, and our Migration files.

We have applied a couple of changes to the launchSettings.json file:

And to the Startup class, to configure CORS and register DbContext:

One important note. This is the Blazor WebAssembly series and we won’t dive deep into the Web API logic. We strongly recommend you reading our ASP.NET Core WEB Api series to learn in great detail how to create a Web API project and how to handle different requests. Additionally, we have a great book that goes even more into details with additional topics related to Web API creation.

That said, let’s start with the Web API logic first.

Fetching Products from the Database

We are going to start by creating a Repository folder with the ProductRepository class and the IProductRepository interface inside it. After creation, let’s modify the interface:

Right after that, let’s modify the ProductRepository class:

This is just a basic async operation where we extract our data from the database. We are not going to dive deep into the repository logic, but if you want to learn more about it and how to implement it using the best practices, you can read our Repository Pattern in ASP.NET Core Web API article. There is the async version of that implementation as well.

Now, let’s register our repository service in the Startup class:

finally, let’s create an empty API Controller named ProductsController in the Controllers folder and modify it to send our data to the client:

And that’s all it takes.

We can test this with Postman:

All products from API

We can confirm everything is working as expected.

Now, let’s continue with the client side logic.

Blazor WebAssembly HttpClient

When we want to communicate with the Web API project from our client-side project, we can use the HttpClient service provided by the framework. It is already registered in the Program.cs class:

Blazor WebAssembly HttpClient registration

We can see that we don’t have the Startup class and the ConfigureServices method as we do in the Web API project or Blazor server-side project. We have to register our services in the Main method in the Program class. Additionally, we can see that the HttpClient is configured to use a base address (localhost:5001) as a default address, but that won’t work for us because our API runs on localhost:5011. We are going to deal with that.

Furthermore, if we inspect the FetchData razor file, we can see the usage of the HttpClient service with the GetJsonAsync method. But, since we will require additional logic in our get request, with query parameters and all, we are going to use our logic for the Http requests. We don’t need the FetchData component, so let’s remove it and let’s modify the NavMenu component to include the Products menu instead of Fetch Data:

Excellent.

Now, let’s import the Entities project to our client solution by using the Add Existing Project option. Additionally, we have to add the Entities project’s reference to the BlazorProducts.Client project:

 Blazor client with Entities

To continue, we are going to create a new HttpRepository folder in the client project with the IProductHttpRepository interface and the ProductHttpRepository class.

Let’s start with the interface modification:

And let’s implement this interface in the class:

Here, we inject the HttpClient service and use it to send a Get request to the server-side application. As soon as we receive the response, we extract it in the content variable, deserialize it, and return it to the component.

Finally, we have to register this service in the Program class:

Excellent. Let’s move to the component logic.

Creating Components to Display Data

In the Pages folder, we are going to create two files – Products.razor and Products.razor.cs files. Let’s start with the Products.razor file modification:

And after that, let’s modify the Products class:

In this file, we inject our Http repository interface using the [Inject] attribute and use it to call the GetProducts method from the repository class. After that, we just loop through each product to test if this works as expected.

Now, we can start our applications, press F12, navigate to the Products page, and inspect the logs:

Logging the data retreived with the Blazor WebAssembly HttpClient service

Excellent. Our data is here.

To continue, let’s create a new ProductTable folder with ProductTable.razor and ProductTable.razor.cs files inside it. All of that in the Components folder.

So, let’s start with the class modification first:

All we do here is create a “Products” parameter to accept all the products from the parent component. Now, let’s use it to generate our view in the razor file:

Here, we create a conditional rendering. If our Products parameter is still an empty list, we just show the message “Loading products…”. But as soon as we populate the Products list, we render the table with some bootstrap css classes.

Finally, we have to add this component to the Products.razor file:

As soon as we start our application and navigate to the Products page, we are going to see a quick “Loading products…” message and then our products:

Products rendered on the page

Nicely done.

Conclusion

Right now, we know how to fetch our data from the API using the HttpClient provided by the Blazor framework. Additionally, we have learned how to create and register services in the Blazor WebAssembly application and how to render fetched data from the server.

In the next article, we are going to implement pagination on both Web API and Blazor WebAssembly sides.