I still remember the first time I started working with MVC. It was, by far, the most intuitive experience I'd ever had with a framework in my career, to that point. Mind you, I came from writing OS Services using WCF to traverse internal network topographies, so take my praises with a grain of salt, but MVCs always had a special place in my heart. With the release of the new .NET 5.0.0 SDK, I'd like to take a step back and start working through the basics again. And what better place to start than sending an SMS with ASP.NET Core MVC?
Jump Right to the Code
If you want to just get the code, you can find it in GitHub here.
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 Visual Studio 2019 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.
Sms
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.LabelFor(model => model.To)
@Html.EditorFor(model => model.To, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.To, "", new { @class = "text-danger" })
@Html.LabelFor(model => model.From)
@Html.EditorFor(model => model.From, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.From, "", new { @class = "text-danger" })
@Html.LabelFor(model => model.Text)
@Html.EditorFor(model => model.Text, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Text, "", new { @class = "text-danger" })
@ViewBag.MessageId
@ViewBag.Error
When this is created, it will look something like this.
## C is for Controller
With the Model and View created, the last thing we'll need is a controller. Our View Directly references an `Sms` controller's `Sms` method, so let's go ahead and create that `Sms` Controller. Right-click on the `Controllers` folder, and go to add->Controller. Just create an Empty MVC Controller and Name it `SmsController.`
### Dependency Inject Configuration
Using the Vonage SMS API Requires us to pull an API Key and Secret. We don't want to hard code those, so we're going to be passing them through the configuration. To this end, we're going to use dependency injection to actually get the configuration. This involves adding a new property of type `IConfiguration`, and creating a constructor for the Controller that takes an `IConfiguration` object and assigns that object to our configuration property, like so.
```csharp
public IConfiguration Configuration { get; set; }
public SmsController(IConfiguration config)
{
Configuration = config;
}
Create The Send Sms Action
@ViewBag.Error
When this is created, it will look something like this.
## C is for Controller
With the Model and View created, the last thing we'll need is a controller. Our View Directly references an `Sms` controller's `Sms` method, so let's go ahead and create that `Sms` Controller. Right-click on the `Controllers` folder, and go to add->Controller. Just create an Empty MVC Controller and Name it `SmsController.`
### Dependency Inject Configuration
Using the Vonage SMS API Requires us to pull an API Key and Secret. We don't want to hard code those, so we're going to be passing them through the configuration. To this end, we're going to use dependency injection to actually get the configuration. This involves adding a new property of type `IConfiguration`, and creating a constructor for the Controller that takes an `IConfiguration` object and assigns that object to our configuration property, like so.
```csharp
public IConfiguration Configuration { get; set; }
public SmsController(IConfiguration config)
{
Configuration = config;
}Create The Send Sms Action
Next, we need to create an action that will actually send the SMS. We'll take a SmsModel that we created earlier and validate it. Then we'll pull the API key and secret from our configuration. Next, we'll send the Sms Message. Finally, we'll pull the message ID back into our view bag. If anything goes wrong with the request, we'll catch it in a VonageSmsResponseException and display the error. That method is going to look like this.
[HttpPost]
public IActionResult Sms(Models.SmsModel sendSmsModel)
{
if (ModelState.IsValid)
{
try
{
var VONAGE_API_KEY = Configuration["VONAGE_API_KEY"];
var VONAGE_API_SECRET = Configuration["VONAGE_API_SECRET"];
var credentials = Credentials.FromApiKeyAndSecret(VONAGE_API_KEY, VONAGE_API_SECRET);
var client = new SmsClient(credentials);
var request = new SendSmsRequest { To = sendSmsModel.To, From = sendSmsModel.From, Text = sendSmsModel.Text };
var response = client.SendAnSms(request);
ViewBag.MessageId = response.Messages[0].MessageId;
}
catch(VonageSmsResponseException ex)
{
ViewBag.Error = ex.Message;
}
}
return View("Index");
}Configure the Application
We are pulling the API key and secret out of the configuration. We'll need to go into the appsettings.json file and add the VONAGE_API_KEY and the VONAGE_API_SECRET fields to the configuration object. You can obtain the required values from your dashboard. Just add these fields to your appsettings.json and you're good to go.
Testing
You can boot this up by either running it in IIS Express or by using the dotnet run command. Then, go to the main index of the site that you created where you'll see your form. Enter your cell phone number, the Vonage Virtual number the message will be coming from, the message you'd like to send, and click the send button. The MessageId ought to appear underneath, and the text message should show on your phone.
Resources
- The code from this tutorial can all be found in GitHub.