How to Send an SMS With Blazor

Published July 08, 2020 by Steve Lorello

Blazor is the latest in a series of what I’d call “magnificent” developer-friendly web frameworks that .NET has built. In this tutorial, we’ll be reviewing how to send an SMS using Blazor and the Vonage SMS API.

Jump Right to the Code

All of the code from this tutorial is located in GitHub.

Prerequisites

  • You’ll need the latest version of the .NET Core 3.1 SDK
  • You’ll need either Visual Studio 2019, Visual Studio for Mac, or Visual Studio Code⁠—I will be using VS Code for this demo

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.

Create the App

Navigate to wherever you want to build the app and run the following command in your terminal:

This will create a blazor server app for you called SendSmsBlazor. cd into this directory and enter the command code . to Launch VS Code. For Visual Studio users, you can just open the sln file.

Add Nexmo Csharp Nuget Package

Fire up a terminal in VSCode and run:

This will install the Nexmo.Csharp.Client package to the project.

Create Your SmsService

We will have to inject an SMS service into our razor page, so let’s create a SmsService.

Add a new file under the Data folder called SmsService.cs. If you’re using VS Code, this is just going to create a blank file, so add the following to it.

Add a Constructor

Inside the SmsService class, we must inject a configuration object. The config will contain our API key and API secret, which we’ll configure a bit later. For the moment, all you need to do is add a new property inside the SmsService class called Configuration of type IConfiguraiton and add a Constructor taking an IConfiguration object, which will simply assign our Configuration property to that object.

Write Your SendSms Method

Inside the SmsService, we’re going to add a SendSms method. That method will take three strings: to, from, and text which will contain the number the message is going to, the Vonage API number the message is coming from, and the text of the message.

All that’s left to do from this service’s perspective is:

  1. Pull the API key and secret out of the configuration
  2. Create a SmsClient
  3. Send the SMS

All of this can be accomplished with the following:

Configure SmsService as Injectable

Now that we have the service built, we need to make sure that we can inject it into our razor page. To do this, we need to go into Startup.cs and find the ConfigureServices function. Add the following line to the end of this function, and the service will be injectable:

Add Frontend

We’re going to use the Pages/Index.razor for our frontend, so just open it up and delete everything below line 2.

Dependency Inject SmsService

The first thing we need to do here is pull in our SmsService. To that end, add a using and an inject statement, like so:

Add C# Code to Send the Message

One of the really neat things about Blazor is that it allows you to run C# code in the browser—all we need is an @code{} block, and we’re good to go. By doing this we are making an anonymous class in-line, so we will add a To, From, Text, and MessageId to this anonymous class and add a method called SendSms which will actually call our SmsService. This is going to look like this:

Add Input Fields and Send Button

Now that we have all this out of the way, we’re going to add a few input fields. The To, From, and Text fields will be populated by binding them to these input fields with the @bind attribute. At the bottom, just above the button, we will display the sent MessageId by referencing it in a paragraph tag. Finally, we’ll add a button to the bottom that will call the SendSms button in our anonymous class when clicked. Add the following between the @code block and the @inject block:

Configure the App

The last thing we must do before running our server is to configure it. If you’ll recall, you set an IConfiguration object in the SmsService. All you need to do is open appsettings.json and add two properties to the configuration VONAGE_API_KEY and VONAGE_API_SECRET. Set those to the API key and API secret values in the Dashboard.

Running our app

With all this done, just return to your terminal and run the following command.

Your application will tell you what port it’s listening on—for me it’s port 5001, so I’d navigate to localhost:5001, fill out the form, and hit SendSms. You’ll see the SMS on the number you sent to, with the Message-ID from the SMS appearing just below the text field.

Resources

The code for this demo can be found in GitHub.

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].