Hinzufügen der Validierung zum Modell: Implementieren der unterstützung, die zum Aktivieren der Eingabeüberprüfung erforderlich ist

von Scott Hanselman

Dies ist ein Anfängertutorial, in dem die Grundlagen der ASP.NET MVC vorgestellt werden. Sie erstellen eine einfache Webanwendung, die Lese- und Schreibvorgänge aus einer Datenbank ermöglicht. Besuchen Sie das ASP.NET MVC Learning Center , um weitere ASP.NET MVC-Tutorials und -Beispiele zu finden.

In diesem Abschnitt implementieren wir die unterstützung, die erforderlich ist, um die Eingabeüberprüfung in unserer Anwendung zu ermöglichen. Wir stellen sicher, dass unsere Datenbankinhalte immer korrekt sind, und stellen Endbenutzern hilfreiche Fehlermeldungen bereit, wenn sie versuchen, Movie-Daten einzugeben, die ungültig sind. Zunächst fügen wir der Movie-Klasse eine kleine Validierungslogik hinzu.

Klicken Sie mit der rechten Maustaste auf den Ordner Modell, und wählen Sie Klasse hinzufügen aus. Nennen Sie Ihre Klasse Movie.

Als wir zuvor das Movie Entity Model erstellt haben, hat die IDE eine Movie-Klasse erstellt. Tatsächlich kann sich ein Teil der Movie-Klasse in einer Datei und in einer anderen befinden. Dies wird als Partielle Klasse bezeichnet. Wir erweitern die Movie-Klasse aus einer anderen Datei.

Wir erstellen eine partielle Filmklasse, die auf eine "Buddy-Klasse" mit einigen Attributen verweist, die dem System Validierungshinweise geben. Wir markieren den Titel und den Preis als erforderlich und bestehen auch darauf, dass der Preis innerhalb eines bestimmten Bereichs liegt. Klicken Sie mit der rechten Maustaste auf den Ordner Models, und wählen Sie Klasse hinzufügen aus. Nennen Sie Ihre Klasse Movie, und klicken Sie auf die Schaltfläche OK. So sieht unsere partielle Movie-Klasse aus.

using System.ComponentModel.DataAnnotations;

namespace Movies.Models
{
    [MetadataType(typeof(MovieMetadata))]
    public partial class Movie
    {
        class MovieMetadata
        {
            [Required(ErrorMessage="Titles are required")]
            public string Title { get; set; }

            [Range(5,100,ErrorMessage ="Movies cost between $5 and $100.")]
            public decimal Price { get; set; }
        }
    }
}

Re-Run Ihre Anwendung, und versuchen Sie, einen Film mit einem Preis von über 100 einzugeben. Nachdem Sie das Formular übermittelt haben, wird eine Fehlermeldung angezeigt. Der Fehler wird auf der Serverseite abgefangen und tritt auf, nachdem das Formular POSTed wurde. Beachten Sie, dass ASP.NET integrierten HTML-Hilfsprogramme von MVC intelligent genug waren, um die Fehlermeldung anzuzeigen und die Werte für uns in den Textfeldelementen beizubehalten:

Dies funktioniert hervorragend, aber es wäre schön, wenn wir den Benutzer auf der Clientseite sofort informieren könnten, bevor der Server eingebunden wird.

Lassen Sie uns eine clientseitige Validierung mit JavaScript aktivieren.

Hinzufügen von clientseitiger Validierung

Da unsere Movie-Klasse bereits über einige Validierungsattribute verfügt, müssen wir nur einige JavaScript-Dateien zur Create.aspx-Ansichtsvorlage hinzufügen und eine Codezeile hinzufügen, um die clientseitige Überprüfung zu ermöglichen.

Wechseln Sie in VWD in den Ordner Ansichten/Film, und öffnen Sie Create.aspx.

Öffnen Sie den Ordner Skripts im Projektmappen-Explorer, und ziehen Sie die folgenden drei Skripts in das <Haupttag>.

• MicrosoftAjax.js
• MicrosoftMvcValidation.js

Diese Skriptdateien sollen in dieser Reihenfolge angezeigt werden.

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>

Fügen Sie außerdem diese einzelne Zeile über html.BeginForm hinzu:

<% Html.EnableClientValidation(); %>

Hier sehen Sie den Code, der in der IDE angezeigt wird.

Führen Sie Ihre Anwendung aus, besuchen Sie /Movies/Create erneut, und klicken Sie auf Erstellen, ohne Daten einzugeben. Die Fehlermeldungen werden sofort ohne den Seitenblitz angezeigt, den wir dem Senden von Daten an den Server zuordnen. Dies liegt daran, dass ASP.NET MVC jetzt die Eingabe sowohl auf dem Client (mit JavaScript) als auch auf dem Server überprüft.

Das sieht gut aus! Nun fügen wir der Datenbank eine weitere Spalte hinzu.

ZurückWeiter