Einführung in ASP.NET Web Pages und Razor Syntax

Was sind ASP.NET Web Pages bzw. die Razor Syntax?

ASP.NET ist eine schlanke, schnelle und einfache Technologie, um dynamische Webinhalte zu erzeugen. Dynamische Webinhalte entstehen aus dem Zusammenspiel von Frontend-Technologien (etwa HTML 5, CSS 3 und JavaScript) und Servertechnologien (ASP.NET Web Pages, Razor Engine). Aus dieser Verbindung entstehen Webseiten und Webanwendungen, die auf Datenbanken zugreifen, serverseitige Prüfungen und Logik ausführen, E-Mails versenden oder andere Webdienste ansprechen.

Microsoft liefert darüber hinaus zahlreiche „Helper“ mit – kleine Erweiterungen für verschiedene Einsatzgebiete der ASP.NET Web Pages. Die aktuelle ASP.NET Web Helpers Library enthält unter anderem Helper für diese Themen:

• Authentifizierung und Autorisierung
• Captcha-Validierung
• Twitter-Profil und -Suche
• Gravatar-Bilder
• Bing-Suche
• und vieles mehr

Was ist der Unterschied zu anderen ASP.NET Technologien?

Innerhalb des ASP.NET-Frameworks gibt es weitere Technologien, mit denen sich dynamische Webseiten bauen lassen. Die folgende Übersicht zeigt, worauf sie jeweils zielen:

• ASP.NET Web Forms: baut auf der klassischen Windows-Oberflächenprogrammierung (Windows Forms) auf, bringt entsprechend ähnliche Steuerelemente mit (Button, Checkbox, Liste …) und arbeitet ereignisbasiert. Für Entwicklerinnen und Entwickler mit Windows-Forms-Hintergrund ist der Umstieg daher klein. Weite Teile der Darstellung (HTML, CSS …) sind stark abstrahiert – bei passenden Steuerelementen gibt es nur wenige Berührungspunkte mit den klassischen Webclient-Technologien.
• ASP.NET MVC: legt den Schwerpunkt auf die Trennung der Zuständigkeiten und die Testbarkeit des Systems. Dafür setzt es das Model-View-Controller-Muster um, das Logik, Daten und Darstellung voneinander trennt. Die Client-Logik ist nur wenig abstrahiert; im Vordergrund stehen Gestaltungsfreiheit und Funktionsumfang, weshalb fundierte Kenntnisse in HTML 5, CSS 3 und JavaScript meist nötig sind.

Zusammen mit den ASP.NET Web Pages bilden diese drei Technologien das Webentwicklungs-Portfolio von Microsoft. Alle drei werden vom selben Team weiterentwickelt, sodass sich viele Grundlagen in allen wiederfinden und es zahlreiche Überschneidungen gibt.

Welche Technologie die richtige ist, hängt stark vom künftigen Einsatzgebiet der Anwendung ab – und von Vorwissen und Erfahrung des Entwicklungsteams. ASP.NET Web Pages lohnt sich besonders, wenn das Team bisher nicht mit anderen ASP.NET-Technologien gearbeitet hat und eher aus der reinen Webclient-Entwicklung kommt. Sinnvoll ist es außerdem, wenn eine Website nur wenig dynamische Anteile hat und überwiegend statisch ist.

Genau so sieht es auf vielen Unternehmenswebsites aus: Sie veröffentlichen keinen dynamischen Produktkatalog, einzig das Kontaktformular ist ein dynamischer Baustein. Deshalb schauen wir uns im Beispiel genau das an.

Razor Syntax

Bevor wir zum Beispiel kommen, sollten wir wissen, was die Razor-Syntax bietet und wofür sie taugt.

Mit der Razor-Syntax lassen sich serverseitige Code-Fragmente in HTML einbetten. Diese Fragmente können in C# oder Visual Basic geschrieben sein – wir verwenden hier ausschließlich C#. Die Razor Engine liest die Syntax und führt den enthaltenen Code aus. Die wichtigsten Elemente sind:

@{ var count = 7; }
@{ var messageTitle = "Hello World"; }
@{
var today = DateTime.Now;
var welcomeMessage = "Today is " + today;
}
This is your @count visit
Welcome: @welcomeMessage

Alles Weitere erklären wir an der jeweiligen Stelle im Tutorial.

Tutorial: Kontaktformular

Um das Ganze an einem Beispiel zu zeigen, bauen wir nun gemeinsam ein Kontaktformular. Das hat einen praktischen Nebeneffekt: Fast jede Website braucht eines oder möchte eines anbieten. Außerdem sehen wir dabei mehrere Dinge auf einmal:

• Layouts
• serverseitige Validierung der Eingaben
• serverseitige Logik zum Auslesen der Formularfelder
• serverseitiger Versand einer E-Mail

Layout anlegen

Zuerst legen wir in WebMatrix ein neues Projekt an: New > Empty page. Anschließend erstellen wir eine Datei für das Layout.

Was ist ein Layout? Ein Layout definiert das Grundgerüst einer Website. Darin wird häufig festgelegt, wo und wie Navigation, Kopfzeile, Fußzeile und natürlich der Inhaltsbereich dargestellt werden. Der Einfachheit halber nehmen wir ein sehr schlichtes Layout:

@Page.Title
<h2>Mein Tutorial</h2>
@RenderBody()
© @DateTime.Now.Year Mein Tutorial

Ihnen fallen sicher die Razor-Elemente an drei Stellen auf:

• @Page.Title: Hier wird der Inhalt der Title-Eigenschaft des Page-Objekts ausgegeben.
• @RenderBody(): ein sehr wichtiges Element im Layout – es legt fest, wo der Inhaltsbereich gerendert wird.
• @DateTime.Now.Year: gibt das aktuelle Jahr aus.

Diese Datei speichern wir als „_Layout.cshtml“.

Nun legen wir die Seite für unser Kontaktformular an: „Contact.cshtml“.

Damit die Layout-Funktion greift, schreiben wir folgende Zeilen in diese Datei:

@{
Layout = "~/_Layout.cshtml";
}
<h2>Kontakt</h2>

Mit der Layout-Angabe bestimmen wir, welche Layout-Datei für die Darstellung verwendet wird. Die Razor Engine nimmt diese Datei, sucht darin nach „@RenderBody()“ und rendert dort die eigentliche Ausgabe.

<h2>Mein Tutorial</h2>
<h2>Kontakt</h2>
© 2013 Mein Tutorial

HTML Kontaktformular erstellen

Wir bauen ein einfaches Formular für ein paar Angaben. Wichtig sind die name-Attribute – nur darüber lassen sich die Eingabefelder später serverseitig auslesen:

@{
Layout = "~/_Layout.cshtml";
}
<h2>Kontakt</h2>
<form method="post">
  <fieldset>
    <legend>Kontaktdaten</legend>
    Name: <input type="text" name="name" /><br />
    E-Mail-Adresse: <input type="text" name="mail" /><br />
  </fieldset>
  <fieldset>
    <legend>Nachricht</legend>
    Betreff: <input type="text" name="title" /><br />
    Inhalt: <textarea name="message"></textarea><br />
  </fieldset>
  <input type="submit" value="Senden" />
</form>

Serverseitiges Auslesen der Eingabefelder

Die Eingabefelder lassen sich im Code bequem auslesen. Vorher prüfen wir allerdings, ob die Anfrage per POST kam: Ein einfaches Laden der Seite erzeugt eine GET-Anfrage, ein Klick auf den Absende-Button bei method="post" eine POST-Anfrage.

@{
Layout = "~/_Layout.cshtml";
var name = "";
var mail = "";
var title = "";
var message = "";
if(IsPost){
name = Request.Form["name"];
mail = Request.Form["mail"];
title = Request.Form["title"];
message = Request.Form["message"];
}
}
<h2>Kontakt</h2>
…

Serverseitige Überprüfung der Daten

Validierungsregeln lassen sich über einfache statische Methoden anlegen und ihre Gültigkeit später abfragen. Für die Anzeige von Validierungsfehlern gibt es ebenfalls Helper:

@{
Layout = "~/_Layout.cshtml";
Validation.RequireField("name", "Ein Name wird benötigt.");
Validation.RequireField("mail", "Ihre E-Mail-Adresse wird benötigt.");
Validation.RequireField("title", "Ein Betreff wird benötigt.");
Validation.RequireField("message", "Eine Nachricht wird benötigt.");
var name = "";
var mail = "";
var title = "";
var message = "";
if(IsPost)
{
if(Validation.IsValid())
{
name = Request.Form["name"];
mail = Request.Form["mail"];
title = Request.Form["title"];
message = Request.Form["message"];
}
}
}
<h2>Kontakt</h2>
@Html.ValidationSummary()

<h2>Kontakt</h2>
<form method="post">
  <fieldset>
    <legend>Kontaktdaten</legend>
    Name: <input type="text" name="name" /> @Html.ValidationMessage("name")<br />
    E-Mail-Adresse: <input type="text" name="mail" /> @Html.ValidationMessage("mail")<br />
  </fieldset>
  <fieldset>
    <legend>Nachricht</legend>
    Betreff: <input type="text" name="title" /> @Html.ValidationMessage("title")<br />
    Inhalt: <textarea name="message"></textarea> @Html.ValidationMessage("message")<br />
  </fieldset>
  <input type="submit" value="Senden" />
</form>

Versenden einer E-Mail

Für den Versand von E-Mails gibt es ebenfalls eingebaute Helper, die einem die Arbeit abnehmen. Dafür wurde die WebMail-Klasse ergänzt. Nach ein paar Angaben zum SMTP-Server lassen sich E-Mails schlicht versenden:

@{
Layout = "~/_Layout.cshtml";
Validation.RequireField("name", "Ein Name wird benötigt.");
Validation.RequireField("mail", "Ihre E-Mail-Adresse wird benötigt.");
Validation.RequireField("title", "Ein Betreff wird benötigt.");
Validation.RequireField("message", "Eine Nachricht wird benötigt.");
var name = "";
var mail = "";
var title = "";
var message = "";
if(IsPost
&& Validation.IsValid())
{
name = Request.Form["name"];
mail = Request.Form["mail"];
title = Request.Form["title"];
message = Request.Form["message"];
WebMail.SmtpServer = "SMTP-Host";
WebMail.SmtpPort = 25;
WebMail.UserName = "benutzername";
WebMail.Password = "passwort";
WebMail.From = "info@website.de";
WebMail.Send(to: WebMail.From,
subject: "Kontaktformular: " + title,
body: name + " " + mail + " " + message);
}
}
<h2>Kontakt</h2>
…

Was noch fehlt

• CSS-Gestaltung
• weitere Prüfungen, etwa clientseitig oder auf eine gültige E-Mail-Adresse
• Einbau von Captchas gegen SPAM
• Abfangen von Fehlern
• Anzeige einer Versandbestätigung

Weitere Informationen, zahlreiche Erklärungen, eine Einführung, Tutorials und Videoübungen finden Sie auf der offiziellen Website https://dotnet.microsoft.com/de-de/apps/aspnet/web-apps. Besonders zu empfehlen ist das neunteilige Tutorial für Einsteiger: https://dotnet.microsoft.com/de-de/apps/aspnet. Dort werden unter anderem diese Themen behandelt:

• Datenbankzugriff
• tabellarische Datendarstellung
• Deployment