02297-9095006
info@agent-media.com

Programmierung mit ASP, ASP.NET (MVC) & Razor

Unter dem Namen ASP (Active Server Pages) werden verschiedene Servertechnologien zusammengefasst. Diese wurden seite den Anfangstagen des Internets stetig weiterentwicket. Dabei wurde ASP auch stark von Trends bei PHP beeinflusst. Heute ähnelt die Entwicklung von Onlinepräsenzen mit ASP.NET daher viel stärker der professionellen PHP-Programmierung (mit einem Framework wie Zend oder Symfony) als noch zu Anfang des Jahrtausends.

Die Ursprünge: Classic ASP

Die erste Version dieser Microsoft-Entwicklungen wurde bereits 1996 vorgestellt. Als Gegenentwurf zu PHP erlaubten die ersten Varianten, Daten aus zum Beispiel aus Datenbanken in einfache Scheifen und Abfragen in den HTML-Code zu mischen oder eine Kontakt-E-Mail per Formular zu senden.

Als Programmiersprache kam in der Regel VBScript zum Einsatz, auch, natürlich ebenfalls serverseitig interpretiertes, Javascript war möglich. Ein einfaches Beispiel mit VBScript demonstriert die Vorgehensweise.

<!DOCTYPE html>
<%
    dim title
    title="Meine erste ASP Classic Seite"
    dim headline
    headline="Überschrift der ersten Classic ASP-Seite"
    dim text
    text="Der Inhaltstext über ASP"
%>
<html>
    <head>
        <title><% response.write(title) %></title>
    </head>
    <body>
        <h1><% response.write(headline) %></h1>
        <p>
           <%= text %>
        </p>
    </body>
</html>

Im klassischen ASP-Ansatz arbeitete man viel mit dem Antwort (Response) und Anfrage (Request) Objekten. Die Ausgabe wird in den Response geschrieben. Das erledigt der Aufruf <% response.write(text) %> oder dessen vereinfachte Scheibweise <%= text %>. Das Anfrageobjekt gibt Auskunft über die Daten, die zum Beispiel aus einem Formular stammen können, und vom Nutzer der Webseite per Browser übermittelt wurden.

ASP.NET Forms & Controls

2002 stellte Microsoft das damals revolutionäre NET-Framework vor und es folgten die ASP.NET Forms und Controls. Hiermit konnte man wiederkehrende, einzelne Module einer Webseite, wie zum Beispiel einen Suchfilter, in eigene Codeeinheiten (Klassen) auslagern. Zudem ist die Trennung von Programmcode und Frontend-Design vorgesehen und gehört zum guten Ton unter Software-Developern.

Eine einfache ASP.NET Anwendung

In dieser Form der ASP.NET-Entwicklung gibt es Masterseiten. Sie bestimmen den äußersten Rahmen und somit das Grundlaufbau der einzelner Seite. In einer Masterseite werden Platzhalter definiert. In diese Blöcke können die einzelnen Seiten Inhalte platzieren. So ist es möglich, dass jede Seite Metaangaben Inhalte individuell in die Masterseite einfügt.

Site.master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MyProject.SiteMaster" %>
<!DOCTYPE html>
<html>
    <head>
        <asp:ContentPlaceHolder ID="HeadContent" runat="server" />
    </head>
    <body>
        <form runat="server">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />
        </form>
    </body>
</html>

Die Platzhalter-Elemente werden mit dem generellen Tag-Namespace asp versehen. Man beachte das obligatorische Attribut runat="server". Es sorgt dafür, dass diese Elemente auf dem Server ausgewertet und nicht etwa so wie sie sind in der HTML-Ausgabe angezeigt werden. Außerdem hat eine traditionelle ASP.NET-Masterpage immer ein Formular. Es darf nicht entfernt werden, da sonst Useraktionen (Klicks) im Programm nicht abgehandelt werden können.

Einzelne Seiten, die an der Endung aspx zu Erkennen sind, beziehen sich auf eine bestimmte Masterpage und fügen ihr Inhalt hinzu. Dabei gibt es eine Designdatei, in der für gewöhnlich nur die anzuzeigenden Elemente stehen.

Default.aspx (Designdatei einer einzelnen Seite)

<%@ Page Title="Startseite" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MyProject._Default" %>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h1>
       <asp:Label ID="lblHeadline" runat="server" /> 

    </h1>
    <p>
        Hier geht es zur agent media Homepage: <asp:HyperLink runat="server" ID="hlAgentMedia" />.
    </p>
</asp:Content>

Die Datei beginnt mit einer Deklaration, die den Typ (Page, also Seite) sowie den Meta-Title und die zu verwendende Masterpage benennt. Hier werden zwei ASP.NET Controls genutzt. Das einfachste ist das Label, das dazu dient der Ausgabe Text zuzufügen. Auch Ein weiteres Element ist der Hyperlink. Beide Controls können in einer separaten Code-Datei angesprochen werden. Der Name und der Dateipfad der zuständigen CodeBehind-Klasse ist ebenfalls in der Startdeklaration am Dateianfang zu finden.

Default.aspx.cs

namespace MyProject
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            this.lblHeadline.Text = "Überschrift der ASP.NET-Seite";
            this.hlAgentMedia.NavigateUrl = "http://www.agent-media.com";
            this.hlAgentMedia.Text = "Hier klicken";
        }
    }
}

Hier wird der Text der Überschrift sowie Zielseite und Anchortext des Hyperlinks gesetzt. Die Möglichkeit, Anzeigedaten in einer reinen Quellcode-Datei zuzuweisen, bietet den Vorteil dass auch komplexe Datenanbindungen z.B. an Datenbanken oder Webservices ihren eigenen Platz haben und nicht in der Designdatei erledigt werden müssen.

Zusätzlich zu den vordefinierten Controls wie den erwähnten Hyperlinks und Labels können auch eigene UserControls programmiert werden. Wird zum Beispiel eine Linkliste zu Social Media-Präsenzen benötigt, kann man sich ein entsprechedes Control bauen und an beliebigen Stellen des Webauftritts einpflegen. Ein Webprojekt lässt sich mit der geschilderten, traditionellen ASP.NET-Technik also sehr gur modular aufbauen.

Nachteile des traditionellen ASP.NET

In der beschriebenen Variante von ASP.NET können auch für einfache HTML-Tags eigene Elemente verwendet werden. Dass Microsoft in ASP.NET eigene Designkonstrukte nutzte, führte dazu, dass HTML-Experten und Webdesigner die Frontend-Dateien kaum anpassen konnten. Umgekehrt gab es plötzlich Webentwickler, welche die wichtigsten Internettechnologien HTML und CSS nicht oder kaum verstanden. Außerdem wurde die bei Desktop-Anwendungen gebräuchliche Art, auf Nutzeraktionen, zum Beispiel Klicks, zu reagieren, sehr kompliziert und unpassend auf Webseiten übertragen. ASP.NET-Websites waren dadurch oft wenig hübsch, langsam und das erzeugte HTML war so überfrachtet, dass Suchmaschinen ihre Probleme damit hatten.

ASP.NET MVC & Razor

Glücklicherweise orientierte sich Microsoft an bestehenden Tendenzen in der PHP-Welt und veröffentlichte 2007 ASP.NET MVC. Das Kürzel MVC steht für das Prinzip "Model View Controller." Das Model beinhaltet die Daten in Form eines Objektmodells. Auch von der konkreten Ansicht unabhängige Methoden (Business Logic) werden zum Modell gerechnet. Ein Controller stellt die für eine konkrete Seite benutzten Daten zusammen und übergibt sie an die View (Ansicht). Die View gibt diese Daten mit Hilfe eines Templates aus. Diese Templates beinhalten neben Frontend-Logik wieder die gewohnten HTML-Elemente. Als Templatesprache für die Frontend-Logik (vor allem Schleifen und If-Abfragen) kommt Razor zum Einsatz, welches in seiner Einfachheit wieder ein wenig an Classic ASP erinnert.

Eine simple ASP.NET MVC Anwendung mit Razor

Auch im MVC-Ansatz gibt es Layout-Views. Die Layouts stellen das Grundgerüst der Seite zur Verfügung.

Layout-Datei Views/Shared/_Layout.cshtml

<!DOCTYPE html>
<html>
    <head>
        <title>@ViewBag.Title</title>
    </head>
    <body>
        <section class="main">
            @RenderBody()
        </section>
        <aside>
            @RenderSection("aside", required: false)
        </aside>
    </body>
</html>

Die Razor-Anweisungen beginnen immer mit einem @-Zeichen. Im Titel kommt der ViewBag zum Einsatz. Dies ist eine einfache Ansammlung beliebiger Inhalte. Es gibt im Layout einen Hauptbereich, der mit @RenderBody() ausgegeben wird. Zusätzlich können beliegiege Abschnitte (Sections) hinzugefügt werden, die im Layout per @RenderSection()  aufgerufen werden.

Einzelne Controller füllen den ViewBag mit Texten und die Sections mit Inhalten. Die öffentlichen Methoden eines Controllers entsprechen, wie in den meisten, gängigen MVC-Implementierungen, den einzelnen Webseiten. Sie werden als Actions bezeichnet.

Datei Controllers/HomeController.cs

using System.Web.Mvc;
namespace MyMvcProject
{
    public class HomeController : Controller
    {
        protected ActionResult Index()
        {
            this.ViewBag.Title = "Meine ASP.NET MVC-Seite";
            this.ViewBag.Headline = "ASP.NET MVC Überschrift";
            this.ViewBag.Text = "Dies ist meine allererste ASP.NET MVC-Seite.";
            this.ViewBag.AsideText = "Text in der Aside-Section";
            return View();
        }
    }
}

Hier werden dem ViewBag mehrere Texte zugewiesen. Während der Title direkt in der Layoutdatei eingebunden ist, werden die anderen Text mit Hilfe eines View-Templates eingemischt.

Datei Views/Home/Index.cshtml

@{
    Layout ="~/Views/Shared/_Layout.cs"
}
<h1>@ViewBag.Headline</h1>
<p>@ViewBag.Text</p>
<p>@Html.ActionLink("Link zu dieser Seite", "Index", "Home")</p>
@section aside
<p>@ViewBag.AsideText</p>

Zunächst wird das verwendete Layout für die Seite spezifiziert. Dann werden die in der Controller-Action bereitgestellten Inhalte aus dem ViewBag in passenden HTML-Tags dargestellt. Für das Befüllen des Abschnittes section Wird das Schlüsselwort @section vorangestellt.

Zusätzlich ist dem Haupttext ein Link zugefügt, der auf die Seite selbst verweist. Hier kommt ein HTML Helper zum Einsatz. Er berechnet die URL der anzusteuernden Seite aus dem Namen der Action (Index) und des Controllers (Home). Als erstes Argument ist der Anchortext übergeben worden. HTML Helper finden bis ASP.NET MVC 5 dort Verwendung, wo Pogrammlogik in die HTML-Tags der Ausgabe kommen.Vor allem bei Formularen sind sie häufig im Einsatz.

ASP.NET MVC Ausblick: Tag Helper statt HTML Helper

Dem aufmerksamen Leser wird nicht entgangen sein, dass auch die MVC-Version nicht ohne eigene Konstrukte für HTML-Elemente auskommt. Wie oben Beschrieben werden mitunter komplette Tags durch HTML Helper generiert. Damit bleibt ein Kritikpunkt bestehen, der schon beim "traditionellen" ASP.NET bestand. Reine Webdesigner ohne ASP-Hintergrund können diese Elemente kaum anpassen.

Zum Glück wird es in der kommenden Version MVC 6 dafür Tag Helper geben. Damit sehen die Templates noch mehr nach HTML aus. Der oben genutze ActionLink kann dann folgendermaßen ersetzt werden.

Beispiel Tag Helper (In kommenden ASP.NET-Versionen)

<p>
    <a asp-controller="Home" asp-action="Index">Link zu dieser Seite</a>
</p>

Die Link-URL (das Attribut href) wird hierdurch vom Compiler "berechnet". Ein Designer kann wie gewohnt zum Beispiel CSS-Klassen einfügen und erkennt am Präfix asp-, dass diese Attribute kein Standard-HTML darstellen und vom ASP.NET-System benötigt und ausgewertet werden. Kurz gesagt: die Template werden dadurch insgesamt sauberer.

ASP.NET MVC & Traditional aus Hürth

Gerne unterstütze ich Sie bei der Entwicklung ihres Webprojektes mit ASP.NET und MVC. Als erfahrener Programmierer aus Hürth betreue ich vorzugsweise Firmen, Organisationen und Privatpersonen aus dem Rheinland um Köln, Bonn und Brühl. Die (verhandelbaren) Stundensätze habe ich auf der Seite Skills & Preise zusammengetragen.