April 2013 / ASP.NET MVC 4

Bereits vor ca. einem Jahr habe ich einen Eintrag über ASP.NET MVC 3 geschrieben, als ich dieses Framework in einem Schulprojekt verwendet habe.
Nun werde ich in Kürze damit beginnen, die erste Webapplikation in unserer Firma zu entwickeln. Um das Ganze etwas aufzufrischen, werde ich mich daher nochmals mit MVC befassen, diesmal werde ich jedoch effektiv auf den Code, bzw. die Erstellung der Website eingehen.

Neues Projekt

Um alles zu verstehen, beginne ich mit einem Standard Projekt.
Danach sieht das Projekt folgendermassen aus:

 

Dieses Standard-Projekt hat keine Master-Page, welche den Header, den Footer usw. zur Verfügung stellt. Daher erstelle ich zuerst diese Master-Page "Site.Master" im Ordner Views/Shared:

 

Anschliessend wähle ich Masterseite aus, gebe einen Namen und klicke auf Hinzufügen:

Diese MasterPage enthält noch nicht allzu viel. Sie kann nun mithilfe von ganz normalen HTML-Tags aufgebaut werden. Meistens wird ein Aufbau mit verschiedenen Divs wie z.B. Header, Content und Footer realisiert.
Am Wichtigsten sind eigentlich die beiden folgenden Zeilen:

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>

Diese Zeilen bilden sozusagen einen "Platzhalter" für die eigentliche View, welche später vom Controller zurückgegeben wird. Daher ist der Text unter ID (also hier "ContentPlaceHolder1") auch wichtig, da man ihn beim Hinzufügen einer View braucht.

Als nächstes muss ein Controller erstellt werden:

 

Anschliessend wird folgendes Fenster angezeigt, in dem man den Controller-Namen definieren muss.

 

Ich nenne meinen Controller "HomeController", da er die Startseite verwalten wird.
Im Controller befindet sich nun noch nicht viel Code.

 

 

Er hat das ActionResult "Index", welches die View zurückgeben will. Jedoch ist noch keine vorhanden.
Deshalb fügen wir nun eine hinzu:

 

 Anschliessend zeigt sich die folgende Form.

Zu beachten hier ist nun, dass der erstellte Site.Master ausgewählt ist und die oben erwähnte ContentPlaceHolder-ID stimmt, ansonsten kann die View nicht hinzugefügt werden.

Nun kann die Website aufgerufen werden, jedoch ist sie noch fast leer.
Zuerst empfiehlt es sich, eine Navigation hinzuzufügen und die css-Datei, welche sich unter Content befindet, anzupassen, damit die Website bereits nach etwas aussieht.

Das Design der Navigation wird ebenfalls über das css geregelt.
Die Navigation an sich muss nun jedoch nicht mehr mit simplem HTML realisiert werden.
MVC bietet einen HTMLHelper an, der die Links zusammensetzt. Um die möglichen Links zu
definieren erstelle ich verschiedene ActionResults im HomeController.
Ein Link wird dann folgendermassen zusammengesetzt:

 <%: Html.ActionLink("Kontakt", "Contact", "Home") %>

Mit dem %-Zeichen wird deklariert, dass nun C#-Code folgen wird.
Mit Html.ActionLink kann ein neuer Link hinzugefügt werden.
Der erste Parameter von "ActionLink", hier "Kontakt", ist der Text, welcher schlussendlich angezeigt wird.
Der zweite Parameter, hier "Contact", ist das ActionResult des Controllers.
Der dritte Parameter, hier "Home", ist der Name des Controllers.
Der HTML-Output dieser Methode sieht folgendermassen aus und könnte theoretisch auch direkt so verwendet werden:

<a href="../../Home/Contact">Kontakt</a>

Auf dieselbe Art können auch andere HTML-Elemente generiert werden. Z.B. Forms, Input-Felder, Labels usw.
Diese können bei Strongly-typed Views (Siehe MVC 3-Eintrag)direkt an die Eigenschaften des Models gebunden werden.

Um z.B. bei einem Login-Fenster ein Label mit dem Text "Benutzername" und dazu das passende Input-Feld für die Eigenschaft "Benutzername" des Models zu erstellen, kann folgender Code genutzt werden:

<%: Html.LabelFor(m => m.UserName) %>
<%: Html.TextBoxFor(m => m.UserName) %>

Das könnte dann, durch ein passendes css, so aussehen:





Damit die Benutzereingaben auch wieder zurückgesendet werden können, müssen diese in eine Form gelegt werden.
Diese wird folgendermassen erstellt:

<% using (Html.BeginForm()) { %>

Und so wieder geschlossen:

<% } %>

Um die Form abzuschicken, braucht es natürlich noch einen Button. dieser muss wie gehabt in HTML geschrieben werden:

<input type="submit" value="Anmelden" />

Um die Daten auswerten zu können, muss im Controller ein ActionResult erstellt werden, welches denselben Namen wie bereits das ActionResult hat, welches die View aufruft.
Zusätzlich muss vor dieses ActionResult folgende Eigenschaft gesetzt werden:

[HttpPost]

So ist klar definiert, welche Methode wann aufgerufen wird. Ebenfalls muss sie als Übergabeparameter das zu empfangende Model haben.
Hier ein Beispiel mit dem ActionResult Register:

[AllowAnonymous]
public ActionResult Register()
{
     return View();
}

[HttpPost]
[AllowAnonymous]
public ActionResult Register(RegisterModel model)
{
     // Code
}