In previous post, we have seen there are two types of Blazor WebAssembly apps, – Hosted App and Standalone app. In this article, we are going to create a Blazor WebAssembly Standalone App and we will try to make an API call from that application.
Hosted vs Standalone Apps
A hosted app provides an ASP .NET Core website at the server, which can serve requests for the Blazor WebAssembly app and it can also host the APIs. It is one way to keep all your application (backend APIs + frontend) together at one place in one solution.
If you are developing a new application, it may be easy to go for hosted app, but if you have an existing API application already, then you may lean towards standalone app.
Again, this decision depends upon the architecture you are adopting and technical roadmap and many other things. For the sake of this article, we already have created minimal API solution and we are going to use that. And I do not want to create another API project. That’s why we are going to use Blazor Standalone app.
Creating Web API
We already have created a minimal API in previous posts. If you want to have a look, then below is the list of posts. You can follow the instructions there to get the minimal API to a working state.
- .NET 7 – Getting started on Minimal APIs
- .NET 7 – Configure Minimal APIs to use EF Core Database
- .NET 7 – Minimal APIs with Serilog Logging Providers
- .NET 7 – Minimal API and Dependency Injection
- .NET 7 – Using Configurations with Minimal API
Create Blazor Standalone App
Let’s open the
MinimalApiDemo solution and let’s try to add a new
Blazor WebAssembly App project, by right clicking on the solution node in solution explorer and then selecting Add -> New Project from the context menu.
So, in previous article we have seen how to create Standalone app using Visual Studio. After coming on create new project wizard, search for Blazor WebAssembly App and then click on next.
Then on next screen provide project name (let’s say
BlazorWasmApp). As we are adding project to an existing solution, there is no input box for providing solution name. On the next screen in wizard, ensure that
ASP .NET Core Hosted option is unselected as shown in the below snapshot. Then click on Create.
Enable CORS in API
Our API server has different base address than the web app. Hence, the requests originated from web app would not be entertained by our API. In order to enable the requests from web app, we need to enable CORS on API host.
The code given below shows how I enabled CORS. Of course, the CORS policy should be a lot stricter than shown below. For example, ideally, it should specify specific host names, which are allowed. But as CORS is not main topic of today’s post and I am goin to run my applications locally, I would leave it as shown below.
Create Service Client
If we open
Program.cs and check the main method in
Blazor WebAssembly App, we can see that an
HttpClient is already registered in the services container. The base address for this
HttpClient is set to be the base address where the
Blazor App is running – as shown in the code snippet given below.
HttpClient dependency is already registered in the container. The base addresses of the client needs to be updated, but let’s do that later. First, let’s create a folder named Services in the
Blazor WebAssembly project. In that folder, let’s add
StudentsApiClient class. This class would depend on
HttpClient to make call to the API. Let’s add a method
GetStudentsAsync, which makes an HTTP GET request to our API.
The code snippet given below shows the complete code in this StudentsApiClient class.
Register New Dependency
We have created a new class
StudentsApiClient, which would be used by
FetchData.razor page to make API call. Hence this dependency would be injected in
FetchData. In order to be able to inject dependency in
FetchData page, we need to register it.
Also, as said before – in our case, the API application is different than the web app, so they have different addresses. So, we will need to setup
HttpClient to use the base address of the API project.
The code snippet given below is the modified Main method from the
Blazor WebAssembly project. Notice that the base address for
HttpClient has been updated. It should be the host and port on which API is running. Also, we have registered the service client dependency.
Modify Razor Page
Now, we have new service client, which is registered with DI container. We also have corrected base address of
HttpClient. So, it’s now time to modify
We are going to inject
StudentsApiClient in this file using @inect. Then we are going to trigger a call to
GetStudentsAsync on an event – OnInitializedAsync – which automatically gets triggered when the page is initialized.
The complete code from
FetchData.razor is given below:
Run and Verify !
Now, in the solution, we can set multiple projects as Startup Projects (
This can be done by right clicking on the solution and then selecting Properties from the context menu. Then select the radio button “Multiple startup projects” as shown below. Ensure action “Start” is selected in the action column for Blazor project and Web API project.
Then we can hit the run button in Visual Studio. In the browser window where Blazor app is loaded, select Fetch data option from the navigation and we can see that students list is shown on the UI.
Here, we have a running demonstration of how the API calls can be made from
Blazor WebAssembly application. We have used
HttpClient directly in the service client, but we can use HttpClientFactory and then get Named or Typed clients as well.
I hope you find this information helpful. Let me know your thoughts.