Build an SMS Dashboard with Blazor WebAssembly

Published August 20, 2020 by Steve Lorello

If you’ve been following my Twitter feed, you may have noticed I’ve been building some demo apps with SMS along parallel tracks, with Blazor and pure MVC. There are three primary functionalities we need to think through when we’re talking SMS.

  1. Sending SMS Messages
  2. Receiving SMS Messages
  3. Receiving Delivery Receipts from your Sent SMS

Now that those are all out of the way – it seemed like a good point to stop and build something more complicated. That is what we are going to be doing in this tutorial.


We’re going to be using Blazor WebAssembly, MVC, the Entity Framework Core, and SignalR to build a Single-Page-App(SPA).

This application will be able to Send SMS messages of-course. It will also be able to receive SMS messages; each message it receives will be stored using the Entity Framework and push straight to our client applications using SignalR. It will do the same thing for all delivery receipts that it receives. This project might seem a bit ambitious, but I promise you it’s not. So without further adieu, let’s commence our adventure.

Jump Right to the Code

If you want to see the code for this demo, you can check it out in GitHub.


  • We’re going to need a Vonage Communications API Account if you don’t have one you can sign up here
  • We’ll need Visual Studio 2019 to use Blazor WebAssembly
  • We’re going to be using Ngrok for testing

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Run Ngrok

I’m going to be throwing everything on localhost:5000, running ngrok will allow us to publicly access localhost:5000.

Take a note of the URL that ngrok is running on. In my case, it’s running on That URL is going to be the base URL for my webhooks going forward.

Create Your Solution

Let’s create our Solution:

  1. Open up Visual Studio
  2. Click Create New App
  3. Select Blazor App
  4. Name Your App VonageSmsDashboard
  5. Click Create
  6. Select Blazor WebAssembly App
  7. Check the ASP.NET Core hosted box on the bottom right and corner
  8. Click Create

Create Blazor App

After you create your project, you are going to have a solution with three projects:

  1. VonageSmsDashboard.Client
  2. VonageSmsDashboard.Server
  3. VonageSmsDashboard.Shared

Install Dependencies

You will need to add the following NuGet packages to your respective projects.




Build our Model

We are going to be using EntityFramework Core with SQLite to house our database. You could just use the data-structures from the Vonage SDK as the model, but since we are using WebAssembly, that would involve having to send the whole Nexmo Csharp SDK down to the client browser, which will involve quadrupling the size of the wasm. To avoid that, we’re going to add Plain Old CLR Objects(POCOs) to our VonageSmsDashboard.Shared project. Add the following classes to that project:

Create Migration and Database

Switch over to VonageSmsDashboard.Server and add the file SmsContext.cs to the project. Add a DbSet for our Inbound Messages and Dlrs. Then override the OnConfiguring method to point at a Sqlite data source.

Build your project quickly, or dotnet ef is liable to remove your dependant packages when you perform the migration. Now in your console, navigate to the VonageSmsDashboard.Server and run the following:

This will output Migrations\SmsContextModelSnapshot.cs and Migrations\A_TIMESTAMP_InitialCreate.cs after this, your model is created, we will now add our SignalR Hub.

Add SMS Hub

In our VonageSmsDashboard.Server project add a folder called Hubs, then add an SmsHub.cs file to that folder. Have the SmsHub extend Hub.

Configure Middleware

We’re going to need to set up a couple of pieces of middleware for ourselves to help us get set up with Entity/SignalR.

In Startup.cs find the ConfigureServices method and add the following two lines to it:

Next, in the Configure method, add a endpoints.MapHub("/smshub") to the UseEndpoints delegate, which will now look like:

Build Controller

With our model built and all our middleware setup we will build our controller. In VonageSmsDashboard.Server right click on the Controllers folder -> add -> Controller -> API Controller - Empty -> Add -> SmsController.cs

Inject Dependencies

Let’s inject our dependencies into the SMS controller. We are going to need an IConfiguration to pull out our API_KEY/API_SECRET. We will need an IHubContext to manage the connection with our clients. And we are going to need a SmsContext which will be our access to our database. Inject them all into the Controller’s constructor like so:

Add SendSms Action

We’ll now add an action to send an SMS; this will take an OutboundSms object, pull our ApiKey/secret from the config, send an SMS, then add the Message Id, price, and timestamp to our request object, and return it to the requestor.

Add Get Methods for Model

Next, We’ll add Get Methods for each of our model types that will just read them out of the database and return it to the requestor.

Add Route to Handle Inbound SMS and DLR

Now we need a route to handle the SMS and DLR messages inbound to our app. These requests will pull the body out of the stream and deserialize it into an Inbound SMS and DLR object. Then it will map the critical fields into our model objects. Then it will push it down to the SmsHub clients. Finally, it will save the new inbound/Dlr to our database.

Build the Frontend

The last thing we need to do is build the frontend. Ordinarily, this would involve bringing together HTML/js/CSS until we got everything just the way we like it. The beauty of Blazor wasm is that we only need to think about one type of unit – our razor components. Let’s create a Components folder in the VonageSmsDashboard.Client directory.

Disable Caching

First, we’re going to need to load stuff from our controller dynamically, so we’ll need to disable the caching of the HttpClient. Open Program.cs and replace the builder.Services.AddTransient call to:

Create a DeliveredMessage Component

In the VonageSmsDashboard.Client\Components folder, add a new razor component “DeliveredMessages” this is where we are going to display DLRs as they come into our app. At the head of this add using statements for the Microsoft.AspNetCore.SignalR.Client and VonageSmsDashboard.Shared namespaces. Then inject a NavigationManager and an HttpClient. Also, as we’re going to be using a HubConnection to manage the push from SignalR, we’re going to need to implement IDisposable to clean it up afterward.

Add a Header and Table

Now that we have our dependencies let’s go ahead and add the visual part of our component. It will just be a table populated from the list of messages that we will get from the server.

Add Initialize Logic and SignalR Connection

Now we must add a couple fields _hubConnection and _messages to hold our SignalR hub connection and the DLR messages, respectively. We need to add an override to OnInitializedAsync to initialize the HubConnection with a delegate that will update the messages list, and do an initial update of the messages list with the currently available DLRs. We will also need to add a Dispose method to dispose of the HubConnection when the component finalizes. Put all of this in the code block, which should look like:

Build Inbound SMS Component

Next, we’ll build the InboundSms Component – we’re going to start the same way we started the DeliveredMessages Component, create a razor component called InboundSms and add the dependencies to it.

Then we’re going to add a very similar looking table to it, which will display the data from our webhook.

Finally, we’ll update our code block to fetch the inbound messages when the component initializes and setup the hub connection. When the component finalizes, it will dispose of the hub connection.

Build SendSms Component

Now we need to build the frontend for sending SMS messages. We will make a separate component that we will call MessageSender, go ahead and create a component with that name, inject a HttpClient and include the shared project.

Next, we will bind an OutboundSms object to three input fields, a to, from, and text field. Also, we’ll display our last sent message id exists. We will show it.

Finally, we must send the message. We will post a request to our controller, and pull the Message Id out of the response and store it in LastMessageId.

Layout the Frontend

Now let’s lay out the frontend. Luckily we’ve split everything into components, so we just need to include the VonageSmsDashboard.Client.Components in the index.razor file and add the three new components into a div together.

Add Some Style

Let’s add just a bit of style to the wwwroot\css\app.css file so that this renders a bit nicer:

Configure Webhooks

The last thing we need to do before we test is to configure our webhooks. We must point the webhooks at the endpoints we want to receive our inbound messages and DLRs on. Earlier, we ran a ngrok command which loaded ngrok into – the random string before will be different. The path we need to point to for our inbound SMS messages is and for DLR messages. We now need to set those URLs and set the HTTP Method to POST-JSON in the dashboard

Dashboard Settings

Configure the App

The last thing we need to do before we test is to add our API_KEY, and API_SECRET to the configuration. Open up VonageSmsDashboard.Server\appsettings.json and add your API key and API secret to it, your config will look something like:

Update Port

We also assumed when we set up ngrok that we would be listening on port 5000, you can set this by opening up the properties\launchsettings.json file and changing the applicationUrl to http://localhost:5000 for IIS express, if you are using IIS express, and change the SSL port to 0. Or, if you are using Kestrel, you can drop the https://localhost:5001 endpoint.


You’re all ready to test now. Go ahead and fire up the app in IIS Express or Kestrel, and you’re off to the races. You will see a dashboard that looks something like this:

The Dashboard

Wrapping Up

It’s amazing what the combination of Blazor and the Vonage APIs can enable us to do with some HTML and a touch of C# code. To review, we’ve built a feature-rich SPA app with ZERO JavaScript in minutes.


  • The code for this demo is located in GitHub
  • If you look at my other articles on the Vonage Developer Blog you’ll see all kinds of other really cool examples of how to use .NET and the Vonage APIs together.

Leave a Reply

Your email address will not be published.

Get the latest posts from Nexmo’s next-generation communications blog delivered to your inbox.

By signing up to our communications blog, you accept our privacy policy , which sets out how we use your data and the rights you have in respect of your data. You can opt out of receiving our updates by clicking the unsubscribe link in the email or by emailing us at [email protected].