Iteration 3 – Hinzufügen der Formularüberprüfung (C#)

In der dritten Iteration fügen wir die grundlegende Formularüberprüfung hinzu. Wir verhindern, dass Personen ein Formular einreichen, ohne die erforderlichen Formularfelder ausfüllen zu müssen. Außerdem überprüfen wir E-Mail-Adressen und Telefonnummern.

Erstellen einer Kontaktverwaltung ASP.NET MVC-Anwendung (C#)

In dieser Reihe von Tutorials erstellen wir eine gesamte Kontaktverwaltungsanwendung von Anfang bis Ende. Mit der Contact Manager-Anwendung können Sie Kontaktinformationen – Namen, Telefonnummern und E-Mail-Adressen – für eine Liste von Personen speichern.

Wir erstellen die Anwendung über mehrere Iterationen. Mit jeder Iteration verbessern wir die Anwendung schrittweise. Das Ziel dieses Ansatzes für mehrere Iterationen besteht darin, ihnen zu ermöglichen, den Grund für jede Änderung zu verstehen.

Iteration #1: Erstellen Sie die Anwendung. In der ersten Iteration erstellen wir den Contact Manager auf einfachste Weise. Wir fügen Unterstützung für grundlegende Datenbankvorgänge hinzu: Erstellen, Lesen, Aktualisieren und Löschen (CRUD).
Iteration #2: Lassen Sie die Anwendung schön aussehen. In dieser Iteration verbessern wir das Erscheinungsbild der Anwendung, indem wir die Standardansicht ASP.NET MVC master Seite und cascading Stylesheet ändern.
Iteration #3: Hinzufügen der Formularüberprüfung. In der dritten Iteration fügen wir die grundlegende Formularüberprüfung hinzu. Wir verhindern, dass Personen ein Formular einreichen, ohne die erforderlichen Formularfelder ausfüllen zu müssen. Außerdem überprüfen wir E-Mail-Adressen und Telefonnummern.
Iteration #4: Machen Sie die Anwendung lose gekoppelt. In dieser vierten Iteration nutzen wir mehrere Softwareentwurfsmuster, um die Verwaltung und Änderung der Contact Manager-Anwendung zu vereinfachen. Beispielsweise umgestalten wir unsere Anwendung so, dass sie das Repositorymuster und das Abhängigkeitsinjektionsmuster verwendet.
Iteration #5: Erstellen von Komponententests. In der fünften Iteration erleichtern wir die Wartung und Änderung unserer Anwendung durch Hinzufügen von Komponententests. Wir simulieren unsere Datenmodellklassen und erstellen Komponententests für unsere Controller und die Validierungslogik.
Iteration #6: Verwenden Sie die testgesteuerte Entwicklung. In dieser sechsten Iteration fügen wir unserer Anwendung neue Funktionen hinzu, indem wir zuerst Komponententests schreiben und Code für die Komponententests schreiben. In dieser Iteration fügen wir Kontaktgruppen hinzu.
Iteration #7: Hinzufügen von Ajax-Funktionen. In der siebten Iteration verbessern wir die Reaktionsfähigkeit und Leistung unserer Anwendung, indem wir Unterstützung für Ajax hinzufügen.

Diese Iteration

In dieser zweiten Iteration der Contact Manager-Anwendung fügen wir die grundlegende Formularüberprüfung hinzu. Wir verhindern, dass Personen einen Kontakt übermitteln, ohne Werte für erforderliche Formularfelder einzugeben. Außerdem überprüfen wir Telefonnummern und E-Mail-Adressen (siehe Abbildung 1).

Abbildung 01: Ein Formular mit Validierung (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

In dieser Iteration fügen wir die Validierungslogik direkt zu den Controlleraktionen hinzu. Im Allgemeinen ist dies nicht die empfohlene Methode, um eine Validierung einer ASP.NET MVC-Anwendung hinzuzufügen. Ein besserer Ansatz besteht darin, die Validierungslogik einer Anwendung in einer separaten Dienstebene zu platzieren. In der nächsten Iteration wird die Contact Manager-Anwendung umgestalten, um die Anwendung verwaltbarer zu machen.

In dieser Iteration schreiben wir den gesamten Validierungscode manuell, um die Dinge einfach zu halten. Anstatt den Validierungscode selbst zu schreiben, könnten wir ein Validierungsframework nutzen. Beispielsweise können Sie den Microsoft Enterprise Library Validation Application Block (VAB) verwenden, um die Validierungslogik für Ihre ASP.NET MVC-Anwendung zu implementieren. Weitere Informationen zum Validierungsanwendungsblock finden Sie unter:

http://msdn.microsoft.com/library/dd203099.aspx

Hinzufügen der Validierung zur Erstellungsansicht

Beginnen wir mit dem Hinzufügen von Validierungslogik zur Ansicht Erstellen. Da wir glücklicherweise die Ansicht Erstellen mit Visual Studio generiert haben, enthält die Ansicht Erstellen bereits die gesamte Logik der Benutzeroberfläche, um Validierungsmeldungen anzuzeigen. Die Ansicht Erstellen ist in Listing 1 enthalten.

Eintrag 1 : \Views\Contact\Create.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ContactManager.Models.Contact>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>Create</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <%= Html.ValidationSummary() %>

    <% using (Html.BeginForm()) {%>

        <fieldset class="fields">
            <legend>Create New Contact</legend>
            <p>
                <label for="FirstName">First Name:</label>
                <%= Html.TextBox("FirstName") %>
                <%= Html.ValidationMessage("FirstName", "*") %>
            </p>
            <p>
                <label for="LastName">Last Name:</label>
                <%= Html.TextBox("LastName") %>
                <%= Html.ValidationMessage("LastName", "*") %>
            </p>
            <p>
                <label for="Phone">Phone:</label>
                <%= Html.TextBox("Phone") %>
                <%= Html.ValidationMessage("Phone", "*") %>
            </p>
            <p>
                <label for="Email">Email:</label>
                <%= Html.TextBox("Email") %>
                <%= Html.ValidationMessage("Email", "*") %>
            </p>
            <p class="submit">
                <input type="submit" value="Create" />
            </p>
        </fieldset>

    <% } %>

</asp:Content>

Beachten Sie den Aufruf der Html.ValidationSummary()-Hilfsmethode, der direkt über dem HTML-Formular angezeigt wird. Wenn Validierungsfehlermeldungen vorhanden sind, zeigt diese Methode Validierungsmeldungen in einer Aufzählung an.

Beachten Sie außerdem die Aufrufe von Html.ValidationMessage(), die neben jedem Formularfeld angezeigt werden. Das ValidationMessage()-Hilfsprogramm zeigt eine individuelle Validierungsfehlermeldung an. Im Fall von Listing 1 wird ein Sternchen angezeigt, wenn ein Validierungsfehler vorliegt.

Schließlich rendert das Html.TextBox()-Hilfsprogramm automatisch eine Cascading StyleSheet-Klasse, wenn der vom Hilfsprogramm angezeigten Eigenschaft ein Validierungsfehler zugeordnet ist. Das Html.TextBox()-Hilfsprogramm rendert eine Klasse namens input-validation-error.

Wenn Sie eine neue ASP.NET MVC-Anwendung erstellen, wird automatisch ein Stylesheet mit dem Namen Site.css im Ordner Inhalt erstellt. Dieses Stylesheet enthält die folgenden Definitionen für CSS-Klassen im Zusammenhang mit der Darstellung von Validierungsfehlermeldungen:

.field-validation-error
{
    color: #ff0000;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

Die field-validation-error-Klasse wird verwendet, um die ausgabe zu formatieren, die vom Html.ValidationMessage()-Hilfsprogramm gerendert wird. Die input-validation-error-Klasse wird verwendet, um das Textfeld (Eingabe) zu formatieren, das vom Html.TextBox()-Hilfsprogramm gerendert wird. Die validation-summary-errors-Klasse wird verwendet, um die nicht sortierte Liste zu formatieren, die vom Html.ValidationSummary()-Hilfsprogramm gerendert wird.

Hinweis

Sie können die in diesem Abschnitt beschriebenen Stylesheetklassen ändern, um die Darstellung von Validierungsfehlermeldungen anzupassen.

Hinzufügen von Validierungslogik zur Create-Aktion

Im Moment zeigt die Ansicht Erstellen keine Validierungsfehlermeldungen an, da wir die Logik zum Generieren von Nachrichten nicht geschrieben haben. Um Validierungsfehlermeldungen anzuzeigen, müssen Sie die Fehlermeldungen zu ModelState hinzufügen.

Hinweis

Die UpdateModel()-Methode fügt ModelState automatisch Fehlermeldungen hinzu, wenn ein Fehler beim Zuweisen des Werts eines Formularfelds zu einer Eigenschaft auftritt. Wenn Sie beispielsweise versuchen, die Zeichenfolge "apple" einer BirthDate-Eigenschaft zuzuweisen, die DateTime-Werte akzeptiert, fügt die UpdateModel()-Methode ModelState einen Fehler hinzu.

Die geänderte Create()-Methode in Listing 2 enthält einen neuen Abschnitt, der die Eigenschaften der Contact-Klasse überprüft, bevor der neue Kontakt in die Datenbank eingefügt wird.

Listing 2 – Controllers\ContactController.cs (Erstellen mit Validierung)

//
// POST: /Contact/Create

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create([Bind(Exclude = "Id")] Contact contactToCreate)
{
    // Validation logic
    if (contactToCreate.FirstName.Trim().Length == 0)
        ModelState.AddModelError("FirstName", "First name is required.");
    if (contactToCreate.LastName.Trim().Length == 0)
        ModelState.AddModelError("LastName", "Last name is required.");
    if (contactToCreate.Phone.Length > 0 && !Regex.IsMatch(contactToCreate.Phone, @"((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"))
        ModelState.AddModelError("Phone", "Invalid phone number.");
    if (contactToCreate.Email.Length > 0 && !Regex.IsMatch(contactToCreate.Email, @"^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$"))
        ModelState.AddModelError("Email", "Invalid email address.");
    if (!ModelState.IsValid)
        return View();

    // Database logic
    try
    {
        _entities.AddToContactSet(contactToCreate);
        _entities.SaveChanges();
        return RedirectToAction("Index");
    }
    catch
    {
        return View();
    }
}

Der Abschnitt validate erzwingt vier verschiedene Validierungsregeln:

Die FirstName-Eigenschaft muss eine Länge größer als 0 (und darf nicht nur aus Leerzeichen bestehen)
Die LastName-Eigenschaft muss eine Länge größer als 0 (und darf nicht nur aus Leerzeichen bestehen)
Wenn die Phone-Eigenschaft einen Wert aufweist (hat eine Länge größer als 0), muss die Phone-Eigenschaft mit einem regulären Ausdruck übereinstimmen.
Wenn die Email-Eigenschaft über einen Wert verfügt (hat eine Länge größer als 0), muss die Email-Eigenschaft mit einem regulären Ausdruck übereinstimmen.

Wenn eine Überprüfungsregelverletzung vorliegt, wird ModelState mithilfe der AddModelError()-Methode eine Fehlermeldung hinzugefügt. Wenn Sie ModelState eine Nachricht hinzufügen, geben Sie den Namen einer Eigenschaft und den Text einer Validierungsfehlermeldung an. Diese Fehlermeldung wird in der Ansicht von den Hilfsmethoden Html.ValidationSummary() und Html.ValidationMessage() angezeigt.

Nachdem die Validierungsregeln ausgeführt wurden, wird die IsValid-Eigenschaft von ModelState überprüft. Die IsValid-Eigenschaft gibt false zurück, wenn Validierungsfehlermeldungen zu ModelState hinzugefügt wurden. Wenn die Überprüfung fehlschlägt, wird das Formular Erstellen mit den Fehlermeldungen erneut angezeigt.

Hinweis

Ich habe die regulären Ausdrücke zum Überprüfen der Telefonnummer und E-Mail-Adresse aus dem Repository für reguläre Ausdrücke unter unter http://regexlib.com

Hinzufügen von Validierungslogik zur Bearbeitungsaktion

Die Aktion Bearbeiten() aktualisiert einen Kontakt. Die Edit()-Aktion muss genau die gleiche Überprüfung wie die Create()-Aktion ausführen. Anstatt denselben Validierungscode zu duplizieren, sollten wir den Kontaktcontroller neu umgestalten, damit sowohl die Aktionen Create() als auch Edit() dieselbe Validierungsmethode aufrufen.

Die geänderte Contact-Controllerklasse ist in Listing 3 enthalten. Diese Klasse verfügt über eine neue ValidateContact()-Methode, die in den Aktionen Create() und Edit() aufgerufen wird.

Eintrag 3: Controller\ContactController.cs

using System.Linq;
using System.Text.RegularExpressions;
using System.Web.Mvc;
using ContactManager.Models;

namespace ContactManager.Controllers
{
    public class ContactController : Controller
    {
        private ContactManagerDBEntities _entities = new ContactManagerDBEntities();

        protected void ValidateContact(Contact contactToValidate)
        {
            if (contactToValidate.FirstName.Trim().Length == 0)
                ModelState.AddModelError("FirstName", "First name is required.");
            if (contactToValidate.LastName.Trim().Length == 0)
                ModelState.AddModelError("LastName", "Last name is required.");
            if (contactToValidate.Phone.Length > 0 && !Regex.IsMatch(contactToValidate.Phone, @"((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"))
                ModelState.AddModelError("Phone", "Invalid phone number.");
            if (contactToValidate.Email.Length > 0 && !Regex.IsMatch(contactToValidate.Email, @"^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$"))
                ModelState.AddModelError("Email", "Invalid email address.");
        }

        public ActionResult Index()
        {
            return View(_entities.ContactSet.ToList());
        }

        public ActionResult Create()
        {
            return View();
        } 

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Create([Bind(Exclude = "Id")] Contact contactToCreate)
        {
            // Validation logic
            ValidateContact(contactToCreate);
            if (!ModelState.IsValid)
                return View();

            // Database logic
            try
            {
                _entities.AddToContactSet(contactToCreate);
                _entities.SaveChanges();
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        public ActionResult Edit(int id)
        {
            var contactToEdit = (from c in _entities.ContactSet
                                   where c.Id == id
                                   select c).FirstOrDefault();

            return View(contactToEdit);
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Edit(Contact contactToEdit)
        {
            ValidateContact(contactToEdit);
            if (!ModelState.IsValid)
                return View();

            try
            {
                var originalContact = (from c in _entities.ContactSet
                                     where c.Id == contactToEdit.Id
                                     select c).FirstOrDefault();
                _entities.ApplyPropertyChanges(originalContact.EntityKey.EntitySetName, contactToEdit);
                _entities.SaveChanges();
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        public ActionResult Delete(int id)
        {
            var contactToDelete = (from c in _entities.ContactSet
                                 where c.Id == id
                                 select c).FirstOrDefault();

            return View(contactToDelete);
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Delete(Contact contactToDelete)
        {
            try
            {
                var originalContact = (from c in _entities.ContactSet
                                       where c.Id == contactToDelete.Id
                                       select c).FirstOrDefault();

                _entities.DeleteObject(originalContact);
                _entities.SaveChanges();
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

    }
}

Zusammenfassung

In dieser Iteration haben wir unserer Contact Manager-Anwendung die grundlegende Formularüberprüfung hinzugefügt. Unsere Validierungslogik verhindert, dass Benutzer einen neuen Kontakt übermitteln oder einen vorhandenen Kontakt bearbeiten, ohne Werte für die Eigenschaften FirstName und LastName anzugeben. Darüber hinaus müssen Die Benutzer gültige Telefonnummern und E-Mail-Adressen angeben.

In dieser Iteration haben wir die Validierungslogik auf einfachste Weise zu unserer Contact Manager-Anwendung hinzugefügt. Die Vermischung unserer Validierungslogik in unsere Controllerlogik wird uns jedoch langfristig Probleme verursachen. Unsere Anwendung ist im Laufe der Zeit schwieriger zu warten und zu ändern.

In der nächsten Iteration werden wir die Validierungslogik und die Datenbankzugriffslogik aus unseren Controllern umgestalten. Wir nutzen mehrere Softwareentwurfsprinzipien, um eine lose gekoppelte und besser verwaltbare Anwendung zu erstellen.

Zurück Weiter

Feedback

War diese Seite hilfreich?

Last updated on 2023-07-13

Freigeben über

Iteration 3 – Hinzufügen der Formularüberprüfung (C#)

Erstellen einer Kontaktverwaltung ASP.NET MVC-Anwendung (C#)

Diese Iteration

Hinzufügen der Validierung zur Erstellungsansicht

Hinzufügen von Validierungslogik zur Create-Aktion

Hinzufügen von Validierungslogik zur Bearbeitungsaktion

Zusammenfassung

Feedback

Zusätzliche Ressourcen