Créer une application ASP.NET MVC pour envoyer des SMS

Cet article a été mis à jour en avril 2025

Intro

Bonjour à tous ! Michael Crump à l'appareil. Ce qui me passionne dans l'apprentissage d'une nouvelle technologie, c'est de comprendre un scénario potentiel pour lequel un utilisateur final l'utiliserait et comment construire la solution en tant que développeur.

Je pense que les scénarios du monde réel sont importants pour comprendre comment travailler avec un produit (ou une API dans notre cas) car ils peuvent démontrer la complexité et l'imprévisibilité des problèmes réels auxquels nous sommes confrontés afin de stimuler la pensée critique sur la façon dont nous pourrions les résoudre.

C'est dans cet esprit que j'ai décidé de créer une application web qui simule un utilisateur final trouvant une maison qui l'intéresse et soumettant un formulaire pour qu'un agent immobilier reçoive un SMS avec les détails. Une interface utilisateur simple de l'application est présentée ci-dessous :

OK, commençons à construire l'application !

Note : Le code source complet de cette application peut être trouvé dans notre Vonage Community repo.

Mise en place

Création du projet

Commencez par lancer Visual Studio (Community Edition ou version supérieure) et en sélectionnant Créer un nouveau projetet en sélectionnant ASP.NET Core Web App (Modèle-Vue-Contrôleur) comme indiqué ci-dessous. Je fournirai très prochainement plus d'informations sur ce qu'est MVC.

Donnez un nom à votre projet (exemple : SalesLeads) et appuyez sur Suivant. En ce qui concerne le cadre, assurez-vous qu'il est défini sur NET 8.0 et laissez les autres options à leur valeur par défaut, puis cliquez sur le bouton Créer et appuyez sur le bouton Créer.

Dans Explorateur de solutionscliquez avec le bouton droit de la souris sur Dépendances et sélectionnez Gérer les paquets NuGet. Sélectionnez maintenant l'option Parcourir et recherchez Vonage. Vous verrez Vonage apparaît et appuyez sur Installer sur la dernière version stable (7.17.0 à ce jour).

Qu'est-ce que MVC et pourquoi l'utiliser ?

Avant de nous plonger dans le code, je voulais vous donner une vue d'ensemble de MVC afin que vous puissiez mieux comprendre pourquoi nous utilisons ce modèle pour les applications web aujourd'hui. En bref, MVC signifie modèle-vue-contrôleur, un modèle de conception qui garantit que les applications sont bien architecturées et faciles à tester et à maintenir pour les futurs développeurs travaillant dans la base de code.

Modèles : Représentent les données de l'application.

Views : Représentent le HTML affiché (ou ce que l'utilisateur final voit) de l'application en cours d'exécution.

Ces contrôleurs : Représentent la logique d'entreprise de l'application.

Avec une compréhension de base du modèle, construisons notre application.

Commencer par le modèle (données)

Cliquer avec le bouton droit de la souris Modèles dans l'explorateur de solutions et Ajouter une nouvelle classe. Nous donnerons le nom Lead.cs et nous appuierons sur Ajouter.

Nous ajouterons 4 informations : Le nom du client, son numéro de téléphone, le message qu'il souhaite envoyer ainsi que le résultat de la soumission du formulaire. De cette manière, l'utilisateur final sait si le message a été envoyé avec succès ou non.

using System.ComponentModel.DataAnnotations;

namespace SalesLeads.Models
{
    public class Lead
    {
        [Display(Name = "Your Name")]
        public string Name { get; set; }
        [Display(Name = "Your Phone Number")]
        public string Phone { get; set; }
        [Display(Name = "How can we help?")]
        public string Message { get; set; }
        public string Result { get; set; }
    }
}

Définition de la vue (UI)

Nous allons maintenant définir la page qui sera présentée à l'utilisateur final.

Sélectionner Vues -> Accueil -> puis Index.cshtml.

Qu'est-ce que cshtml ? Il s'agit d'un fichier HTML C# qui est utilisé côté serveur par le moteur de balisage Razor pour rendre les fichiers de la page web dans le navigateur de l'utilisateur.

Nous commencerons par définir le modèle de données que la page modèle utilisera, comme le montre la ligne 1 ci-dessous. Ensuite, nous allons créer quelques divs pour que notre page soit belle une fois rendue (ainsi qu'un texte standard sur la maison). Puis nous utiliserons la fonction ASP.NET BeginForm d'ASP.NET pour construire facilement un formulaire. Plusieurs fonctionnalités sont intégrées, notamment un moyen simple d'ajouter des Placeholder et de marquer le champ comme obligatoire.

@model SalesLeads.Models.Lead

<div class="row">
    <div class="col-sm-8">
        <img src="~/Content/Images/house.jpg" class="img-responsive" alt="House">
    </div>
    <div class="col-sm-2">
        <h4>Talk To A Real Estate Agent</h4>
        <p>
            A trained real estate professional is standing by to answer any
            questions you might have about this property. Fill out the form below
            with your contact information, and an agent will reach out soon.
        </p>
        @using (Html.BeginForm("Index", "Home"))
        {
            <div class="form-group">
                @Html.LabelFor(m => m.Name)
                @Html.TextBoxFor(m => m.Name, new { @class = "form-control", placeholder = "Michael Crump", required = "required" })
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.Phone)
                @Html.TextBoxFor(m => m.Phone, new { @class = "form-control", placeholder = "+14253331111", required = "required" })
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.Message)
                @Html.TextBoxFor(m => m.Message, new { @class = "form-control", required = "required" })
            </div>
            <button type="submit" class="btn btn-primary">Request Info</button>
        }

        <strong>@Html.DisplayFor(m => m.Result)</strong><br>
    </div>
</div>

Nous terminerons par un bouton pour soumettre les données (via une requête POST) ainsi qu'un endroit pour indiquer si le SMS a été envoyé avec succès ou non.

Pour des points bonus : Ajoutez un exemple d'image de votre maison à l'endroit suivant à ~/Content/Images/house.jpg. :)

Ajout du contrôleur (logique d'entreprise)

Nous devons stocker nos clé API et notre secret API pour que notre application les utilise lors de l'envoi d'un SMS. Nous les placerons dans un contrôleur de domaine.

Mais d'abord, vous pouvez obtenir votre clé API et votre secret API actuels en visitant le Portail des développeurs de Vonage et en copiant et collant les clés comme indiqué ci-dessous.

Note : J'ai ajouté les secrets à cette classe pour faciliter la compréhension du modèle. Veuillez sécuriser vos secrets si vous publiez une application de production en utilisant soit des variables d'environnement, soit quelque chose comme Azure Key Vault.

Cliquez avec le bouton droit de la souris sur la solution et ajoutez un nouveau dossier appelé Domaine; à l'intérieur de ce dossier, créez une nouvelle bibliothèque de classes appelée Credentials.cs avec le contenu suivant.

namespace SalesLeads.Domain
{
    public class Credentials
    {
        public static string APIKey => "API-KEY";
        public static string APISecret => "API-SECRET";
    }
}

Ensuite, nous allons écrire la logique qui envoie le SMS.

Sélectionner Contrôleurs puis HomeController.cs et utilisez l'extrait de code suivant. Vous devrez mettre à jour l'élément using SalesLeads.Models; en fonction du nom de votre projet, afin d'y intégrer votre modèle data.

using Microsoft.AspNetCore.Mvc;
using SalesLeads.Models;
using Vonage;
using Vonage.Request;

namespace SalesLeads.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return this.View();
        }

        [HttpPost]
        public async Task<ActionResult> Index(Lead lead)
        {
            string name = lead.Name;
            string phone = lead.Phone;
            string message = lead.Message;

            var credentials = Credentials.FromApiKeyAndSecret(
            Domain.Credentials.APIKey,
            Domain.Credentials.APISecret
            );

            var VonageClient = new VonageClient(credentials);

            var response = await VonageClient.SmsClient.SendAnSmsAsync(new Vonage.Messaging.SendSmsRequest()
            {
                To = "ENTER_A_PHONE_NUMBER",
                From = "ENTER_A_PHONE_NUMBER",
                Text = $"New lead acquired!\n\nName: {name}\nPhone: {phone}\nMessage: {message}"
            });

            if (response != null && Convert.ToInt32(response.MessageCount) > 0 && response.Messages[0].StatusCode.ToString() == "Success")
            {
                lead.Result = "Message sent successfully! An agent will contact you shortly.";
            }
            else
            {
                lead.Result = "Message Failure. Please try your request again. ";
            }

            return this.View(lead);
        }
    }
}

Le dernier Si...alors vérifie si le SMS a été envoyé avec succès et en informe le client.

Lorsque vous exécutez le code ci-dessus et que vous entrez un nom, un numéro de téléphone et un messagele message texte sera envoyé au numéro de téléphone mobile que vous avez spécifié (qui, dans ce cas, serait codé en dur sur le téléphone portable de l'agent immobilier).

Voici le résultat du SMS envoyé avec succès !

Conclusion

J'espère que ce tutoriel vous a aidé à démarrer avec les API SMS de Vonage. Si vous avez des questions ou des commentaires sur notre API SMS, rejoignez-nous sur le forum Slack des développeurs de Vonage ou envoyez-moi un Tweet sur Twitteret je vous répondrai. Encore une fois, le code source complet de cette application peut être trouvé dans notre Vonage Community repo. Merci encore pour votre lecture, et je vous donne rendez-vous pour la prochaine !