BigBastis Blog About Me & my Digital Lifestyle

Benutzerregistrierung mit ASP.NET MVC und jQuery Teil 1

Wer heute Webanwendungen erstellt kommt einfach nicht drumherum JavaScript zu verwenden um dem Benutzer zb. die Eingabe von Daten in ein Formular zu erleichtern und zB. Hinweise während der Eingabe anzuzeigen.

Leider ist JavaScript bei vielen nicht wirklich beliebt und die meisten versuchen wann immer es geht darauf zu verzichten, und das auch aus guten Gründen, denn ähnlich wie mit dem HTML Standard arbeiten die verschiedenen Browser in einigen Bereichen etwas eigenwillig, das kann einen schon mal zur Verzweifelung treiben.

Das haben sich auch viele andere gedacht und so gibt es inzwischen viele Frameworks die dem Entwickler viel Arbeit abnehmen und sich um diese fiesen Sachen wie die Kompabilität zu Browsern kümmern. In meinem Beispiel hier möchte ich euch das JavaScript Framework jQuery vorstellen.

Warum jQuery?

jQuery ist inzwischen in der Version 1.5.1 verfügbar und ist kompatibel zu allen Browsern, desweiteren ist die Community sehr groß und es existieren hunderte von Plugins die ich nutzen könnt. Aber die wirklich guten Gründe sind, dass es über eine sehr sehr gute Dokumentation verfügt, alle Browser inklusive des IE9 unterstützt und offiziell von Microsoft supportet wird. Wenn ihr also beispielsweise ein neues ASP.NET (MVC) Projekt erstellt werdet ihr feststellen, dass ihr im Scripts-Ordner bereits die jQuery Scripte hinterlegt habt.

Was macht dieses Framework eigentlich?

jQuery wie der Name es schon sagt zeigt seine ganze Stärke in der Auswahl bzw. der Selektion von Webseitenelementen im DOM, so kann man mit einfachen Einzeilern ganze Webseiten-Bereiche modifizieren. Außerdem bietet jQuery Funktionen die man häufig nutzt wie zB. Asynchrone Ajax aufrufe oder Animationen von Feldern. Aber gut kommen wir zu unserem Beispiel.

Unser Beispiel

Als Beispiel möchte ich hier ein einfaches Registrierungsformular erstellen, dass wir dann mit jQuery aufwerten wollen. Dabei möchte ich hier den manuellen Weg gehen und nicht die in ASP.NET MVC3 integrierten Methoden nutzen, eventuell können wir ja ein einem zweiten Teil dann den anderen Weg darstellen.

Beginnen wir erstmal mit dem Model. Da wir unsere Registrierung simpel halten wollen muss der Benutzer nur drei Angaben machen, nämlich seinen Namen, Email Adresse und ein Passwort. Normalerweise würden wir unser model hier ca so gestalten:

public class RegisterModel {

    [Required]
    [DisplayName("Benutzername")]
    [Remote("CheckUserName", "Validation")]
    public String UserName { get; set; }

    [Required]
    [DisplayName("E-Mail Adresse")]
    [DataType(DataType.EmailAddress)]
    [Remote("CheckUserEmail", "Validation")]
    public String UserMail { get; set; }

    [Required]
    [DisplayName("Passwort")]
    [Remote("CheckUserNPassword", "Validation")]
    public String UserPass { get; set; }

    [Required, Compare("UserPass")]
    [DisplayName("Passwort wiederholen")]
    public String UserPass2 { get; set; }
}

Da wir das aber selber machen wollen und teils clientseitig validieren wollen schwächen wir das mal etwas ab und nehmen alles raus bis auf das DisplayName Attribut:

public class RegisterModel {
    [DisplayName("Benutzername")]
    public String UserName { get; set; }

    [DisplayName("E-Mail Adresse")]
    public String UserMail { get; set; }

    [DisplayName("Passwort")]
    public String UserPass { get; set; }

    [DisplayName("Passwort wiederholen")]
    public String UserPass2 { get; set; }
}

So, nachdem wir das Model nun fertig haben, bauen wir das Projekt ein Mal und erstellen unsere View. Hier habe ich eine simple Tabelle angefertigt, die die nötigen Form-Elemente beinhaltet, die der Benutzer ausfüllen soll:

<div id="register_form">

<div id="headline">Registrierung</div>

�
<form id="registration_form" action="/Register" method="post">

<table border="1">
<tbody>
<tr>
<td>@Html.LabelFor(model => model.UserName):</td>
<td>@Html.TextBoxFor(model => model.UserName)</td>
<td><span id="UserName_error"> </span></td>
</tr>
<tr>
<td>@Html.LabelFor(model => model.UserMail):</td>
<td>@Html.TextBoxFor(model => model.UserMail)</td>
<td><span id="UserMail_error"> </span></td>
</tr>
<tr>
<td>@Html.LabelFor(model => model.UserPass):</td>
<td>@Html.TextBoxFor(model => model.UserPass)</td>
<td><span id="UserPass_error"> </span></td>
</tr>
<tr>
<td>@Html.LabelFor(model => model.UserPass2):</td>
<td>@Html.TextBoxFor(model => model.UserPass2)</td>
<td><span id="UserPass2_error"> </span></td>
</tr>
<tr>
<td></td>
<td><input id="submit_form_button" type="submit" value="Registrierung abschicken" /></td>
<td></td>
</tr>
</tbody>
</table>

�
</form>

�
</div>

Hier benutze ich die neue Razor Syntax von ASP.NET MVC3 falls ihr damit noch nicht vertraut seid könnt ihrhier mal gucken.

Die erste Spalte enthält hier jeweils die Beschreibung des Feldes, die zweite das Input-Element und die Dritte ist für die Anzeige von Fehlern zuständig, zu Beginn aber leer!

Der jQuery Part

So weit so gut, nun haben wir eigentlich schon alles was wir benötigen, und wenn wir nun nicht die Absicht hätten JavaScript zu benutzen wären wir an dieser Stelle schon fertig, müssten nur noch den Controller Part implementieren und könnten alles zu den Akten legen. Aber wir wollen dem Benutzer hier eine möglichsts angenehme Erfahrung bieten, denn vielleicht habt ihr es schon selbst erlebt und musstet euch auf einer Seite anmelden wo die Anmeldung ein Krampf war, das kann einem schon mal den einen oder anderen User kosten!

Was wollen wir hier nun also verbessern?

• Wenn der Benutzer einen Benutzernamen eingibt prüft das System im Hintergrund automatisch ob dieser Name schon vergeben ist und markiert das Eingabe Feld entsprechend.
• Nach der Eingabe der Email-Adresse wird diese automatisch geprüft nach Format und Verfügbarkeit und der Benutzer bekommt signalisiert ob damit alles in Ordnung ist, natürlich alles im Hintergrund
• Wenn der Benutzer sein Passwort wählt prüften wir ob dessen Stärke für uns ausreicht und ob beide Passwortfelder auch das gleiche Passwort beinhalten
• Der Absenden-Button wird erst anklickbar, nachdem alle Felder so ausgefüllt sind wie wir es uns vorstellen

Alles das können wir dank jQuery sehr einfach erreichen. Fangen wir mal vorne mit Punkt 1 an.

Erst ein mal zu dem allgemeinen Ablauf, wie soll das Ganze funktionieren?

1. Also der Benutzer tippt seinen Wunschnamen ein,
2. und wechselt aus dem Benutzername-Eingabefeld.
3. Nun soll unsere Webseite den eingegebenen Wert nehmen, und diesen an den Server senden
4. Der Server prüft den Namen auf Verfügbarkeit oder Form und Verbotene Zeichen etc
5. Und sendet eine Information zurück. Diese Information ist entweder ein Fehler oder eine Erfolgsmeldung
6. Je nachdem ob ein Erfolg oder ein Fehler vermeldet wird wird eine Fehlermeldung angezeigt und das Eingabefeld markiert

Klingt doch eigentlich ganz logisch! Fangen wir an. Erst einmal benötigen wir die jQuery Scriptdatei, diese bekommen wir direkt auf der Startseite von www.jquery.com Rechts oben auf der Startseite könnt ihr zwischen der Production und der Development Version wählen. Der unterschied besteht nur darin, dass die Production Version stark komprimiert ist und somit weniger Traffic verursacht, wenn ihr recht frisch seit was jQuery und javascript angeht solltet ihr euch die Development Version laden, da diese besser zu debuggen ist!

Nachdem ihr das Script geladen habt müssen wir das in unser Projekt einbinden. Zieht die js-Datei einfach aus dem Windows Explorer per Drag & Drop in euer Scripts-Ordner im Projekt Explorer. Nun fügen wir noch die Referenz auf die Datei hinzu, das machen wir am besten in der _Layout Datei die im Shared-Verzeichnis des View Verzeichnisses liegt. Hier ist wahrscheinlich schon ein Verweis auf ein jQuery Script vorhanden, ihr müsst nur noch den Pfad anpassen:

<script src="@Url.Content("~/Scripts/jquery.1.5.1.min.js")" type="text/javascript"></script>

Diese _Layout Datei wird automatisch in alle unsere Views eingebunden (zur Laufzeit), deswegen müssen wir den Verweis  nur an dieser Stelle einfügen, praktisch oder?

Nachdem das geschafft ist können wir uns dem eigentlichen Teil widmen. Wechseln wir also wieder zurück zu unserem Login Formular und machen uns an unseren Punkt 1.

Bevor wir starten möchte ich hier nochmal kurz erwähnen, dass das ein Anfänger Tutorial ist und wir die Kommunikation mit dem Server sehr einfach gestalten werden, eventuell werde ich dann noch einen weiteren Teil machen in dem wir die Kommunikation mit JSON realisieren.

Fangen wir an

JQuery ist nichts anderes als Javascript, ihr habt sicherlich auch schon Javascript Dateien erstellt und diese dann in eure Webseiten eingebunden, hier machen wir nichts anderes, ihr könnt ja auch einfach in die jQuery Datei reinschauen, es ist "nur" javascript.

Wenn wir Funktionen von jQuery benutzen wollen können wir das tun in dem wir das Dollarzeichen benutzen "$" oder jQuery ausschreiben, so funktioniert beides:

    $.ajax(...);
    jQuery.ajax(...);

Ich nutze nur die $-Schreibweise, einfach nur weil es kürzer ist, es ist jedoch euch überlassen was ihr lieber mögt.

Mit jQuery ist sehr einfach Seitenelemente im DOM auszuwählen, so genügt eine einfache Angabe der Klasse, ID oder des Elementen-Typs um diese auszuwählen. Hier ein paar Beispiele:

<script type="text/javascript">
    //Wählt das Element mit der ID username aus und setzt die Hintergrundfarbe auf rot
    $('#username').css('background-color', 'red');

    //Wählt ALLE Elemente mit der Klasse link aus und setzt die Hintergrundfarbe auf rot
    $('.link').css('background-color', 'red');

    //Wählt ALLE Input-Elemente aus und setzt deren Hintergrundfarbe auf rot
    $('input').css('background-color', 'red');
</script>

Das obere Beispiel zeigt wie wir mit mir einer Zeile eine ganze menge Elemente bearbeiten können, die ganze Arbeit erledigt jQuery für uns im Hintergrund. Hier habe ich jQuerys methode "css" benutzt, diese erlaubt es uns eine bestimmte CSS-Eigenschaft eines Elements zu setzten oder zu bearbeiten.

Das ist eigentlich schon das Grundkonzept von jQuery, man wählt sich die Elemente aus mit denen man etwas anstellen will und führt einige Modifikationen an ihnen durch.

Weiterhin bietet uns jQuery auch die Möglichkeit Events anzulegen und zu behandeln, was für uns in Hinsicht auf unsere Aufgaben gleich noch wichtig wird. Aber zunächst ein kleines Beispiel:

$('.my_button').click(function () {
	$('.my_button').toggleClass('some_css_class');
});

Dieser Dreizeiler hat es schon ganz schön in sich, denn hier geschieht eine ganze Menge. Als erstes suchen wir uns das Element mit der Klasse my_button und fügen diesem mit der Click-Methode ein Click-Event hinzu. Als Parameter übergeben wir hier auch gleich die Methode, die ausgeführt werden soll, wenn der Benutzer auf dieses Element klickt.

Innerhalb der Methode wählen wir dann dieses Element erneut aus und ändern dessen Klasse mit der toggleClass Methode. Diese Methode hat aber eine Sonderheit, nämlich dass sie sich merkt welche Klasse diesem Element zugewiesen war bevor darauf geklickt wurde, so wird bei einem erneuten Klick die Klasse wieder zurückgetauscht zu der ersten Klasse.

Das ändern der Klassen von Elementen ist sehr wichtig, denn so kann man sehr einfach das Aussehen von diesen ändern. Wenn der Benutzer seinen Namen eingegeben hat soll er Feedback bekommen ob dieser Name ok ist, das soll so realisiert werden:

Eingabe -> Überprüfung (Auf dem Server) -> Anzeige des Ergebnisses. Dank der kleinen Icons im Textfeld weiß der Benutzer sofort wie es um seinen Namen steht und er kann auch erkennen, dass die Webseite gerade beschäftigt ist durch den kleinen Kreisel in Schritt 2. Und falls es nicht klappt weiß der Benutzer sofort woran es gelegen hat, da er eine genaue Fehlermeldung bekommt. Und das alles geschieht ohne die Seite neuladen zu müssen nebenbei.

Das Nachladen der benötigten Informationen im Hintergrund nennt man Ajax, dabei ist das keine neue Technologie, sondern einfach nur eine Art einen Request im Hintergrund über JavaScript abzusetzen.

Da wir oben bereits unser Formular angefertigt haben, über das der Benutzer sich registrieren soll können wir uns nun etwas um die Serverseite kümmern und erstellen die nötigen Actions in dem Validation Controller der für die Überprüfung der Vom Benutzer eingegebenen Werte zuständig sein wird:

public class ValidationController : Controller
{
    //
    // GET: /Validation/CheckUsername/[name]

    public String CheckUsername(string username)
    {
        //Wenn in unserer "Datenbank" der Name bei einem anderen Benutzer Auftaucht
        if (new UserDatabase().Users.Where(u => u.Username.Equals(username)).ToList().Count > 0) {
            //Eine Fehlermeldung zurückgeben
            return "Dieser Benutzername ist schon vergeben";
        }

        //Wenn der Benutzername kürzer als 5 Zeichen ist ebenfalls Fehler ausgeben
        if(username.Length < 5){
            return "Der Benutzername ist zu Kurz!";
        }

        //Falls es nichts zu meckern gibt geben wir "ok" aus
        return "ok";
    }
}

In diesem Controller habe ich eine Action Methode definiert, die einen string zurück gibt statt einem ActionResult, dadurch wird der Text den wir im Returnstatement abgeben direkt an den Browser weitergereicht ohne Umweg über eine View die wir uns dadurch sparen.
Die Methode selbst macht nichts spannendes, zu erst wird hier die UserDatabase nach Usern durchsucht die den selben Namen haben und bei einem Treffer eine Fehlermeldung ausgegeben und als zweites führe ich eine Prüfung darauf durch ob der Benutzername zu kurz ist. - Falls alle Kriterien passen geben wir ein "ok" zurück.
Die UserDatabase Klasse ist übrigens nur ein Dummy Repository, dass für uns eine Datenbank simuliert:

public class UserDatabase {

    public List Users;

    public UserDatabase() {
        Users = new List(){
            new User(){Username = "Bernd", Useremail = "bernd@gmx.de"},
            new User(){Username = "Bill", Useremail = "bill@microsoft.de"}
        };
    }
}
public class User {
    public string Username { get; set; }
    public string Useremail { get; set; }
}

Nun haben wir eine sehr simple Überprüfung des Benutzernamen eingebaut. Machen wir das gleich noch mal für die Email Adresse und das Passwort:

public string CheckEmail(string email) {
    //Wenn in unserer "Datenbank" die Emailadresse bei einem anderen Benutzer Auftaucht
    if (new UserDatabase().Users.Where(u => u.Useremail.Equals(email)).ToList().Count > 0) {
        //Eine Fehlermeldung zurückgeben
        return "Diese Emialadresse ist schon vergeben";
    }

    return "ok";
}

public string CheckPassword(string password) {
    //Unser einziges Kriterium für das Passwort ist dass es mindestens 4 Zeichen lang sein muss
    if (password.Length < 4) {
        return "Das Passwort ist zu kurz!";
    }

    return "ok";
}

Absolut nichts kompliziertes wie ihr seht. Natürlich halte ich hier die Methoden und Aktionen sehr simpel um dies verständlicher zu machen, in einem echten Projekt würde man hier natürlich anders vorgehen. Das werden wir dann im zweiten Teil besprechen.

Da unser Backend nun bereit ist müssen wir uns jQuery kümmern und unserem Formular beibringen im Hintergrund mit dem Server zu kommunizieren.

$(document).ready(function () {

    $('#UserName').change(function () {
        //Diese Aktion wird ausgeführt wenn sich der Test im Username
        //Textfeld ändert

        //Style klassen entfernen und die validierungsklasse einfügen
        $('#UserName').removeClass('validation_ok validation_error');
        $('#UserName').addClass('validating');

        var username = $('#UserName').val();
        $.ajax({ url: '/Validation/CheckUserName/' + username,
            success: function (data) {
                if (data == "ok") {
                    //Die Daten wurden vom Controller akzeptiert
                    $('#UserName').removeClass('validating');
                    $('#UserName').addClass('validation_ok');
                    $('#UserName_error').html('');
                } else {
                    //Fehlermeldung vom Server ausgeben
                    $('#UserName').removeClass('validating');
                    $('#UserName').addClass('validation_error');
                    $('#UserName_error').html(data);
                }
            }
        });
    });
});

Gehen wir den Code mal gemeinsam durch, wir beginnen mit der jQuery Funktion "ready", diese wird automatisch ausgeführt sobald der Browser die komplette Seite geladen hat. Als Parameter übergeben wir eine anonyme Funktion, die daraufhin direkt ausgeführt wird.

Innerhalb dieser Funktion (Zeile 3) benutzen wir die jQuery Selektoren um die Textbox mit der id "UserName" zu schnappen und hängen dieser ein "change" Event an. Dieses Event wird immer ausgeführt wenn sich der Inhalt der Textbox ändert. An dieser Stelle wollen wir eingreifen und die geänderten Daten zum Server senden, damit er diese prüfen kann.

In Zeile 8 und 9 benutzen wir die "removeClass" und "addClass" Funktionen von jQuery um der "UserName" Textbox CSS Klassen hinzuzufügen oder wegzunehmen. So fügen wir in Zeile 9 die CSS Klasse hinzu, durch die die TextBox das Animations-GIF erhält, das dem Benutzer anzeigt, dass die Eingaben überprüft werden.

Der Spannende Teil beginnt erst in Zeile 11, denn hier lesen wir den Benutzernamen aus der Textbox und senden diesen dann über die "ajax" Methode von jQuery zum Server. Diese Methode von jQuery ist sehr mächtig und man kann hier dementsprechend diverse Parameter definieren, aber wir benutzen hier stattdessen nur die einfachste Variante, und diese benötigt nur die URL an die der Request gesendet werden soll und eine Referenz auf eine Funktion die ausgeführt werden soll wenn alles erfolgreich verlaufen ist.

Die URL selbst haben wir durch die Namen unserer Controller im Backend schon vergeben, denn wir sprechen hier den Validation-Controller an und rufen die CheckUserName-Methode auf, der wir den eingelesenen Namen als Parameter übergeben. Heraus kommt eine URL wie z.B. diese hier: localhost/Validation/CheckUserName/Bill.

Nachdem der Request nun angesendet wurde und erfolgreich eine Antwort empfangen wurde, wird unsere anonyme Funktion ausgeführt, die das vom Server zurückgegebene Ergebnis auswertet. Im Fall dass der Server ein "ok" zurückgibt wird ein grüner Haken im Textfeld angezeigt und ansonsten ein rotes "x" und die Fehlermeldung in nebenstehenden span ausgegeben. (Zeile 23)

Schauen wir uns doch mal an ob alles so funktioniert wie geplant:

Wie man sieht wurde der Benutzername "Bernd" als fehlerhaft markiert, da dieser bereits in unserer "Datenbank" auftaucht, die Emailadresse hingegen ist ok, da sie noch nicht benutzt wird.

Die jQuery Implementierung für die restlichen  Textfelder kann eigentlich 1 zu 1 übernommen werden, es sollten lediglich die Parameter ausgetauscht werden. Die einzige kleine Besonderheit stellt die Prüfung des Passworts dar, ob die beiden Felder gleich sind, das kann man nämlich komplett clientseitig regeln, ohne die Daten zum Server zu senden:

$('#UserPass2').change(function () {
    //Diese Aktion wird ausgeführt wenn sich der Text im Passwort
    //Textfeld ändert

    //Style klassen entfernen
    $('#UserPass2').removeClass('validation_ok validation_error');

    var pass = $('#UserPass').val();
    var pass2 = $('#UserPass2').val();

    if (pass == pass2) {
        //Die Daten wurden vom Controller akzeptiert
        $('#UserPass2').addClass('validation_ok');
        $('#UserPass2_error').html('');
    } else {
        //Fehlermeldung ausgeben
        $('#UserPass2').addClass('validation_error');
        $('#UserPass2_error').html('Die Passwörter sind nicht gleich');
    }
});

Im Grunde sind wir nun fertig und haben auf einfachste Weise unser Registrierungsformular aufgewertet und dem User vielleicht ein paar Nerven gespart.

Ich möchte hier noch mal hinweisen, dass man in einem Realprojekt nicht so handeln würde, da es viel zu umständlich und nicht wirklich gut wartbar ist. Dieser Beitrag soll lediglich die Grundlagen erklären und zeigen wie man so etwas zu Fuß und mit den grundlegendsten Mitteln erstellen kann.

Im nächsten Teil werden wir dann die MVC3 eigenen Features benutzen die uns diese Aufgaben um einiges erleichtern und zu einem Großteil automatisch funktionieren.

Das Demo-Projekt könnt ihr hier laden: Download [VS2010 c#]

Teil 2 lesen >>

Wer heute Webanwendungen erstellt kommt einfach nicht drumherum JavaScript zu verwenden um dem Benutzer zb. die Eingabe von Daten in ein Formular zu erleichtern und zB. Hinweise während der Eingabe anzuzeigen. Leider ist JavaScript bei vielen nicht wirklich beliebt und die meisten versuchen wann immer es geht darauf zu verzichten, und das auch aus guten ...