Kundenlogin

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

Nachdem wir in den vergangenen Artikeln über die WebMatrix Grundlagen, das Testen und Deployment gesprochen haben, geht es nun mit der Programmierung los. Aufgrund der neuen Version von WebMatrix werde ich in allen nachfolgenden Artikeln WebMatrix 3 verwenden.

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

Hierbei handelt es sich um eine leicht-gewichtige, schnelle und einfache Technologie zur Erstellung von dynamischen Webinhalten. Dynamsche 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 dnyamische 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:

<!-- Einzelne Anweisungs-Blöcke -->
@{ var count = 7; }
@{ var messageTitle = "Hello World"; }
<!-- Multi-Anweisungs Block -->
@{
   var today = DateTime.Now;
   var welcomeMessage = "Heute ist " + today;
}
<!-- Inline Anweisungen -->
<p>Dies ist dein @count Besuch</p>
<p>Willkommen: @welcomeMessage</p>

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:

<!DOCTYPE html>
<html>
 <head>
   <title>@Page.Title</title>
 </head>
 <body>
   <div id="container">
       <div id="header">
         <h1>Mein Tutorial</h1>
       </div>
       <div id="main">
         @RenderBody()
       </div>
       <div id="footer">
         &copy; @DateTime.Now.Year Mein Tutorial
       </div>
   </div>
 </body>
</html>

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";
}
<h2>Kontakt</h2>

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.

Wenn ihr nun die Seite startet (rechter Mausklick auf Contact.cshtml und “Starten in Browser”), wird folgendes angezeigt:

Mein Tutorial

Ein Blick in den Quelltext der Seite offenbart, das alles wie erwartet funktioniert hat:

<!DOCTYPE html>
<html>
 <head>
   <title></title>
 </head>
 <body>
   <div id="container">
       <div id="header">
         <h1>Mein Tutorial</h1>
       </div>
       <div id="main">
         <h2>Kontakt</h2>
       </div>
       <div id="footer">
         &copy; 2013 Mein Tutorial
       </div>
   </div>
 </body>
</html>

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";
}
<h2>Kontakt</h2>
<form method="post">
   <fieldset>
       <legend>Kontaktdaten</legend>
       <p>
           <label>Name: <input name="name" type="text"/></label><br/>
           <label>E-Mail Adresse: <input name="mail" type="email"/></label><br/>
       </p>
   </fieldset>
   <fieldset>
       <legend>Nachricht</legend>
       <p>
           <label>Betreff: <input name="title" type="text"/></label><br/>
           <label>Inhalt: <textarea name="message"></textarea></label><br/>
       </p>
   </fieldset>
   <p>
       <input type="submit" value="Absenden">
   </p>
</form>

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"];
   }
}
<h2>Kontakt</h2>
...

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"];
       }
   }
}
<h2>Kontakt</h2>
@Html.ValidationSummary()
<form method="post">
   <fieldset>
       <legend>Kontaktdaten</legend>
       <p>
           <label>Name: <input name="name" type="text"/></label>@Html.ValidationMessage("name")<br/>
           <label>E-Mail Adresse: <input name="mail" type="email"/></label>@Html.ValidationMessage("mail")<br/>
       </p>
   </fieldset>
   <fieldset>
       <legend>Nachricht</legend>
       <p>
           <label>Betreff: <input name="title" type="text"/></label>@Html.ValidationMessage("title")<br/>
           <label>Inhalt: <textarea name="message"></textarea></label>@Html.ValidationMessage("message")<br/>
       </p>
   </fieldset>
   <p>
       <input type="submit" value="Absenden">
   </p>
</form>

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:

@{
   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
       );
   }
}
<h2>Kontakt</h2>
…

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

3 thoughts on “Einführung in ASP.NET Web Pages und Razor Syntax

  1. Kai - 9. August 2013 um 10:08

    Mir ist durchaus bewusst, dass es in diesem Tutorial eher um Razor als um das MVC Pattern ansich geht, aber dieser Artikel spiegelt ja nun wirklich all das wieder, wie man es nun auf keinen Fall machen sollte. Erstmal gehört die Logik nicht in die View sonder in den Controller, desweiteren wird nicht auf Razor html Helper eingegangen sondern alles wird ausschließlich mit direktem HTML Code runtergeschrieben. Es wird kein Model mit Validierungs Attributen verwendet, sondern direkt im Markup definiert.
    Rund um finde ich dieses Tutorial in keinster Weise hilfreich.
    Ich denke das leitet Anfänger eher in die falsche Richtung.

    Reply
    • Marcus - 9. Oktober 2013 um 10:49

      Es geht überhaupt nicht um das MVC-Pattern, sondern um ASP.NET Web Pages (wie auch schon die Überschrift verrät…). ASP.NET Web Pages und ASP.NET MVC sind zwei unterschiedliche Technologien. Demzufolge hat man keine Views, Controller oder Model, sondern die URL wird auf eine physische Seite auf dem Server gemappt.

      Reply
  2. Sascha - 24. September 2017 um 21:18

    Ich kann mich zwischen Razor und Webforms nicht entscheiden.

    Reply

Schreibe einen Kommentar