Erstellen einer ASP.NET MVC-Anwendung zum Senden von SMS-Nachrichten

Dieser Artikel wurde im April 2025 aktualisiert.

Intro

Hallo zusammen! Michael Crump hier, und was mich daran reizt, eine neue Technologie zu erlernen, ist, ein mögliches Szenario zu verstehen, für das ein Endbenutzer sie verwenden würde, und zu wissen, wie man die Lösung als Entwickler aufbauen kann.

Ich glaube, dass reale Szenarien wichtig sind, um zu verstehen, wie man mit einem Produkt (oder in unserem Fall einer API) arbeitet, weil sie die Komplexität und Unvorhersehbarkeit realer Probleme, mit denen wir konfrontiert werden, aufzeigen können, um kritisches Denken darüber anzuregen, wie wir sie lösen könnten.

Vor diesem Hintergrund beschloss ich, eine Webanwendung zu entwickeln, die simuliert, dass ein Endbenutzer ein Haus findet, an dem er interessiert ist, und ein Formular abschickt, damit ein Immobilienmakler eine SMS mit den Details erhält. Eine einfache Benutzeroberfläche der Anwendung ist unten abgebildet:

OK, fangen wir mit der Erstellung der App an!

Hinweis: Den vollständigen Quellcode für diese Anwendung finden Sie in unserem Vonage-Community-Repositorium.

Einrichten

Das Projekt erstellen

Beginnen Sie mit dem Start von Visual Studio (Community Edition oder höher) und wählen Sie Ein neues Projekt erstellenund wählen Sie ASP.NET Core Web App (Model-View-Controller) wie unten gezeigt. Ich werde in Kürze mehr Informationen darüber geben, was MVC ist.

Geben Sie Ihrem Projekt einen Namen (Beispiel: SalesLeads) und drücken Sie Weiter. Stellen Sie sicher, dass das Framework auf .NET 8.0 eingestellt ist, belassen Sie die anderen Optionen auf ihren Standardeinstellungen und drücken Sie auf Erstellen Schaltfläche.

Unter Lösungs-Explorermit der rechten Maustaste auf Abhängigkeiten und wählen Sie NuGet-Pakete verwalten. Wählen Sie nun die Option durchsuchen. und suchen Sie nach Vonage. Sie sehen dann Vonage angezeigt und drücken Sie installieren. auf die neueste stabile Version (derzeit 7.17.0).

Was ist MVC, und warum sollten wir es verwenden?

Bevor wir uns dem Code zuwenden, möchte ich einen grundlegenden Überblick über MVC geben, damit Sie besser verstehen, warum wir dieses Muster heute für Webanwendungen verwenden. Kurz gesagt, MVC steht für Model-View-Controller, ein Entwurfsmuster, das sicherstellt, dass Applikationen gut aufgebaut und für zukünftige Entwickler, die in der Codebasis arbeiten, einfach zu testen und zu warten sind.

Modelle: Sie stellen die Daten der Anwendung dar.

Views: Stellt das angezeigte HTML (oder das, was der Endbenutzer sieht) der laufenden Anwendung dar.

Controller: Sie stellen die Geschäftslogik der Anwendung dar.

Mit einem grundlegenden Verständnis des Musters können wir nun unsere Anwendung erstellen.

Beginnend mit dem Modell (Daten)

Rechtsklick auf Modelle im Projektmappen-Explorer und Hinzufügen eine neue Klasse. Wir geben der Klasse den Namen Lead.cs und drücken hinzufügen..

Wir werden 4 Informationen einfügen: Den Namen des Kunden, seine Telefonnummer, die Nachricht, die er senden möchte, sowie das Ergebnis des Absendens des Formulars. Auf diese Weise weiß der Endbenutzer, ob die Nachricht erfolgreich abgeschickt wurde oder nicht.

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; }
    }
}

Definieren der Ansicht (UI)

Wir werden jetzt die Seite definieren, die dem Endbenutzer präsentiert wird.

Wählen Sie Ansichten -> Startseite -> und dann Index.cshtml.

Was ist cshtml? Es handelt sich um eine C#-HTML-Datei, die serverseitig von der Razor Markup Engine verwendet wird, um die Webseitendateien für den Browser des Benutzers zu rendern.

Wir beginnen mit der Definition des Datenmodells, das die Vorlagenseite verwenden wird, wie in Zeile 1 unten gezeigt. Als Nächstes erstellen wir ein paar Divs, damit unsere Seite nach dem Rendern schön aussieht (zusammen mit einem Standardtext über das Haus). Dann verwenden wir ASP.NETs BeginForm Erweiterungsmethode von ASP.NET, um auf einfache Weise ein Formular zu erstellen. Mehrere Funktionen sind integriert, darunter eine einfache Möglichkeit zum Hinzufügen von Platzhalter Text hinzuzufügen und das Feld als erforderlich.

@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>

Zum Schluss folgt eine Schaltfläche zum Übermitteln der Daten (über eine POST-Anfrage) sowie eine Stelle, die ausgibt, ob die SMS erfolgreich gesendet wurde oder nicht.

Für Bonuspunkte: Fügen Sie ein Beispielbild Ihres Hauses an folgender Stelle ein ~/Content/Images/house.jpg. :)

Hinzufügen des Controllers (Geschäftslogik)

Wir müssen unseren API-Schlüssel und API-Geheimnis speichern, die unsere Anwendung beim Senden einer SMS verwenden soll. Wir platzieren dies in einem Domain Controller.

Aber zuerst können Sie Ihren aktuellen API-Schlüssel und Ihr API-Geheimnis abrufen, indem Sie das Vonage Entwickler-Portal besuchen und die Schlüssel wie unten gezeigt kopieren und einfügen.

Hinweis: Ich habe die Geheimnisse zu dieser Klasse hinzugefügt, um das Verständnis des Musters zu erleichtern. Bitte sichern Sie Ihre Geheimnisse, wenn Sie eine Produktionsanwendung veröffentlichen, indem Sie entweder Umgebungsvariablen oder etwas wie Azure Key Vault verwenden.

Klicken Sie mit der rechten Maustaste auf die Lösung und fügen Sie einen neuen Ordner namens Domänehinzu; erstellen Sie innerhalb dieses Ordners eine neue Klassenbibliothek mit dem Namen . Credentials.cs mit dem folgenden Inhalt.

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

Als Nächstes schreiben wir die Logik, die die SMS-Nachricht versendet.

Wählen Sie Steuerungen und dann HomeController.cs und verwenden Sie den folgenden Codeschnipsel. Sie müssen die using SalesLeads.Models; auf den Namen Ihres Projekts ändern, um Ihr Modell Daten.

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);
        }
    }
}

Die letzte If...then Anweisung prüft, ob die SMS erfolgreich gesendet wurde und meldet den Status an den Client zurück.

Wenn Sie den obigen Code ausführen und eine Name, Telefonnummer und Nachrichteingeben, wird die Textnachricht an die von Ihnen angegebene Handynummer gesendet (die in diesem Fall fest mit dem Mobiltelefon des Immobilienmaklers verbunden ist).

Nachfolgend sehen Sie das Ergebnis der erfolgreich gesendeten SMS!

Schlussfolgerung

Ich hoffe, dieses Tutorial hat Ihnen den Einstieg in die SMS APIs von Vonage erleichtert. Wenn Sie Fragen oder Anregungen zu unserer SMS API haben, können Sie uns auf dem Vonage Entwickler-Slack oder senden Sie mir einen Tweet auf Twitterund ich werde auf Sie zurückkommen. Den vollständigen Quellcode für diese Anwendung finden Sie auch in unserem Vonage Community Repositorium. Nochmals vielen Dank fürs Lesen, und wir sehen uns beim nächsten Mal!