Creating the API

This step builds on the next step of Creating a blank Blazor WebAssembly project. Blazor WebAssembly is designed to display the data. For processing and persisting data, you need a backend. A good combination is Blazor WebAssembly and Azure Function, this combination is good because it greatly reduces the hosting cost. In our example, we will demonstrate each portion of Blazor WebAssembly with ASP.NET Core Web API as backend.

You can download the example code used in this topic on GitHub.

Creating a Web API project

To create a Web API project as the backend for Blazor WebAssembly, right click on the solution and select Add => New Project.

Select ASP.NET Core Web API for the next step.

Exposing the endpoints

In our example, we are going to need some endpoints exposed. Details on how to create those endpoints are not included in Blazor School at the moment. The endpoints we are going to need:

• api/Cart/AddToCart: Add a product to the cart.
• api/Cart/IsItemInCart: Check if an item is in the cart.
• api/Cart/GetCartItems: Get all the items in the cart.
• api/Product/GetAllProducts: Get all available products.
• api/Checkout/Checkout: Checkout the cart.

Next step

You can move on how to Binding a model to HTML to learn how to display a product.