Ansicht
Nachdem wir uns im vorherigen Thema ausführlich mit der Steuerung beschäftigt haben, wollen wir uns nun der Ansicht (engl.
view), also dem, was unsere Besucher nachher sehen, widmen. Eine Ansicht ist grundsätzlich mal nichts anderes als eine
HTML-Datei. Die Datei kann HTML-Code sowie CSS- und JavaScript-Code enthalten. Um eine Verbindung zwischen der Anwendungslogik
(dem Controller) und der Ansicht herzustellen, wird das Datenmodell verwendet. Mit dem Datenmodell wollen wir uns jedoch erst
im nächsten Thema beschäftigen. Die dynamischen Inhalte werden mit Code-Blöcken eingebettet. Als Programmiersprache kommt C#
(oder Visual Basic) zum Einsatz. Der Syntax unterscheidet sich dabei je nach gewähltem Ansichtsmodul. Alle Ansichten befinden
sich im Ordner Views. Dabei besitzen die Ansichten standardmäßig den gleichen Namen wie die Aktion, welche die
Ansicht verwendet, und befinden sich in einem Unterordner, welcher den gleichen Namen wie der jeweilige Controller trägt. Für
Ansichten gibt es zwei unterschiedliche Ansichtsmodule (engl. view engine): ASPX und Razor. ASPX kennen
Sie vom Syntax ja bereits vom ASP.NET WebForms Tutorial. Den Syntax von Razor haben wir
im Thema Grundlagen erläutert und werden wir auch für alle weiteren Beispiele verwenden.
Dateien mit dem Ansichtsmodul Razor besitzen die Dateiendung .cshtml.
Im folgenden Beispiel haben wir eine Steuerung (Home) mit der Aktionsmethode Index(), welche mittels
der Funktion View() eine Ansicht zurückgibt. Die Ansicht, welche aus dem Verzeichnis Views/Home/Index.cshtml
geladen wird, enthält ein HTML-Grundgerüst sowie die Ausgabe des aktuellen Datum und der aktuellen Uhrzeit (Zeile 16). Der
erste Razor-Code-Block dient zum Setzen von ein paar Eigenschaften, welche die Seite betreffen. Standardmäßig, also
beim Erstellen einer neuen Ansicht in Visual Studio, wird hier die Eigenschaft Layout auf null gesetzt,
welche zum Festlegen der Layout-Seite verwendet wird, welche in diesem Beispiel nicht vorhanden ist.
Steuerung (HomeController.cs):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace HWhBsp.Ansicht.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
}
Ansicht (Index.cshtml):
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Ansicht - ASP.NET Code-Beispiel</title>
<meta charset="utf-8" />
<meta name="robots" content="noindex,nofollow" />
<meta name="publisher" content="Homepage-Webhilfe" />
</head>
<body>
<b>Datum und Uhrzeit:</b> @DateTime.Now.ToString()
</body>
</html>
Ausgaben
Ansichten sind von der Klasse ViewPage (beim ASPX View Engine) oder WebViewPage (beim Razor View Engine)
abgeleitet. Neben den Eigenschaften Request, Response und Session, welche Sie bereits
von WebForms kennen, besitzen beide Klassen die Eigenschaft Html, welche eine Instanz der HtmlHelper-Klasse
enthält. Die HtmlHelper-Klasse enthält einige Funktionen, welche uns, wie der Name schon sagt, helfen, HTML-Code
zu erzeugen.
Mit der Methode ActionLink() können wir einen Link erzeugen, welcher auf einen Controller und eine Aktionsmethode
verweist. Als Parameter wird der anzuzeigende Text sowie der Aktionsname und bei Bedarf der Name des Controllers übergeben. Der
Controllername muss dabei nur übergeben werden, wenn der Link sich auf einen anderen Controller bezieht.
Um einen Link zu erzeugen, welcher es erlaubt, alle Routenparameter festzulegen, so verwenden wir üblicherweise die
Funktion RouteLink(). Dieser werden als Übergabeparameter der anzuzeigende Linktext und die Routenwerte übergeben
(meist in Form eines anonymen Objekts). Gibt es mehrere Routen, so muss der Funktion als weiterer Parameter (anzugeben zwischen
Linktext und Routenwerte) der Name der Route übergeben werden. Mit diesem erfolgt dann die Zuordnung der Routenwerte zur Route
und somit auch zum URL-Muster, welches in der Routenkonfiguration festgelegt ist.
Die HtmlHelper-Klasse wird aber auch vor allem dazu verwendet, um Formularfelder zu erstellen. Hierfür
bietet die Klasse unter anderem die Methoden CheckBox(), DropDownList(), Hidden(),
ListBox(), Password(), RadioButton(), TextArea() und TextBox()
an, welche dazu gedacht sind, Kontrollkästchen, Auswahllisten mit Einfachauswahl, versteckte Eingabefelder, Auswahllisten mit
Mehrfachauswahl, Eingabefelder für Passwörter, Auswahlgruppen, Textblöcke und „normale“ Eingabefelder zu erzeugen. Auf die
genauen Parameter der Funktionen gehen wir hier nicht weiter ein, da dies den Umfang des Tutorials sprengen würde. Wenn Sie
in Visual Studio entwickeln, wird Ihnen jedoch IntelliSense eine große Hilfe sein. Zudem ist die Parameterfolge größtenteils
nachvollziehbar.
Steuerung (HomeController.cs):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace HWhBsp.HTML_Ausgaben.Controllers
{
public class HomeController : Controller
{
public enum KontaktPerson
{
Verkauf,
Support,
Verwaltung
}
public ActionResult Index()
{
return View();
}
public string ZweiteSeite()
{
return "Hallo Welt!";
}
}
}
Ansicht (Index.cshtml):
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML-Ausgaben - ASP.NET Code-Beispiel</title>
<meta charset="utf-8" />
<meta name="robots" content="noindex,nofollow" />
<meta name="publisher" content="Homepage-Webhilfe" />
</head>
<body>
<form method="post">
<table>
<tr>
<td><b>Anrede:</b></td>
<td>@Html.RadioButton("anrede", "herr", true) Herr @Html.RadioButton("anrede", "frau") Frau</td>
</tr>
<tr>
<td><b>Name:</b></td>
<td>@Html.TextBox("name")</td>
</tr>
<tr>
<td><b>Kontakt-Person:</b></td>
<td>@Html.DropDownList("grund", new SelectList(Enum.GetValues(typeof(HWhBsp.HTML_Ausgaben.Controllers.HomeController.KontaktPerson))))</td>
</tr>
<tr>
<td><b>Betreff:</b></td>
<td>@Html.TextBox("betreff")</td>
</tr>
<tr>
<td><b>Nachricht:</b></td>
<td>@Html.TextArea("betreff")</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Absenden" /></td>
</tr>
</table>
</form>
<br />
@Html.ActionLink("Hier klicken um 2. Seite anzuzeigen ...", "ZweiteSeite")
</body>
</html>
Layouts
Normalerweise besitzt eine Website ein einheitliches und durchgängiges Layout und Design. Style-Regeln (i. d. R.
CSS-Regeln) sind in den meisten Fällen in separaten Dateien notiert und werden mittels eines link-Elements
eingebunden. Das „rohe“ Layout (also z. B. die verschiedenen div-Blöcke, welche den Seitenaufbau angeben)
wird hingegen in HTML-Dateien notiert. Wenn es nun aber mehrere Ansichten gibt, wird dann dieses Layout mehrmals notiert?
Grundsätzlich müsste dies so sein, da ja auf jeder Seite das Layout benötigt wird. Dies wäre jedoch unnötige Verschwendung von
Speicherplatz und vor allem ein enormer Aufwand, wenn Sie z. B. das Layout ändern wollen. Um dieses Problem zu umgehen, haben
Sie in ASP.NET WebForms die Technologie der Masterseiten kennengelernt. Für ASP.NET MVC-Anwendungen gibt es eine ähnliche
Technologie, welche sich Layout-Seiten nennt.
Eine Layout-Seite befindet sich, nachdem diese erstellt wurde, ebenfalls im Ordner Views und beginnt im Namen
in der Regel mit einem Unterstrich (z. B. _Layout.cshtml oder _LayoutPage.cshtml). Eine Layout-Seite
kann dabei ebenfalls im ASPX- oder Razor-Syntax geschrieben werden. Die Verbindung zwischen Layout- und Inhaltsseite wird
über die Eigenschaft ViewBag geschaffen. In dieser können nach belieben Eigenschaften „erzeugt“ werden und von
der Layout- und Inhaltsseite verwendet werden. Die Layout-Seite verwendet die ViewBag-Eigenschaft zur
Ausgabe von Inhalten in Form von Platzhaltern, wohingegen in der Inhaltsseite die Eigenschaften und somit die
Platzhalter mit Inhalt gefüllt werden. Zudem wird in der Inhaltsseite über den Funktionsaufruf RenderBody() der
Inhalt der Inhaltsseite in der Layout-Seite eingebettet. Um in einer Inhaltsseite die Referenz zu einer Layout-Seite
festzulegen, wird die Eigenschaft Layout der Seite gesetzt.
Im folgenden Beispiel sehen Sie zwei Ansichten (Index und Seite2), wovon beide die Layout-Seite
_LayoutPage verwenden. Die Inhaltsseiten unterscheiden sich dabei hauptsächlich vom Inhalt. Über die
ViewBag-Eigenschaft werden zudem für jede Seite individuelle Titel sowie eine unterschiedliche Hintergrund-Farbe
(zur Verdeutlichung des Beispiels) festgelegt.
Steuerung (HomeController.cs):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace HWhBsp.Layout.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Seite2()
{
return View();
}
}
}
Layout-Seite (_LayoutPage.cshtml):
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title - Layout - ASP.NET Code-Beispiel</title>
<meta charset="utf-8" />
<meta name="robots" content="noindex,nofollow" />
<meta name="publisher" content="Homepage-Webhilfe" />
</head>
<body>
<div style="width: 600px; padding: 5px; background-color: @ViewBag.Farbe">
<h1>@ViewBag.Title</h1>
@RenderBody()
<br /><br />
<i>Copyright © 2016 by Homepage-Webhilfe</i>
</div>
</body>
</html>
Ansicht (Index.cshtml):
@{
ViewBag.Title = "Startseite";
ViewBag.Farbe = "yellow";
Layout = "~/Views/_LayoutPage.cshtml";
}
<p>...</p>
<p>...</p>
<br />
@Html.ActionLink("Zur Seite 2", "Seite2")
Ansicht (Seite2.cshtml):
@{
ViewBag.Title = "Seite 2";
ViewBag.Farbe = "orange";
Layout = "~/Views/_LayoutPage.cshtml";
}
<p>...</p>
<p>...</p>
<p>...</p>
<br />
@Html.ActionLink("Zur Startseite", "Index")