Einführung in ASP.NET Web Pages und Razor Syntax
Was sind ASP.NET Web Pages bzw. die Razor Syntax?
Bei ASP.NET handelt es sich um eine leicht-gewichtige, schnelle und einfache Technologie zur Erstellung von dynamischen Webinhalten. Dynamische Webhinhalte bestehen hierbei aus einer Kombination von Frontend-Technologien (z.B. HTML 5, CSS 3 & JavaScript) und Server-Technologien (ASP.NET Web Pages, Razor Engine). Durch diese Verschmelzung sind Internetseiten bzw. Internet-Anwendungen möglich, welche auf Datenbanken zugreifen, server-seitige Überprüfungen und Logiken durchführen, E-Mails versenden oder auch andere Web-Services anfragen.
Darüber hinaus liefert Microsoft zahlreiche “Helper”, welche kleine Erweiterungen für verschiedene Anwendungsgebiete der ASP.NET Web Pages darstellen. In der aktuellen ASP.NET Web Helpers Library finden sich somit unter anderem “Helper” für folgende Themen:
Authentifizierung & Autorisierung
Captcha Validierung
Twitter Profile & Suche
Gravatar Bilder
Bing Suche
und vieles mehr…
Was ist der Unterschied zu anderen ASP.NET Technologien?
Im ASP.NET Technologie Stack befinden sich noch weitere Technologien, welche ebenfalls zur Erstellung von dynamischen Webseiten eingesetzt werden können. Nachfolgend eine Auflistung welcher Fokus jeweils zugrunde liegt:
ASP.NET Web Forms: lehnt sich an der klassischen Windows-Oberflächen Programmierung (Windows Forms) an, beinhaltet somit ähnliche Controls (Button, Checkbox, List, …) und basiert auf einer event-basierten Interaktion. Der Umstieg soll hierbei für Programmierer, welche Windows Forms entwickelt haben, möglichst gering sein. Viele Dinge der Darstellung (HTML, CSS, …) sind stark abstrahiert, so dass bei dem Einsatz von geeigneten Controls, nur wenig Berührungspunkte mit klassischen Web-Client-Technologien stattfinden.
ASP.NET MVC: fokussiert sich stark auf eine Separierung von Belangen und Testbarkeit des Software-Systems. Um dies zu erreichen, wird das Model-View-Controller Pattern implementiert, welches eine Trennung zwischen Logik, Daten und Darstellung sicherstellt. Die Client-Logik ist nur wenig abstrahiert, die Individualisierung und Funktionsvielfalt stehen hierbei im Fokus, sodass eine tiefe Kenntnis von Web-Client-Technologien (HTML 5, CSS 3, JavaScript) oft notwendig ist.
Zusammen mit den ASP.NET Web Pages bieten diese drei Technologien das Portfolio für die Web-Entwicklung aus dem Hause Microsoft. Auch werden alle drei von demselben Team weiterentwickelt, sodass viele Grundlagen-Technologien in allen zu finden sind bzw. zahlreiche Überschneidungen existieren.
Die Wahl, welche Technologie zu bevorzugen ist, hängt stark von dem zukünftigen Anwendungsgebiet der Internet-Anwendung, sowie den Vorkenntnissen und Erfahrung des Entwicklungsteams ab. ASP.NET Web Pages ist vor allem dann sinnvoll, wenn das Entwicklungsteam bisher noch nicht mit anderen ASP.NET Technologien gearbeitet hat und eher aus der reinen Web-Client-Entwicklung kommt. Auch kann es sinnvoll sein ASP.NET Web Pages dann zu verwenden, wenn eine Internetseite nur geringe dynamische Inhalte aufweist und der größte Teil statisch ist.
Dies ist zum Beispiel auf vielen Unternehmensseiten der Fall, welche keine dynamischen Produkt-Kataloge veröffentlichen, sondern einzig das Kontakt-Formular eine dynamische Komponente darstellt. Genau aus diesem Grund betrachten wir dies gemeinsam im Beispiel.
Razor Syntax
Bevor wir uns gemeinsam dem Beispiel (Tutorial) zuwenden können, müssen wir verstehen, was die Razor Syntax anbietet bzw. wofür diese genutzt werden kann.
Mithilfe der Razor Syntax können serverseitige Code-Fragmente in HTML-Code eingebettet werden. Diese Fragmente können sowohl in C#, als auch in Visual Basic vorhanden sein – wir werden hier allerdings ausschließlich C# verwenden. Die Razor Engine parst diese Syntax und führt den darin enthaltenen Code aus. Nachfolgend die wichtigsten Elemente:
@{ var count = 7; }
@{ var messageTitle = „Hello World“; }
@{
var today = DateTime.Now;
var welcomeMessage = „Heute ist “ + today;
}
Dies ist dein @count Besuch
Willkommen: @welcomeMessage
Alles weitere wird an der jeweiligen Stelle innerhalb des Tutorials erläutert.
Tutorial: Kontaktformular
Um das Ganze an einem Beispiel zu zeigen, werden wir nun zusammen ein Kontaktformular erstellen. Dies hat auch einen praktischen Effekt: fast jede Internetseite benötigt dies bzw. will dies anbieten. Darüber hinaus können wir uns verschiedene Dinge in einem mit ansehen:
Layouts
serverseitige Überprüfung der Eingaben
serverseitige Logik zum Auslesen der Formularfelder
serverseitiges Versenden einer E-Mail
Layout anlegen
Zunächst müssen wir ein neues Projekt innerhalb von WebMatrix anlegen: Neu > Leere Seite. Danach legen wir eine Datei mit dem Layout an.
Was ist ein Layout? Ein Layout definiert den Grundaufbau einer Internetseite. Innerhalb eines Layouts wird oft definiert, wo und wie die Navigation, der Kopf, die Fußzeile und natürlich der Inhaltsbereich dargestellt wird. Der Einfachheit halber werden wir uns hierbei etwas sehr simples als Layout nehmen:
@Page.Title
Mein Tutorial
@RenderBody()
© @DateTime.Now.Year Mein Tutorial
Euch fallen sicherlich schon an drei Stellen Razor Syntax Elemente auf:
@Page.Title: An dieser Stelle wird der Inhalt der Title-Eigenschaft auf dem Page-Objekt ausgegeben.
@RenderBody(): Dies ist ein sehr wichtiges Element bei Layout: hiermit wird definiert, wo der Inhaltsbereich dargestellt werden soll.
@DateTime.Now.Year: Das aktuelle Jahr wird ausgegeben.
Diese Datei speichern wir nun unter “_Layout.cshtml”.
Nun erstellen wir die Seite für unser Kontaktformular: “Contact.cshtml”.
Um die Layout Funktionalität zu nutzen, schreiben wir folgende Zeilen in diese Datei:
@{
Layout = „~/_Layout.cshtml“;
}
Kontakt
Mithilfe der Layout-Definiton geben wir an, welche Layout-Datei zur Darstellung genommen werden soll. Die Razor-Engine nimmt dann diese Datei, sucht nach “@RenderBody()” und rendert dort die eigentliche Ausgabe.
Mein Tutorial
Kontakt
© 2013 Mein Tutorial
HTML Kontaktformular erstellen
Wir erstellen nun ein einfaches Formular, auf dem ein paar Informationen eingegeben werden können. Wichtig ist hierbei die Angabe der Name-Attribute, um die Eingabefelder anschließend serverseitig auslesen zu können:
@{
Layout = „~/_Layout.cshtml“;
}
Kontakt
Kontaktdaten
Name:
E-Mail Adresse:
Nachricht
Betreff:
Inhalt:
Serverseitiges Auslesen der Eingabefelder
Die Eingabefelder können wir auf einfache Weise in unserem Code auslesen. Zuvor prüfen wir allerdings noch, ob der Request per POST gesendet wurde. Ein einfaches Laden der Seite führt zu einem GET-Request, der Klick auf den Absenden-Button durch die Angabe von method=“post“ führt zu einem POST-Request.
@{
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“];
}
}
Kontakt
…
Serverseitige Überprüfung der Daten
Zur Überprüfung der Eingabefelder nutzen wir einen eingebauten Validation-Helper der ASP.NET Web Pages – es ist somit kein zusätzlich NuGet-Paket notwendig.
Durch einfache statische Methoden können Validierungsregeln angelegt und deren Gültigkeit später abgefragt werden. Ebenso gibt es Helper für die Darstellung der Validierungsfehler:
@{
Layout = „~/_Layout.cshtml“;
Validation.RequireField(„name“, „Die Angabe eines Namens ist erforderlich.“);
Validation.RequireField(„mail“, „Die Angabe einer E-Mail Adresse ist erforderlich.“);
Validation.RequireField(„title“, „Die Angabe eines Titels ist erforderlich.“);
Validation.RequireField(„message“, „Die Angabe einer Nachricht ist erforderlich.“);
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“];
}
}
}
Kontakt
@Html.ValidationSummary()
Kontaktdaten
Name: @Html.ValidationMessage(„name“)
E-Mail Adresse: @Html.ValidationMessage(„mail“)
Nachricht
Betreff: @Html.ValidationMessage(„title“)
Inhalt: @Html.ValidationMessage(„message“)
Versenden einer E-Mail
Auch für das Versenden von E-Mails gibt es bereits eingebaute Helper, welche euch das Leben erleichtern. Hierfür wurde die Klasse WebMail hinzugefügt. Nach einigen SMTP-Server Angaben können einfach E-Mails versendet werden:
no-repeat;left top;;
auto
@{
Layout = „~/_Layout.cshtml“;
Validation.RequireField(„name“, „Die Angabe eines Namens ist erforderlich.“);
Validation.RequireField(„mail“, „Die Angabe einer E-Mail Adresse ist erforderlich.“);
Validation.RequireField(„title“, „Die Angabe eines Titels ist erforderlich.“);
Validation.RequireField(„message“, „Die Angabe einer Nachricht ist erforderlich.“);
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 = „user-name“;
WebMail.Password = „password“;
WebMail.From = „info@website.de“;
WebMail.Send(to: WebMail.From,
subject: „Contact Form: “ + title,
body: name + “ “ + mail + “ “ + message
);
}
}
Kontakt
…
Was nun noch fehlt?
Zum Produktiv-Code fehlt natürlich noch ein bisschen was – unter anderem:
CSS-Design
Weitere Überprüfungen, z.B. clientseitig, valide E-Mail Adresse, …
Einbau von Captchas gegen SPAM
Abfangen von Fehlern
Anzeige einer Versand-Bestätigung
Weitere Informationen
Weitere Informationen soviel zahlreiche Erklärungen, Tutorials und Video-Übungen finden wir auf der offiziellen Seite http://www.asp.net/web-pages. Insbesondere ist das 9-teilige Einsteiger Tutorial empfehlenswert: http://www.asp.net/web-pages/tutorials/introducing-aspnet-web-pages-2/getting-started. Hier werden zum Beispiel die folgenden Themen besprochen:
Datenbankzugriff
Tabellarische Daten-Darstellung
Deployment
