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

2023-07-13

In der dritten Iteration fügen wir eine 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 (VB)

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 Personenliste speichern.

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

Iteration Nr. 1: Erstellen Sie die Anwendung. In der ersten Iteration erstellen wir den Contact Manager auf die einfachste Weise. Wir fügen Unterstützung für grundlegende Datenbankvorgänge hinzu: Erstellen, Lesen, Aktualisieren und Löschen (CRUD).
Iteration Nr. 2: Sorgen Sie dafür, dass die Anwendung gut aussieht. In dieser Iteration verbessern wir das Erscheinungsbild der Anwendung, indem wir die Standardansicht ASP.NET MVC master Seite und cascading Stylesheet ändern.
Iteration Nr. 3: Hinzufügen der Formularvalidierung In der dritten Iteration fügen wir eine 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 Nr. 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 Dependency Injection-Muster verwendet.
Iteration 5: Erstellen von Komponententests. In der fünften Iteration vereinfachen wir die Wartung und Änderung unserer Anwendung, indem wir Komponententests hinzufügen. 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 Ajax-Unterstützung hinzufügen.

Diese Iteration

In dieser zweiten Iteration der Contact Manager-Anwendung fügen wir grundlegende Formularvalidierung 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 den Controlleraktionen direkt hinzu. Im Allgemeinen ist dies nicht die empfohlene Methode zum Hinzufügen der Validierung zu einer ASP.NET MVC-Anwendung. 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 besser verwaltbar 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. Sie können z. B. den Anwendungsblock der 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 Ansicht "Erstellen"

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, die zum Anzeigen von Validierungsmeldungen erforderlich ist. Die Ansicht Erstellen ist in Listing 1 enthalten.

Auflistung 1 : \Views\Contact\Create.aspx

<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of ContactManager.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>
            <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>

    <% End Using %>

</asp:Content>

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 (input) zu formatieren, das vom Html.TextBox()-Hilfsprogramm gerendert wird. Die Validation-summary-errors-Klasse wird verwendet, um die ungeordnete 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.

Auflistung 2 : Controllers\ContactController.vb (Erstellen mit Validierung)

<AcceptVerbs(HttpVerbs.Post)> _
Function Create(<Bind(Exclude:="Id")> ByVal contactToCreate As Contact) As ActionResult
    ' Validation logic
    If contactToCreate.FirstName.Trim().Length = 0 Then
        ModelState.AddModelError("FirstName", "First name is required.")
    End If
    If contactToCreate.LastName.Trim().Length = 0 Then
        ModelState.AddModelError("LastName", "Last name is required.")
    End If
    If (contactToCreate.Phone.Length > 0 AndAlso Not Regex.IsMatch(contactToCreate.Phone, "((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"))
        ModelState.AddModelError("Phone", "Invalid phone number.")
    End If        
    If (contactToCreate.Email.Length > 0 AndAlso  Not Regex.IsMatch(contactToCreate.Email, "^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$"))
        ModelState.AddModelError("Email", "Invalid email address.")
    End If
    If Not ModelState.IsValid Then
        Return View()
    End If

    ' Database logic
    Try
        _entities.AddToContactSet(contactToCreate)
        _entities.SaveChanges()
        Return RedirectToAction("Index")
    Catch
        Return View()
    End Try
End Function

Der Abschnitt validate erzwingt vier verschiedene Validierungsregeln:

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

Wenn ein Verstoß gegen die Validierungsregel 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 http://regexlib.com

Hinzufügen von Validierungslogik zur Bearbeitungsaktion

Die Aktion Edit() 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 so umgestalten, dass 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 sowohl in den Aktionen Create() als auch Edit() aufgerufen wird.

Auflistung 3: Controllers\ContactController.vb

Public Class ContactController
    Inherits System.Web.Mvc.Controller

    Private _entities As New ContactManagerDBEntities()

    Protected Sub ValidateContact(contactToValidate As Contact)
        If contactToValidate.FirstName.Trim().Length = 0 Then
            ModelState.AddModelError("FirstName", "First name is required.")
        End If
        If contactToValidate.LastName.Trim().Length = 0 Then
            ModelState.AddModelError("LastName", "Last name is required.")
        End If
        If (contactToValidate.Phone.Length > 0 AndAlso Not Regex.IsMatch(contactToValidate.Phone, "((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"))
            ModelState.AddModelError("Phone", "Invalid phone number.")
        End If        
        If (contactToValidate.Email.Length > 0 AndAlso  Not Regex.IsMatch(contactToValidate.Email, "^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$"))
            ModelState.AddModelError("Email", "Invalid email address.")
        End If
    End Sub

    '
    ' GET: /Contact

    Function Index() As ActionResult
        Return View(_entities.ContactSet.ToList())
    End Function

    '
    ' GET: /Contact/Create

    Function Create() As ActionResult
        Return View()
    End Function

    '
    ' POST: /Contact/Create

    <AcceptVerbs(HttpVerbs.Post)> _
    Function Create(<Bind(Exclude:="Id")> ByVal contactToCreate As Contact) As ActionResult
        ' Validation logic
        ValidateContact(contactToCreate)
        If Not ModelState.IsValid Then
            Return View()
        End If

        ' Database logic
        Try
            _entities.AddToContactSet(contactToCreate)
            _entities.SaveChanges()
            Return RedirectToAction("Index")
        Catch
            Return View()
        End Try
    End Function

    '
    ' GET: /Contact/Edit/5

    Function Edit(ByVal id As Integer) As ActionResult
        Dim contactToEdit = (from c in _entities.ContactSet _
                           where c.Id = id _
                           select c).FirstOrDefault()

        Return View(contactToEdit)
    End Function

    '
    ' POST: /Contact/Edit/5

    <AcceptVerbs(HttpVerbs.Post)> _
    Function Edit(ByVal contactToEdit As Contact) As ActionResult
        ' Validation logic
        ValidateContact(contactToEdit)
        If Not ModelState.IsValid Then
            Return View()
        End If

        ' Database logic
        Try
            Dim 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()
        End Try
    End Function

    '
    ' GET: /Contact/Delete/5

    Function Delete(ByVal id As Integer) As ActionResult
        Dim contactToDelete = (from c in _entities.ContactSet _
                           where c.Id = id _
                           select c).FirstOrDefault()

        Return View(contactToDelete)
    End Function

    '
    ' POST: /Contact/Delete/5

    <AcceptVerbs(HttpVerbs.Post)> _
    Function Delete(ByVal contactToDelete As Contact) As ActionResult
        Try
            Dim 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()
        End Try
    End Function

End Class

Zusammenfassung

In dieser Iteration haben wir der Contact Manager-Anwendung eine 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

Freigeben über

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

Erstellen einer Kontaktverwaltung ASP.NET MVC-Anwendung (VB)

Diese Iteration

Hinzufügen der Validierung zur Ansicht "Erstellen"

Hinzufügen von Validierungslogik zur Create-Aktion

Hinzufügen von Validierungslogik zur Bearbeitungsaktion

Zusammenfassung

Feedback

Zusätzliche Ressourcen