ASP.NET MVC - Sending SMS Messages Using Nexmo API

Introduction

In this article, we will demonstrate how we can send an SMS message from Asp.Net MVC application using Nexmo SMS API. As you know, sending an SMS message is a feature which is used by all web applications in order to verify the password, notifications, etc.

So, this post is an opportunity to discover step by step how we can implement Nexmo SMS API. I hope you will like it.

Prerequisites

Make sure you have installed Visual Studio 2017 (.NET Framework 4.6.1) and SQL Server.

In this post, we are going to:

• Create MVC application.
• Installing Nexmo SMS API.
• Add appsettings file.
• Create our SMSMessage controller.
• Create HTML page for the demo.             

Create your MVC application

Open Visual Studio and select File >> New Project.

The "New Project" window will pop up. Select ASP.NET Web Application (.NET Framework), name your project, and click OK.

Next, a new dialog will pop up for selecting the template. We are going choose MVC template and click OK.

Once our project is created, the next step is to install Nexmo SMS API.

Installing Nexmo SMS API

In solution explorer, right click on References >> Manage NuGet Packages.

Now, type Nexmo.Csharp.Client in search input and then click on Install button.

Create Nexmo Account

After installing Nexmo packages from NuGet, now, we should sign up for Nexmo account in order to get API credentials which will allow us to communicate with Nexmo API.

After creating our account successfully. We will be redirected to the following page.

Add appsettings file

Here, we need to add new JSON file which is named appsettings. Now, inside this file, we must copy-paste the API credentials which were generated in the previous picture.

Appsettings.json

{
  "appSettings": {
    "Nexmo.UserAgent": "NEXMOQUICKSTART/1.0",
    "Nexmo.Url.Rest": "https://rest.nexmo.com",
    "Nexmo.Url.Api": "https://api.nexmo.com",
    "Nexmo.api_key": "11549690",
    "Nexmo.api_secret": "9c9e31d1d207a5da",
    "NEXMO_FROM_NUMBER": "YOUR_PHONE_NUMBER"
  }
}

Create a controller

Now, we are going to create a controller. Right click on the controllers folder> > Add >> Controller>> selecting MVC 5 Controller – Empty >> click Add. In the next dialog, name the controller as SMSMessageController and then click Add.

SMSMessageController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Nexmo.Api;
using SendSMSMessages.ViewModels;

namespace SendSMSMessages.Controllers
{
    public class SMSMessageController : Controller
    {
        // GET: SMSMessage
        public ActionResult Index()
        {
            return View();
        }

        [HttpGet]
        public ActionResult SendMessage()
        {
            return View();
        }

        [HttpPost]
        public ActionResult SendMessage(Message message)
        {
            var results = SMS.Send(new SMS.SMSRequest
            {
                from = Configuration.Instance.Settings["appsettings:NEXMO_FROM_NUMBER"],
                to = message.To,
                text = message.ContentMsg
            });


            return View();
        }
    }
}

As you can see SMSMessage controller contains SendMessage action decorated by [httpGet] attribute and is used to display SMSMessage.cshtml view then we have SendMessage decorated by [httpPost] attribute which is responsible to send an SMS message to a phone number as given in message object.

I’d like to explain that the send method accepts SMSRequest objects that contain the three main properties (from, to, text) as shown in the code snippet.

View model

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace SendSMSMessages.ViewModels
{
    public class Message
    {
        public string To { get; set; }
        public string ContentMsg { get; set; }
    }
}

SendMessage.cshtml

@model SendSMSMessages.ViewModels.Message

@{
    ViewBag.Title = "SendMessage";
}

<h2>Send Message</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Message</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.To, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.To, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.To, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ContentMsg, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.ContentMsg, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.ContentMsg, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Send SMS" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Demo

Now, our application is ready. We can run and see the output in the browser.

That’s all. Please send your feedback and queries in the comments box.