Im ersten Teil haben wir die Ajax-Funktionalität mit Hilfe von jQuery “zu Fuß” implementiert und haben nur die einfachsten Mittel verwendet. In diesem zweiten Teil wollen wir das nun mit Hilfe des ASP.NET MVC3 Frameworks implementieren, welches uns einiges an Arbeit abnimmt.

Das schöne an der dritten Version des MVC Frameworks ist, dass Microsoft hier schon einige helfende Elemente zum Validieren von Clientangaben eingebaut hat, die wir oft mit nur einer kleinen Zeile Code oder einem Attribut aktivieren können.

Fangen wir also mit unserem Model an und erweitern es um die neuen Attribute die uns das Framework zur Verfügung stellt:

public class RegisterModel2 {

    [Required(AllowEmptyStrings = false,
                ErrorMessage = "Bitte geben Sie einen Benutzernamen an!")]
    [DisplayName("Benutzername")]
    [Remote("ValidateUsername", "Validation")]
    public String UserName { get; set; }

    [Required(AllowEmptyStrings = false,
                ErrorMessage = "Bitte geben Sie eine Emailadresse an!")]
    [DisplayName("E-Mail Adresse")]
    [Remote("ValidateEmail", "Validation")]
    public String UserMail { get; set; }

    [Required(AllowEmptyStrings = false,
                ErrorMessage = "Bitte geben Sie ein Passwort an!")]
    [DisplayName("Passwort")]
    [DataType(DataType.EmailAddress)]
    [Remote("ValidatePassword", "Validation")]
    public String UserPass { get; set; }

    [Required(AllowEmptyStrings = false,
                ErrorMessage = "Bitte wiederholen Sie ihr Passwort!")]
    [Compare("UserPass", ErrorMessage="Die Passwörter stimmen nicht überein!")]
    [DisplayName("Passwort wiederholen")]
    public String UserPass2 { get; set; }
}



 
Wie man sieht sind nun einige Attribute dazugekommen, die Eigenschaften der Klasse an sich haben sich aber nicht verändert! Aber mal langsam, was bedeuten diese Attribute eigentlich?

Required

Markiert die Eigenschaft als Pflichtfeld. Durch setzen dieses Attributs wird beim Absenden des Formulars automatisch geprüft ob diesem Feld ein Wert zugewiesen wurde, falls nicht wird eine Fehlermeldung generiert.
Durch die Option AllowEmptyStrings = false sorgen wir dafür, dass auch Werte die nur als Leerzeichen bestehen ebenfalls Fehler auslösen.
Mit dem Setzen der ErrorMessage Eigenschaft können wir eine Eigene Fehlermeldung definieren, die statt der Standardmeldung angezeigt wird. Lässt man diese Eigenschaft weg wird eine Meldung generiert die ca. so ausschaut: “Das Feld „FELDNAME“ ist erforderlich.”


DisplayName

Dieses Attribut haben wir auch schon in dem Letzten Teil benutzt. Dieses sorgt dafür dass wir den Namen für das Eingabefeld, dass der Benutzer später im Browser zu sehen bekommt bereits im Model definieren können.


Remote

Durch dieses Attribut definieren wir welche Methode und welcher Controller für das Validieren der Eigenschaft verantwortlich ist. Erst wird die Action und als zweiter Parameter der Controller angegeben. Wenn der Benutzer später Eingaben in das Textfeld tätigt, wird diese Action aufgerufen und der eingegebene Wert als Parameter übergeben, sehr ähnlich wie wir es in Teil 1 gemacht haben, aber später mehr dazu.


DataType

Damit kann man den Inhalt bestimmen was einem beim Validieren helfen kann.


Compare

Mit diesem Attribut können wir angeben, dass diese Eigenschaft den gleich Wert haben muss wie eine andere. Dies wird dann automatisch von jQuery überprüft, somit müssen wir nicht mehr machen als dieses Attribut zu setzen.
Als Parameter übergeben wir den Namen der Eigenschaft mit der der Wert verglichen werden soll und, als zweiten setzen wir eine eigene Fehlermeldung damit eine vernünftige Fehlermeldung angezeigt wird.



Damit haben wir unser Model fertiggestellt, nun schauen wir uns an was wir an unserer View verändern müssen.
Die gute Nachricht ist, dass wir den kompletten JavaScript/jQuery Teil streichen können, da das für uns alles automatisch geregelt wird, so sieht nun unsere View aus:
 
    @using (Html.BeginForm("Submit", "Validation")) {
        <table border="1">
            <tr><td>@Html.LabelFor(model => model.UserName):</td>
                <td>@Html.TextBoxFor(model => model.UserName)</td>
                <td>@Html.ValidationMessageFor(model => model.UserName)</td>
            </tr>
            <tr><td>@Html.LabelFor(model => model.UserMail):</td>
                <td>@Html.TextBoxFor(model => model.UserMail)</td>
                <td>@Html.ValidationMessageFor(model => model.UserMail)</td>
            </tr>
            <tr><td>@Html.LabelFor(model => model.UserPass):</td>
                <td>@Html.TextBoxFor(model => model.UserPass)</td>
                <td>@Html.ValidationMessageFor(model => model.UserPass)</td>
            </tr>
            <tr><td>@Html.LabelFor(model => model.UserPass2):</td>
                <td>@Html.TextBoxFor(model => model.UserPass2)</td>
                <td>@Html.ValidationMessageFor(model => model.UserPass2)</td>
            </tr>
            <tr><td> </td>
                <td><input id="submit_form_button" type="submit"
                            value="Registrierung abschicken" /></td>
                <td> </td>
            </tr>
        </table>
    }



 
Wenn ihr euch den Code anschaut, werdet ihr feststellen, dass sich eigentlich nicht getan hat. Das Einzige was sich verändert hat ist dass nun das Span in dem wir im letzten Teil die Fehler ausgegeben haben verschwunden ist und stattdessen
@Html.ValidationMessageFor(model => model.xxxxx)
aufgetaucht. Wie man sich auch schon von dem Namen ableiten kann wird hier eine Validierungsnachricht angezeigt, also mit anderen Worten die Fehlermeldung die bei der Validierung dieses Feldes entsteht. Diese Fehlermeldungen haben wir zum Teil schon über die Attribute im Model definiert.
Das wars auch schon mit Änderungen.  super oder? Wir haben nun einen Haufen Code rausgeworfen, ein paar Attribute eingefügt und nicht eine Zeile JavaScript geschrieben – perfekt 
Aber noch sind wir nicht ganz fertig, denn wir haben nun gar nicht die Regeln für die Validierung des Benutzernamen, der Emailadresse und des Passworts implementiert.
Wenn ihr aufgepasst habt werdet ihr euch daran erinnern, dass wir das Attribut [Remote] verwendet haben und dort als Parameter den Namen einer Action angaben, an die die Informationen zur Validierung gesendet werden sollten.
Diese Actions müssen wir nun natürlich in unserem Validation Controller implementieren, zu unserem Glück unterscheiden sich diese Methoden nur minimal von denen die wir bereits im letzten Teil erstellt haben:






Error: Not Found
The requested URL / was not found on this server.



Oben ist der Ausschnitt zu sehen, der für das Benutzername-Eingabefeld verantwortlich ist inklusive dem dazugehörigen Label und dem Validierungstext.
Auffällig ist, dass kein JavaScript generiert wurde, sondern das Input-Element mit zusätzlichen Tags versehen wurde, die aber nur für jQuery von Bedeutung sind. Andere Applikationen oder Frameworks werden dadurch also nicht beeinflusst, diese ignorieren einfach diese für sie unbekannte Attribute.
Wenn man die Attribute etwas genauer betrachtet wird man einiges aus unserem Model wiederfinden, wie zum Beispiel unsere dort definierte Fehlermeldung.
Nun bleibt nur noch eine Kleinigkeit zu tun, nämlich das nötige CSS zu schreiben dass mit der jQuery Validierung zusammenspielt und die nötigen JavaScript Dateien zu importieren.
Fangen wir mit dem Importieren der JavaScript Bibliotheken an. Wenn ihr ein neues MVC3 Projekt anlegt habt ihr schon alle Dateien die nötig sind bereits in eurem Scriptordner. Öffnet die “_Layout.cshtml” und fügt (falls noch nicht vorhanden) folgende Imports hinzu:






Error: Not Found
The requested URL / was not found on this server.



Diese Imports werden nun durch diese Mastervorlage in jede View eingebunden. Natürlich könnt ihr diese Imports auch explizit nur in die View schreiben in der diese auch benötigt werden, das wäre sogar vorteilhafter denke ich.
Zu guter Letzt kümmern wir uns um das CSS. Auch hier generiert euch Visual Studio das nötige CSS wenn ihr ein neues MVC Projekt anlegt, auch wenn ihr als Vorlage ein leeres MVC Projekt wählt. In dem Ordner Content werdet ihr eine Datei namens Site.css finden in der die CSS Klassen für die Validierung stehen:






Error: Not Found
The requested URL / was not found on this server.



jQuery greift auf diese Klassen zurück um das Aussehen der Eingabefelder entsprechend dem Validierungsergebnis anzupassen. Hier könnt ihr nun eure Eigenen Änderungen vornehmen und die Visualisierung euren Wünschen anpassen.
Ich habe hier noch, um das Beispiel aus Teil 1 nicht aus den Augen zu verlieren die CSS Klasse etwas erweitert um das Aussehen anzugleichen:






Error: Not Found
The requested URL / was not found on this server.



Wenn man die Applikation nun startet funktioniert das Beispiel dem aus Teil 1 sehr ähnlich:

Damit haben wir es eigentlich schon geschafft. Zum Schluss noch ein kleiner Hinweis. Natürlich ist dieser Weg um einiges einfacher, aber es gibt auch einen kleinen Haken, nämlich dass das Framework begrenzt ist. Das bedeutet, dass man nicht alles darüber schnell und ohne selber Code zu schreiben lösen kann, viele Anforderungen müssen immer noch von Hand oder mit Hilfe von anderen Frameworks implementiert werden.
Das erweiterte Demoprojekt aus Teil 1 gibts hier: Download [VS2010 c#]
<< Teil 1