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 >>

Da schnell die Frage nach den Folien und dem Beispielcode der während der Präsentation entstand aufkam, möchte ich diese hiermit nachliefern.

Installation

In meinem Vortrag ging ich nicht darauf ein, wie man ASP.NET MVC installiert, dies will ich hiermit nachliefern. Die Installation erfolgt schnell und einfach über den ASP.NET MVC Installer den ihr auf der ASP.NET MVC Homepage bekommt oder über diesen Direktlink. Die Installation an sich ist nicht weiter erwähnenswert
Nach der Installation werden ihr die Projektvorlage in Visual Studio vorfinden.

Kostenlos ASP.NET MVC Entwickeln

Falls ihr keine Visual Studio Lizenz besitzt könnt ihr den Visual Web Developer benutzen um MVC zu entwickeln:
http://www.microsoft.com/germany/express/products/web.aspx

Aufzeichnung

ASP.NET MVC von 0 an from .NET Online User Group on Vimeo.

Präsentation

Code (mit Kommentaren)

Feedback & Fragen

Falls du bei dem Vortrag dabei warst und noch Fragen hast oder einen (Verbesserungs)vorschlag oder Feedback hast kannst du das auch gerne als Kommentar posten.

Bis zum nächsten Mal!

Den Anfang macht heute das Windows 7 Home Premium "Maxibuch", das ca 1000 Seiten umfasst.

Microsoft Windows 7 wird mit "Microsoft Windows 7 Home Premium - Das MAXIBUCH" erst richtig schön. Damit Sie die vielen Möglichkeiten entdecken und verstehen, hat sich das Autorenteam lange mit Windows 7 Home Premium auseinandergesetzt.
Sie erhalten von uns kostenlos eine gelungene und sehr ausführliche Windows 7-Beschreibung!
Wissen aus erster Hand auf über 1.000 Seiten! (PDF, 80.2 MB)
Rechnen Sie unbedingt auch mit Tipps, wie Sie schneller, einfacher und sicherer arbeiten - und Spaß bekommen.

Wer Interesse hat muss lediglich seine E-Mail Adresse auf der Aktionsseite eintragen und bekommt einen Download-link zugeschickt.

Nachtrag:

Anscheinend sind momentan die Server ziemlich ausgelastet:

Entschuldigung.
Unser Downloadserver ist überlastet.
Bitte Versuchen Sie es in wenigen Minuten noch einmal.
Vielen Dank für Ihre Verständnis.

Aber zum Glück hat man die Ganze Woche Zeit um es herunterzuladen.

Die wohl auffälligste Neuerung ist die neue ViewEngine namens Razor, diese sorgt dafür, dass die Views um einiges schlanker und lesbarer werden durch die Einführung einer neuen Syntax.

Ich will mit euch ein kleines Beispielprojekt erstellen in dem wir Schritt für Schritt einige der Neuerungen durchgehen.

Fangen wir an und erstellen ein neues MVC3 Projekt in Visual Studio und bereits hier gibts es was Neues zu betrachten:

Bild 1: Der Neue Projekt erstellen Dialog

Da wir von Vorn beginnen möchten erstellen wir ein neues Leeres Projekt und wählen die neue Razor ViewEngine.

Layout

Wenn man nun einen Blick auf den Projektmappenexplorer wirft, wird man drin nicht viel finden, lediglich eine CSS- und zwei cshtml-Dateien. Die cshtml-Dateien fangen auch noch mit einem Unterstrich (_) an und haben irgendwas mit Layout im Namen.

Was ist das?

Öffnen wir zunächst im Shared-Ordner die Datei _Layout.cshtml.

Diese Datei kann man mit einer MasterPage aus MVC2 vergleichen. Wenn ihr genau hinschaut werdet ihr im Title-Tag einen Platzhalter finden und auch im body-div ist einer namens „@RenderBody()“.

Die Layoutseiten in MVC3 funktionieren anders als die in MVC2, auch wenn diese Seite auch Platzhalter besitzt die später mit Inhalt befüllt werden fällt dennoch die Methode RenderBody() auf. Diese Methode ist in jeder Layout-Seite drin und steht immer an der Stelle wo später der Inhalt der Seite  stehen wird. Neben der RenderBody()-Methode gibt es auch die RenderSection()-methode, die auch einen Namen bekommen und auch als optional markiert werden können.

Was auch neu ist, ist dass wir keine <% %> Tags mehr haben in die wir den ASP.NET Code schrieben können, das alles übernimmt nun das @-Zeichen. Das System ist dabei so intelligent, dass es erkennt bis wohin der Code geht weswegen man auch kein schließen Tag benötigt. Weitere Informationen zu der Razor Syntax.

Wie man sieht sind die ganzen JavaScript Verweise auskommentiert. Bitte entfernt die Kommentarmarkierung, da wir diese Skripte bald benötigen.

Gut, schleißen wir diese Datei und werfen nun einen Blick in die „_ViewStat.cshtml“ in unserem Views-Ordner:

Der Inhalt hier ist wie man sieht sehr übersichtlich

Was macht diese Datei nun? Wie man sieht verweist diese auf die _Layout.cshtml die wir eben betrachtet haben, dabei sorgt dieser Verweis dafür, dass alle Views in dem Views-Ordner inkl Unterordner diesen Verweis auch erhalten. Das hat zur Folge, dass man nun nicht mehr in jeder einzelnen View diese Referenz auf die Layoutdatei eintragen muss und spart sich so den redundanten Code.

Viel mehr gibt es dazu eigentlich auch nicht zu sagen. Gehen wir nun zum nächsten Schritt und erstellen eine neue View.

Views

Wenn ihr den View-Hinzufügen Dialog wählt werdet ihr auch hier eine Veränderung feststellen:

Wie man sieht kann man nun auch bei jeder einzelnen View wählen, welche ViewEngine man hier gern verwenden möchte. Legen wir eine gewöhnliche View an.

Die neue View enthält nun nur diese paar Zeilen Code (siehe Bild oben).

Zuerst wird ein Codeblock aufgemacht mit der @{ … } Syntax, das bedeutet, dass nun nur noch ASP.NET Code kommt bis die schließen Klammer kommt, auch über mehrere Zeilen.

Innerhalb dieses Codeblocks füllen wir nun den Titel unserer Seite, wenn ihr euch erinnern könnt wurde diese Variable in der MasterPage im Title-Tag wieder ausgegeben.

Man beachte hier, dass diese Property dynamisch erstellt wird und es die Property „Title“ eigentlich gar nicht gibt. Diese wird dann zur Laufzeit generiert und mit Inhalt befüllt. So kann man beliebig viele solcher Properties anlegen.

In Zeile 3 geben wir an welche MasterPage hier verwendet werden soll, da wir aber bereits die Datei „_ViewStat.cshtml“ in unserem Views-Ordner liegen haben müssen wir innerhalb der View keinen Verweis mehr auf eine Masterpage setzen. (Außer wir wollen eine andere Nutzen) Also können wir diese Zeile aus unserem Code löschen.

Nun fängt schon ab Zeile 6 der normale HTML Quelltext an, ohne dass wir irgendwo einen Zugehörigkeitsbereich definiert haben. Das ist ein weiteres MVC3 / Razor Feature, denn alles wird an der stelle in der MasterPage eingesetzt wo wir die Methode RenderBody() aufrufen. Eine Ausnahme besteht, wenn wir Sektionen in der Masterpage definiert haben, diese würden dann dementsprechend der passenden Sektion zugeordnet werden.

So könnte eine Sektion aussehen:

Das wars nun soweit zu dieser View. Wenn ihr mögt könnt ihr nun weiter damit arbeiten wie mit einer gewöhnlichen View.

Nun wollen wir mal ein Formular anlegen, dass wir zum Registrieren eines Benutzers nutzen wollen. Dazu benötigen wir zunächst ein Model auf das wir dann unsere View mit der Form  typisieren.

Legen wir also eine neue Klasse im Models-Verzeichnis an. Die Model Klassen verhalten sich in MVC3 eigentlich genauso wie in MVC2, nun sind aber einige neue Attribute hinzugekommen die ich euch hier mal vorstellen möchte:

Wie ihr seht hat meine Modelklasse 5 Eigenschaften. Die ersten drei sind mit dem Attribut [Required] markiert und sind somit Pflichtfelder. Alle Eigenschaften besitzen ein [DisplayName()] Attribut, dass den Text enthält, der später in der View angezeigt werden soll.

Kommen wir nun zu den neuen Attributen. Erstmal das [Required, Compare(…)] Attribut. Dieses Attribut sorgt hier dafür, dass „RepeatEmail“ mit „Email“ verglichen wird und übereinstimmen muss damit die Validierung erfolgreich ist. So müssen wir diese zwei Werte nun nicht mehr im Controller manuell vergleichen.

Weiter unten bei der About-Eigenschaft finden wir ein weiteres neues Attribut namens [SkipRequestValidation] – Im Prinzip sagt der Name schon alles aus. Dieses Attribut sorgt dafür, dass diese Property beim Binding keine Exception wirft wenn dort HTML enthalten ist.

Früher musste man dann im Controller die Action mit einem [ValidateInput(false)] markieren, was natürlich immer noch funktioniert, aber nun kann man auch einzelne Properties bequem markieren ohne gleich für die ganze Methode den Validationinput abzuschalten.

Hier gibts es nun sogar die Möglichkeit bestimmte Properties von der Validierung auszuschließen:

Hier werden die Properties “Body” und “Summary” nicht auf HTML Inhalt überprüft.

Wie ihr sehen könnt habe ich ein Attribut auskommentiert. Auf dieses Attribut habe ich mich persönlich sehr gefreut, aber es scheint nicht zu funktionieren (oder ich mache etwas falsch, wenn ihr meinen Fehler seht bitte kommentieren ACHTUNG: dazu habe ich hier ein Update geschrieben)

Dieses RemoteAttribut erlaubt es eine Eigenschaft an eine Methode in einem Controller zu binden und währen der Ausführung der View beim Client im Hintergrund über Ajax aufzurufen. Für den Fall von der Property Name würde die Methode UserNameAvailabla im Controller Register aufgerufen werden, welche ein boolean zurück gibt. So wird dann dynamisch eine Fehlermeldung auf der View erscheinen.

Wenn man dieses RemoteAttribut nun benutzen möchte muss man natürlich die oben angegebene Methode im angegebenen Controller implementieren, zB so:

Diese Methode wird dann beim Validieren per Ajax aufgerufen und zeigt dann dementsprechend auch eine Fehlermeldung an (Falls nötig):

Zum Schluss möchte ich noch darauf hinweisen, dass ich ein bestimmtes kleines Feature vermisst habe, nämlich eine bequeme Möglichkeit einen String auszugeben ohne diesen mit HTML zu Encoden. Denn soweit bietet Razor leider keine Möglichkeit dafür. Deswegen muss man hier mit einer eigenen kleinen Extension Methode aushelfen.

Das wäre es dann nun auch für heute. Ich habe ein kleines Beispiel Projekt vorbereitet, dass ihr hier herunterladen könnt. (.NET 4.0 VS2010)

Bild 1: Typische 404 Fehlermeldung von ASP.NET

Eigene Fehlerseiten sind unter ASP.NET MVC 2 schnell in vier Schritten eingerichtet.

1. Änderungen an der Web.config vornehmen

Zunächst müssen in der Web.config die customErrors eingeschaltet werden. Hier können die Attribute "defaultRedirect", welches die Adresse definiert die im Falle eines Fehlers aufgerufen wird und "mode", dass einstellt ob Fehler angezeigt werden sollen oder nicht.

Mit den inneren "error"-Ästen kann man dazu noch spezifische Seiten zu einzelnen Fehlercodes zuweisen. Man kann hier sowohl eine  absolute Adresse angeben oder nur eine relative. Für alle nicht spezifizierten Errorcodes wird die Url aus dem customError Tag benutzt.

Wenn ihr diese Einstellungen Lokal testen wollt dann solltet ihr auch den "mode" auf "On" stellen, da ihr euere Seiten sonst nicht zu Gesicht bekommt.

2. Anlegen des Controllers für die Fehlerbehandlung

Wie ihr sehen könnt habe ich hier eine lokale Adresse angegeben. Hierbei wird der Controller "Error" aufgerufen und je nach Fehlercode eine andere Methode.

Im Controller haben wir hier eigentlich nichts besonderes:

Ich war an dieser Stelle mal faul und habe nur eine einzige View für alle Fehler angelegt, die dann die übergebene message ausgibt. Dazu kommt noch, dass wir der Response noch den passenden HttpStatusCode übergeben, da manche Anwendungen danach gehen und so prüfen, ob ein Aufruf erfolgreich war.

3. Die View

Wie eben erwähnt macht die View in meinem Beispiel nichts anderes als den Inhalt der Messagevariable auszugeben. Hier könnt ihr natürlich eurer Kreativität freien Lauf lassen und auch für jeden Error eine einzelne View anfertigen.

4. Glogal.asax - Catch All Route registrieren

Zum Schluss sollten wir noch eine sogenannte Catchall Route einrichten, die wir nach allen unseren Routen positionieren damit diese nur greifen kann, wenn keine der anderen gepasst hat, diese Route wird in jedem Fall aufgerufen, wenn keine der vorderen gepasst hat.

Wenn die CatchAll Route greift wird der Home Controller aufgerufen und die Action "NotFound" ausgeführt.

Im Grunde sind wir nun fertig, alle von uns eingetragenen Fehler werden nun abgefangen und durch von uns präparierten Seiten ersetzt. Das einzige was noch passieren kann ist dass ihr im IIS andere ErrorPages eingestellt habt, dann dann werden diese angezeigt und nicht die von euch erstellten. Hier müsst ihr die "Error Responses" auf "Detailed errors" stellen.

Die Anfänge

Natürlich haben diese Vorurteile irgendwo etwas wahres dran, so ist es nicht von der Hand zu weisen, dass sich die Syntax der beiden Sprachen sehr sehr ähnlich ist, und auch die Ausführung des Codes in einer VM kann man auch zu den Gemeinsamkeiten zählen. So ist C# ja auch entstanden, als eine Mischung aus Java und C++. Dies sollte es den Leuten erleichtern auf die neue Plattform zu wechseln und schnell einen Einstieg zu finden, desweiteren hat es sich in der Technischen Welt bewährt gute und erfolgreiche Konzepte zu kopieren und zu perfektionieren/verbessern. So würde ich auch C# mehr als eine Weiterentwicklung von Java betrachten.

Wo liegen die Unterschiede?

Natürlich fragt man sich dann, wo die Unterschiede sind und wenn man sich etwas damit befasst, wird man feststellen, dass es doch ziemlich viele Unterschiede und (meiner Meinung nach sehr nützliche) Weiterentwicklungen gibt.

Hier ein paar Beispiele:

• Properties - Saubere Model-Klassen ohne einen riesen GetBla & SetBla Gestrüppe
• Delegates (Funktionszeiger) - Übergabe von Funktionen als Parameter uvm.
• LINQ (Language Integrated Queries)  - Objektorientierte SQL/XML-Abfragen
• Events - Erleichtert strickte Trennung von Schichten und Informationsweitergabe
• Lambda Ausdrücke - Viel Arbeit auf wenig Platz (Wird eventuell im JDK 1.7 Einzug halten)
• Enums und Colections

Desweiteren gibt es auch wichtige Unterschiede, die unter der Haube ablaufen:

• Assembly-Konzept - Einfache und schnelle Interaktion zwischen den .NET Sprachen wie C#, Visual C++.Net, Visual Basic.Net oder Delphi.Net
• Namespaces - Auf den ersten Blick sehr ähnlich zu Packages , aber nicht auf den zweiten

Natürlich gibt es noch vieles mehr was an Unterschieden zu entdecken gibt. Wer da interessiert ist kann dich mal diese Seite anschauen mit vielen Beispielen und Vergleichen.

Einsatzbereiche

Sogar in den Einsatzgebieten ähneln sich die Plattformen sehr, denn wie mit Java kann man auch in .NET sowohl für Desktop, für Web und für mobile Plattformen entwickeln, wobei die mobilen Plattformen noch auf Windows Mobile beschränkt ist. (Aber Mono für Android ist ist ja auch schon unterwegs)

Dank Mono kann man viele .NET Programme auch sehr einfach auf Unix Systeme portieren, womit man teilweise auch die Plattformunabhängigkeit von Java erreicht. (Mono unterstützt zur Zeit das komplette .NET Framework 2.0)

Die Zukunft

Microsoft entwickelt die .NET Plattform sehr aktiv. Vor Kurzem ist die 4te Version des Frameworks inklusive einer neuen Visual Studio Version erschienen. Weitere Releases und Weiterentwicklungen dürften somit auch bald folgen.

Bei Java schaut man momentan noch in eine ungewisse Zukunft, da Sun vor einer Weile von Oracle aufgekauft wurde, weis man nun nicht mit Sicherheit was aus den Produkten wird. So musste die Community bereits den Verlust von Open Solaris hinnehmen und es hagelte auch schon die ersten Patentklagen wegen dem Aufbau der Java VM auf verschiedenen Plattformen. - Keine Rosigen Aussichten für Java Fans.

So scheinen nun sich die Feindbilder zu ändern. Lange Zeit war Microsoft wohl der Anführer der Bösewicht Nummer 1 - Liste, doch das Unternehmen hat sich gewandelt und stellt inzwischen sogar zu vielen Projekten sogar den Code zur Verfügung, so ist zum Beispiel ein großer Teil des .NET Frameworks einsehbar und auch das ASP.NET MVC Framework lässt sich komplett einsehen.

Die .NET Plattform ist inzwischen eine sehr mächtige geworden, und alle die es runterspielen oder ignorieren kann ich einfach nicht ernst nehmen. Und auch wenn man ein Open-Source-Junkie oder einfach nur ein Microsoft-Feind ist sollte man dennoch wissen, wovon man redet.

Diese Power Tools verbessern hierbei viele Kleinigkeiten, die den Arbeitsprozess angenehmer machen. Hier ein paar Beispiele:

• STRG+Mausklick auf eine Variable befördert euch zu der Klasse
• STRG+1/2/3 Bringen bequeme Sprungmöglichkeiten innerhalb der markierten Klasse
• ALT+Pfeil hoch/runter verschiebt den markierten Text
• Ein neuer Solution navigator
• Ein verbesserter "Verweis hinzufügen" Dialog mit Suchfunktion
• Farbige und pinnbare Tabs
• und und und

Schnell laden, installieren und genießen! Ich kann schon jetzt nicht mehr ohne!

Bild 1: Probleme mit der Transparenz

In Bild 1 sehen wir das Problem, viele der Windows Forms Steuerelemente nutzen GDI zur Darstellung und haben deswegen keinen Alpha-Kanal, der aber für die Darstellung auf Glas benötigt wird. Deswegen nutzen wir die Schwarze Farbe um unsere Fläche in Glas zu verwandeln, leider denkt der DWM dann, dass auch die Texte auf unseren Steuerelementen zu Glas werden sollen.

Ich habe mich nun ein wenig im Internet umgehört und verschiedene Ansätze gefunden und diverse Hacks mit der Windows32API Ausprobiert, die aber alle leider nicht mehr funktionieren. So will ich euch heute zwei Möglichkeiten vorstellen wie man es doch hinkriegen könnte.

1. Owner Drawing

Da die Steuerelemente mit GDI gerendert werden haben wir ein kleines Problem wie man oben sieht. Also müssen wir die Darstellung der Steuerelemente selbst in die Hand nehmen. Dieser Vorgang nennt sich OwnerDrawing und bedeutet soviel wie "SelberZeichnen". Ich will das Ganze mal anhand einer Textbox demonstrieren.

Und genauso ist auch das Vorgehen. Wir erstellen eine neue Klasse und nennen Sie "AeroTextBox". Diese Klasse erbt nun von der Original TextBox. Nun müssen wir ein paar kleine Änderungen an der Klasse vornehmen in Bezug auf die Darstellung, also des WM_PAINT Ereignisses.

Da wir das Zeichnen des Steuerelements selbst in die Hand nehmen wollen müssen wir die WM_PAINT Message abfangen und auf unsere eigene Methode umleiten:

C#

    protected override void WndProc(ref System.Windows.Forms.Message m)
    {
        base.WndProc( ref m);

        switch (m.Msg)
        {
            case 0xf: //WM_PAINT
                RedrawControlAsBitmap(this.Handle);
                break;
        }
    }

VB.NET

 Protected Overrides Sub WndProc(ByRef m As System.Windows.Forms.Message)
	MyBase.WndProc(m)

	Select Case m.Msg
		Case &Hf 'WM_PAINT
			RedrawControlAsBitmap(Me.Handle)
			Exit Select
	End Select
End Sub

Wie man sieht fangen wir hier die Message ab und rufen unsere eigene Methode auf, die das Zeichnen übernehmen wird:

C#

    public void RedrawControlAsBitmap(IntPtr hwnd)
    {
        Control c = Control.FromHandle(hwnd);
        using (Bitmap bm = new Bitmap(c.Width, c.Height))
        {
            c.DrawToBitmap(bm, c.ClientRectangle);
            using (Graphics g = c.CreateGraphics())
            {
                g.DrawImage(bm, new Point(-1, -1));
            }
        }
        c = null;
    }

VB.NET

Public Sub RedrawControlAsBitmap(hwnd As IntPtr)
	Dim c As Control = Control.FromHandle(hwnd)

	Using bm As New Bitmap(c.Width, c.Height)
		c.DrawToBitmap(bm, c.ClientRectangle)

		Using g As Graphics = c.CreateGraphics()
			g.DrawImage(bm, New Point(-1, -1))
		End Using
	End Using
	c = Nothing
End Sub

Was hier passiert ist eigentlich sehr simpel, wir zeichnen das Control neu und legen das gezeichnete Bild nun über das Control drüber. Nur diesmal machen wir das ganze mit einem Alpha Kanal, sodass der DWM uns die Darstellung nicht versaut!

Nun bleibt noch ein kleines Problem, nämlich dass bei manchen Aktionen des Benutzers wie zB. bei MouseOver oder KeyPress Events das Steuerelement neugezeichnet wird und unsere Funktion da oben nicht greift. Hier müssen wir manuell dafür sorgen, dass Windows erneut die WM_PAINT Message versendet. Das erreichen wir indem wir die einzelnen Events überschreiben und die Invalidate()-Methode aufrufen. Diese Methode erklärt die ganze Oberfläche des Steuerelements für ungültig und bewirkt, dass das Steuerelement neu gezeichnet wird.

C#

    protected override void OnMouseClick(System.Windows.Forms.MouseEventArgs e)
    {
        base.OnMouseClick(e);
        Invalidate();
    }

    protected override void OnMouseMove(System.Windows.Forms.MouseEventArgs e)
    {
        base.OnMouseMove(e);
        Invalidate();
    }

    protected override void OnTextChanged(System.EventArgs e)
    {
        base.OnTextChanged(e);
        Invalidate();
    }

    protected override void OnMouseEnter(System.EventArgs e)
    {
        base.OnMouseEnter(e);
        Invalidate();
    }

VB.NET

Protected Overrides Sub OnMouseClick(e As System.Windows.Forms.MouseEventArgs)
	MyBase.OnMouseClick(e)
	Invalidate()
End Sub

Protected Overrides Sub OnMouseMove(e As System.Windows.Forms.MouseEventArgs)
	MyBase.OnMouseMove(e)
	Invalidate()
End Sub

Protected Overrides Sub OnTextChanged(e As System.EventArgs)
	MyBase.OnTextChanged(e)
	Invalidate()
End Sub

Protected Overrides Sub OnMouseEnter(e As System.EventArgs)
	MyBase.OnMouseEnter(e)
	Invalidate()
End Sub

Nun wird das Control richtig dargestellt. Wie ihr vielleicht auch gesehen habt haben wir in unserer Methode, die für das Neuzeichnen verantwortlich ist nicht TextBox sondern die Superklasse Control benutzt. Das bedeutet für uns, dass wir mit diesem Code jedes Steuerelement ableiten und auf diese Weise neuzeichnen können mit mehr oder weniger viel Erfolg. Ich habe mal ein paar Klassen abgeleitet und für euch auf dem Glass-Form platziert:

Bild 2: Die OwnerDrawn Steuerelemente

Wie man sieht ist das schon eine sehr vielversprechende Verbesserung der Darstellung, wenn auch nicht perfekt. Aber natürlich steht es euch noch frei die Darstellung weiter zu verbessern und auf die einzelnen Steuerelemente anzupassen.

Nachdem ihr die selbst erstellten Klassen die von den einzelnen Steuerelementen erben einmal kompiliert habt, wird Visual Studio dies bemerken und euch diese neuen Steuerelemente zusammen mit den anderen in der Toolbox anbieten. Diese können dann wie gewohnt per Drag & Drop auf das Formular gezogen werden.

Bild 3: Bequemer Gehts nicht

Wie ihr euch vorstellen könnt ist es ein ziemlicher Aufwand jedes Steuerelement noch mal neu anzulegen und dessen komplette Darstellung zu übernehmen. Es ist wirklich sehr frickelig! Deswegen wird dieser Ansatz auch eher selten verwendet! Die Demo dazu könnt ihr euch übrigens am Ende des Artikels herunterladen.

Variante 2. "The Microsoft Way"

Natürlich stolpert man irgendwann bei der Recherche über das Windows API SDK in dem es einige Beispiele dazu gibt wie man die neuen Funktionen in Windows benutzt, darunter natürlich auch Glas.

Der Ansatz den Microsoft da aber nach ihrer eigenen Best Practise verwendet ist aber eher ernüchternd. Hier geht es nach dem Motto, platziert einfach keine Steuerelemente auf dem Glas! - Super nicht?

In dem einzigen Beispiel das Microsoft da aufführt wird eine Form gezeigt, dessen Rahmen in das Formular bis zum darauf liegendem Panel erweitert wurde, nicht wirklich spannend. Aber wenn ich so überlege, fällt mit spontan auch kein Windows Programm auf, bei dem irgendwelche Steuerelemente auf dem Glas liegen - kennt ihr welche? In dem meisten Programmen liegen fast nur Grafiken auf dem Glas oder so ähnliche Controls wie die im Windows Explorer.

Also sage ich es mal Microsofts Worten: lasst die Controls vom Glas weg oder benutzt WPF!

Hier noch die Demo zu der Variante 1: Download [VS 2008 Projekt]

Zur zweiten Variante habe ich keine Demo gemacht, ihr könnt euch ja das Windows API SDK herunterladen und dort im Aero Ordner nachgucken.

<< Teil 4 des Tutorials

Auch wen Relationale Datenbanken überwiegend dazu benutzt werden um Text-Basierte Informationen zu speichern, wie Benutzernamen, IP Adressen oder andere Texte, kommt es doch häufiger vor, dass man auch Dateien wie Bilder in eine Datenbank legen möchte. Dies ist zB. nützlich wenn man eine Benutzerdatenbank hat und zu jedem Benutzer ein Bild hinterlegen will.

Das Vorgehen an Sich ist dabei sehr ähnlich, ihr erstellt ein SqlCeCommand und fügt dem wie gewohnt einige Parameter hinzu:

                using (SqlCeConnection con = new SqlCeConnection(conString)) {
                    con.Open();
                    using (SqlCeCommand com = new SqlCeCommand
                        ("INSERT INTO cp_image (date, image) VALUES (@Date, @Filename)", con)) {

                        com.Parameters.AddWithValue("@Date", DateTime.Now.ToString());
                        com.Parameters.AddWithValue("@Filename",
                                System.IO.File.ReadAllBytes(filename)).SqlDbType = SqlDbType.Image;
                        com.ExecuteNonQuery();
                    }
                }

Absolut nichts neues wie ihr sehen könnt, wir geben die Datei, die wir anhängen wollen einfach als byte-Array als Parameter mit.

Sehr wichtig ist hierbei folgende Stelle in Zeile 8:

.SqlDbType = SqlDbType.Image;

Wenn ihr diese Information nicht mit angebt, werdet ihr Probleme bekommen, sobald ihr eine Datei in die Datenbank schreiben wollt die größer ist als 8 KB!!! Denn wenn man einen Parameter angibt ohne dessen Typ mit anzugeben versucht SQLCE den Typ selbst zu bestimmen und wählt dazu dann den Typ varbinary, dessen Größe auf 8000 Byte beschränkt ist!

Mit dem Ausführen des SqlCeCommands sollte die Datei bzw. das Bild in diesem Fall dann in eure Datenbank Datei wandern.

Das Auslesen der Datei aus der Datenbank gestaltet sich ebenfalls nicht kompliziert. Hier meine Funktion um ein Bild aus der Datenbank zu lesen:

        public Image getImageFromDB(int id) {
            Image img;
            byte[] imgData = null;

            using (SqlCeConnection con = new SqlCeConnection(conString)) {
                con.Open();
                using (SqlCeCommand com = new SqlCeCommand
                    ("SELECT image FROM cp_image WHERE id = '" + id.ToString() + "'", con)) {

                    using (SqlCeDataReader dr = com.ExecuteReader()) {
                        while (dr.Read()) {
                            imgData = (byte[])dr["image"];
                        }
                    }
                }
            }

            if (imgData != null) {
                //Es wurde ein Bild geladen
                MemoryStream ms = new MemoryStream(imgData);
                img = Image.FromStream(ms);
                return img;
            }
            return null;
        }

Dazu benutze ich einfach nur einen gewöhnlichen DataAdapter, mit dem ich aus der Spalte namens "image" die Bildinformationen auslese, diese müssen noch in ein byte-Array gecastet werden, da diese als Object geliefert werden.

Zum Schluss wird noch das Byte-Array in ein System.Drawing.Image verwandelt und zurückgegeben. Dies kann man dann zB. direkt in eine PictureBox laden.

Hier ist die Tabelle, die ich in diesem Beispiel benutzt habe:

Bild 1: Tabelleninformationen

Wie ihr eine Verbindung zur Datenbank herstellt und normale Select- und Insert-Befehle benutzt könnt ihr im Ersten Teil nachlesen.

<< Zu Teil 1

Inzwischen gibt es auch viele verschiedene lokale Datenbanksysteme wie zB. SQLite, DB4O oder auch MS SQL Server Compact Edition. Alle diese Serversysteme haben auch den Vorteil, dass diese auf den mobilen Systemen problemlos eingesetzt werden können, haben aber auch den Nachteil, dass sie meist nicht den Vollen Feature Umfang eines echten SQL Servers bieten können.

Vorbereitung

In diesem Artikel soll es um den SQL Server Compact Edition von Microsoft gehen, diesen wollte ich schon immer mal testen und nun hatte ich mal die Zeit dazu.

Sofern ihr es noch nicht habt könnt ihr den SQL CE Server kostenlos bei Microsoft herunterladen. Nach der Installation arbeiten wir wie gewohnt im Visual Studio.

Implementierung

Die ganze Implementierung der Datenbank, Erzeugung der Tabellen sowie die Anbindung erfolgt aus Visual Studio heraus. Die Funktionen die man dort hat sind aber auch  stark von dem Provider abhängig, so bieten verschiedene Provider mehr oder weniger Funktionalität.

Um eine Datenbank zu einem Projekt hinzuzufügen öffnet einfach den Projektmappen-Explorer (Ansicht->Projektmappen-Explorer) und Klickt mit der rechten Maustaste auf euer Projekt und dann auf "Hinzufügen"->"Komponente..." und wählt eine Lokale Datenbank aus. In dem Datenbank Assistent Fenster klickt nun 2 Mal auf "Zurück" um auf die erste Seite des Assistenten zu gelangen.

Klickt nun auf "Neue Verbindung". In dem folgendem Fenster sollte man darauf achten, dass als Datenquelle "Microsoft SQL Server Compact 3.5" ausgewählt ist.

Bild 1: Datenbank Konfiguration

Klickt nun auf "Erstellen..." nun solltet ihr das Fenster aus Bild 1 sehen. Wählt oben den Speicherort eurer Datenbank und legt wenn nötig ein Passwort fest um die Datenbank zu verschlüsseln. Bestätigt das Ganze noch zwei Mal mit OK. Visual Studio sollte euch dann darauf hinweisen, dass ihr vorhabt eine Lokale Datenbank zu verwenden und schlägt euch vor diese in euer Projekt zu importieren - das nehmen wir gerne an.

Visual Studio fügt die neu erzeugte Datenbank Datei dem Projekt hinzu und setzt auch die nötigen Verweise auf System.Data und auf System.Data.SqlServerCe.

Anlegen der Tabellen

Beim Anlegen der Tabellen in unserer Datenbank ist uns Visual Studio natürlich ebenfalls sehr behilflich. Öffnet einfach den Server-Explorer (Ansicht->Server-Explorer) und erweitert eure frisch angelegte Datenbank. (Eventuell müsst ihr auch ein Passwort angeben wenn ihr die Datenbank verschlüsselt habt)

Klickt nun mit der rechten Maustaste auf Tabellen und wählt "Tabelle erstellen" um den Tabellen Assistenten zu starten.

Bild 2: Tabellen Assistent

Hier könnt ihr eure Tabelle anlegen und konfigurieren. Wenn ihr die nun fertige Tabelle im Server-Explorer rechts anklickt und dann "Tabelleneigenschaften" wählt bekommt ihr noch mehr Konfigurationsmöglichkeiten wie etwa Beziehungen.

Bereits beim Erstellen der Tabellen ist es euch vielleicht schon aufgefallen, dass es nicht so viele Datentypen zur Auswahl gibt wie in einem richtigen SQL Server aber das sind nicht die einzigen Einschränkungen...

Arbeiten mit der Datenbank

Das Arbeiten mit der Datenbank gestaltet sich nicht anders als mit anderen Datenbanken. Die Objekte die man dafür benötigt heißen sogar fast gleich. Alle Klasse die man nutzt haben noch den Zusatz "Ce", also statt "SqlCommand" heißt es nun "SqlCeCommand".

Und auch die Nutzung unterscheidet sich nur geringfügig:

Datenbank Verbindung herstellen:

        private SqlCeConnection con;
        private string dbLocation = Environment.CurrentDirectory + "\\clipboard.sdf";
        private string conString;

        private void connectDB(){
            conString = "Data Source=\"" + dbLocation + "\"; Password=\"bigbasti.com\"; Encrypt=True";
            con = new SqlCeConnection(conString);
            con.Open();
        }

Eine Select Abfrage durchführen:

        ///
        /// Führt einen Select Befehl auf der Datenbank aus und gibt das ergebnis in einer DataTable zurück
        ///
        ///Der auszuführende Befehl
        /// Return: Ein DataTable mit den ausgelesenen Daten
        public DataTable executeSelect(string query) {
            connectDB();
            DataTable dt = new DataTable();
            SqlCeCommand com = new SqlCeCommand(query, con);
            SqlCeDataAdapter sad = new SqlCeDataAdapter(com);

            sad.Fill(dt);
            con.Close();
            return dt;
        }

        public int checkDouble(string link, string date) {
            int retVal;
            using (SqlCeConnection con = new SqlCeConnection(conString)) {
                con.Open();

                //Doppelte Einträge verhindern
                DataTable dt = executeSelect("SELECT * FROM cp_link WHERE link LIKE '" + link + "'");
                if (dt.Rows.Count > 0) {
                    executeNonQuery("DELETE FROM cp_link WHERE link LIKE '" + link + "'");
                }
            }
            return retVal;
        }

UPDATE, DELETE und INSERT:

        ///
        /// Executes an SQL statement against the SqlCeConnection and returns
        /// the number of rows affected.You also can use ExecuteNonQuery to
        /// change the data in a database without using a DataSet by executing
        /// UPDATE, INSERT, or DELETE statements.
        ///
        ///Der Befehl der ausgeführt werden soll
        /// The number of rows affected.
        public int executeNonQuery(string q) {
            int retVal;
            using (SqlCeConnection con = new SqlCeConnection(conString)) {
                con.Open();
                using (SqlCeCommand com = new SqlCeCommand(q, con)) {
                    retVal = com.ExecuteNonQuery();
                }
            }
            return retVal;
        }
        public int doSomeInsert(string link, string date) {
            int retVal;
            using (SqlCeConnection con = new SqlCeConnection(conString)) {
                con.Open();
                using (SqlCeCommand com = new SqlCeCommand("INSERT INTO cp_link  (link, date) VALUES (@link, @date )", con)) {
                    com.Parameters.AddWithValue("@link", link);
                    com.Parameters.AddWithValue("@date", date);
                    retVal = com.ExecuteNonQuery();
                }
            }
            return retVal;
        }

Hier gibts eigentlich nichts besonderes. Leider hat man hier, da es eine Compact Edition ist nicht so viele Befehle zur Verfügung wie im Original. So fehlt zB. auch der TRUNCAT Befehl wie ich erstaunt feststellen musste. Ich habe da nicht noch weiter recherchiert was noch alles fehlt, da ich für das was ich gemacht habe keine besonderen Aktionen benötigte.

Deployment

Wenn ihr das Projekt über ein Setup-Projekt deployen wollt dann sollte da eigentlich nichts schief gehen. Ihr könnt aber natürlich auch ohne ein extra Setup-Projekt deployen, dazu solltet ihr folgende Schritte machen:

1. Öffnet die Eigenschaften eures Projekts
2. Öffnet dort den "Veröffentlichen" (Publish) Tab
3. Klickt auf den Knopf "Erforderliche Komponenten"
4. Sucht den Eintrag "SQL Server Compact Edition 3.5" und entfernt das Häkchen und schließt die Eigenschaften
5. Nun benötigen wir die erforderlichen DLL Dateien, diese liegen in "C:\Programe\Microsoft SQL Server Compact Edition\"
6. Es sind 7 oder auch mehr Dateien, abhängig davon wie viele Sprachen installiert sind (siehe Bild links)
7. Markiert diese DLLs und zieht diese direkt in den Projektmappen-Explorer, da mit diese DLLs dem Projekt hinzugefügt werden
8. Markiert die neuen DLLs in dem Projektmappen-Explorer -> klickt mit der rechten Maustaste darauf und wählt "Eigenschaften"
9. Setzt die Eigenschaft "In Ausgabeverzeichnis kopieren" auf "Kopieren, wenn neuer" damit ihr immer die Aktuelle Version im Build Verzeichnis habt
10. Klickt im Projektmappen-Explorer mit der rechten Maustaste auf System.Data.SqlServerCe und wählt Eigenschaften
11. Setzt hier die Eigenschaft "Lokale Kopie" auf True. Dieser Schritt ist nötig damit das Programm lokal nach der DLL sucht und nicht versucht sich diese aus dem GAC (Global Assembly Cache) zu holen.

Und das war es eigentlich schon. Nun könnt ihr das Projekt problemlos deployen.