Blazor WebAssembly Guide

Blazor WebAssembly Application that sends email using SendGrid

Sample of a Blazor Client that calls a Web API

In this article we will create a Blazor WebAssembly application that calls a Web API backend to send an email using SendGrid.

The GitHub repository for this article can be found in the references below.

Introduction

Blazor allows developers to build rich web UIs using their existing knowledge of C# and .NET Core. Blazor can run directly on the user’s browser by using a WebAssembly-based .NET runtime, and it can also run on the server. It’s built on open web standards and it can run in all moderns web browsers.

In this article we’ll be building a Blazor WebAssebly application.

Blazor WebAssembly project

For every Blazor WebAssembly project, the entry point for the application is the App.razor component. If the path of the application being requested exists, the page is then rendered in the @Body property in the MainLayout.razor component.

The MainLayout.razor component is where we can specify the components that will be shared across multiple pages, such as a website header and footer. In our case, we create a header component called MainHeader.razor that is referenced in the MainLayout.razor as shown below:

MainLayout.razor

Create components to better organize a page

In order to better organize this application, I have created multiple components and then referenced them in the page instead of having a very large component. An example of this can be seen here below in the Index.razor page, where it references 3 components:

Index.razor

Blazor Animations

To create animations in the application I used the Blazor.Animate nuget package created by mikoskinen. In order to add this nuget package simply run this dotnet cli command inside the Blazor WebAssembly folder:

dotnet add package BlazorAnimate --version 3.0.0

To add animation to a Component or a HTML element, simply wrap it inside the Animate component as shown below:

Example on how to use the Blazor.Animate nuget package

Call Backend Web API

Blazor supports dependency injection. Dependency injection will be used in order to have a single instance of the the service across all components and also to decouple the components from the concrete service class.

In our Blazor WebAssembly application we have created the EmailService.cs class that will be injected in the DI container in Program.cs by doing:

The service class above requires the HttpClient class in order to call the backend Web API, so we will add it with a Dependency Injection lifetime of Scoped (a new instance is generated for every request). In this configuration we will also set the ASP.NET Core backend Base Address. It is important to say that in a deployed application the base address should be configured in a configuration file such as appsettings.json or have the value coming from the Azure Key Vault service when this application is running in an Azure App Service for example. When running locally, the base address for the Web API is https://localhost:44345:

Add HttpClient in Dependency Injection container

ASP.NET Core backend Web API

Enable CORS in Backend Web API

Browsers have a security feature that prevents an application from making requests to a different domain than the one that served the application. If you try to call the backend from the Blazor WebAssembly without configuring the server you’ll get an error. In order to solve this, the endpoint in the backend must enable cross-origin resource sharing (CORS).

In order to enable it on the backend, you add in the Configure method in Startup.cs the following middleware after the UseRouting, but before the UseAuthorization as shown below:

Enable CORS on ASP.NET Core backend

Add SendGrid Nuget Package

The service we’ll be using to send email is SendGrid. We will use from SendGrid two nuget packages, one package to send the emails and the other one to allow us to have access to the ISendGridClient interface that is injected in the DI container.

To download both nuget packages, run those dotnet cli commands inside the Web API project folder location:

dotnet add package Sendgrid — version 9.21.1
dotnet add package SendGrid.Extensions.DependencyInjection — version 1.0.0

Now that we have both of this packages, first we register the service in Startup.cs:

Add SendGrid Service in DI Container

To create the SendEmail service, we will need the ISendGridClient implementation that we will have access via the constructor:

SendEmailService class receiving in the constructor the ISendGridClient

With this interface, we can then create the method that will be sending email when the requests arrives from the Blazor WebAssembly:

SendEmail method

Conclusion

In this article, we saw how to create and configure a Blazor WebAssembly and an ASP.NET Core Web Api in order to send an email using SendGrid.

In the project’s repository you will find a sample application that can be used as a starting point when building your own projects.

Reference

Project’s repository:

strykerin/Blazor-WebAssembly-Sample

Blazor Layouts:

ASP.NET Core Blazor layouts

Blazor.Animate:

mikoskinen/Blazor.Animate

Blazor dependency injection

ASP.NET Core Blazor dependency injection

Call a web API from ASP.NET Core Blazor

Call a web API from ASP.NET Core Blazor WebAssembly