{"id":55000127,"date":"2018-04-01T00:00:00","date_gmt":"2020-03-27T19:31:25","guid":{"rendered":"http:\/\/access-im-unternehmen.aix-dev.de\/aiu\/?p=127"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-30T00:00:00","slug":"Markup_mit_Razor_Pages","status":"publish","type":"post","link":"https:\/\/vbentwickler.de\/Markup_mit_Razor_Pages\/","title":{"rendered":"Markup mit Razor Pages"},"content":{"rendered":"

Wenn Sie Webseiten auf Basis von ASP.NET Core bauen, wollen Sie in den statischen HTML-Code gegebenenfalls auch dynamische Elemente einbauen. Dazu verwenden Sie eine sogenannte Server Side Markup Language. Eine solche Sprache ist das relativ neue Razor Pages. Dieser Artikel zeigt, wie Sie den Inhalt von HTML-Seiten über Razor Pages durch dynamische Inhalte erweitern.<\/b><\/p>\n

Wenn Sie schon einmal eine Seite mit PHP oder mit klassischen ASP programmiert haben, kennen Sie die Code-Schnipsel, die dort in den HTML-Code eingepflegt werden. Unter PHP etwa beginnen diese mit <php <\/b>und enden mit ><\/b>. Für ASP.NET Core gibt es mit Razor Pages eine neue Technologie, die wir uns im vorliegenden Artikel ansehen wollen. Voraussetzung dafür ist, dass Sie ein einfaches Webprojekt auf Basis von ASP.NET Core angelegt haben – siehe auch im Beitrag Einfache Web-Anwendung erstellen<\/b>. Die dort angelegte Anwendung nutzt eine statische Seite namens index.html <\/b>als Startseite. Diese kann wegen ihrer Dateiendung keine dynamischen Elemente aufnehmen.<\/p>\n

Model View Controller hinzufügen<\/h2>\n

Model View Controller ist ein Entwurfsmuster, mit dem eine Software in verschiedene Ebenen aufgeteilt wird. Das Model entspricht dem Datenmodell, die View ist die Präsentation der Daten, also die Benutzeroberfläche und der Controller steuert die Anwendung. An dieser Stelle steigen wir noch nicht tiefer in dieses Entwurfsmuster ein (genau genommen verwenden wir MVC noch nicht einmal im eigentlichen Sinne), aber wir benötigen einen Service, der uns bei der Ausführung sogenannter MVC-Aktionen unterstützt. In diesem Fall wird die MVC-Aktion eine HTML-Seite mit einigen Besonderheiten sein, mehr dazu weiter unten. Als Erstes schauen wir uns an, welche Änderungen im Quellcode der Klasse Startup.cs <\/b>nötig sind, um die Verarbeitung von MVC-Aktionen zu unterstützen. Wir fügen also zunächst den Aufruf der Methode AddMVC <\/b>zur Methode ConfigureServices <\/b>hinzu. Danach erweitern wir die Methode Configure <\/b>neben dem Aufruf der Methode UseStaticFiles <\/b>um die Methode UseMVC<\/b>:<\/p>\n

public class Startup {\r\n     public void ConfigureServices(IServiceCollection services) {\r\n         services.AddMvc();\r\n     }\r\n     public void Configure(IApplicationBuilder app, IHostingEnvironment env) {\r\n         if (env.IsDevelopment()) {\r\n             app.UseDeveloperExceptionPage();\r\n         }\r\n         app.UseStaticFiles();\r\n         app.UseMvc();\r\n     }\r\n}<\/pre>\n
Razor-Seite hinzufügen<\/h2>\n
Nun benötigen wir einen Ersatz für die bisher statisch verwendete Seite index.html<\/b>. Dazu rufen wir wieder den Kontextmenü-Eintrag Neues Element hinzufügen… <\/b>auf, diesmal aber für den noch hinzuzufügenden Ordner Pages<\/b>. Im Dialog Neues Element <\/b>hinzufügen wählen Sie unter der Kategorie Web <\/b>den Eintrag Razor Seite <\/b>aus und legen den Namen index.cshtml<\/b> für die Seite fest (siehe Bild 1).<\/p>\n
\"Hinzufügen<\/p>\n
Bild 1: Hinzufügen einer Razor-Seite<\/span><\/b><\/p>\n
Die neue Seite namens index.cshtml <\/b>sieht wie in Bild 2 aus. Hier ist zunächst kein HTML-Code in Sicht, was ein wenig irritiert. Stattdessen erwartet uns ein als Fehler markierter Ausdruck namens indexModel<\/b>.<\/p>\n
\"Code<\/p>\n
Bild 2: Code der neuen Seite index.cshtml<\/span><\/b><\/p>\n
Zusätzlich liefert der Projektmappen-Explorer noch eine der Seite index.cshtml <\/b>untergeordnete Datei namens index.cshtml.cs <\/b>(siehe Bild 3). Das Schema erinnert uns an die Code behind-Klassen von WPF-Seiten.  Der Fehler hinter dem Element indexModel <\/b>in der Datei index.cshtml <\/b>lautet “Der Typ- oder Namespacename “indexModel” wurde nicht gefunden (möglicherweise fehlt eine using-Direktive oder ein Assemblyverweis).”. <\/p>\n
\"Die<\/p>\n
Bild 3: Die “Code behind”-Klasse von index.cshtml<\/span><\/b><\/p>\n
Wenn wir die Anwendung starten, erhalten wir auch tatsächlich eine Fehlermeldung im Browser (siehe Bild 4). Das ist übrigens dem Umstand geschuldet, dass wir in der Methode Configure<\/b> der Klasse Startup <\/b>für den Entwicklungsmodus die Methode UseDeveloperExceptionPage <\/b>aufgerufen haben. Der Fehler liegt darin, dass wir den Namespace zur Seite index.cshtml <\/b>nicht angegeben haben. Das holen wir nun nach, indem wir den Code der Seite index.cshtml<\/b> wie folgt ändern und den Namespace RazorPages <\/b>sowie den Namen des Ordners Pages <\/b>hinzufügen:<\/p>\n
\"Fehler<\/p>\n
Bild 4: Fehler beim Starten der Anwendung<\/span><\/b><\/p>\n
@page\r\n@model RazorPages.Pages.indexModel\r\n@{\r\n}<\/pre>\n
Danach können wir die Anwendung ohne Fehlermeldung starten, erhalten allerdings auch eine leere Seite – kein Wunder, denn wir haben ja noch keine Inhalte auf der Seite index.cshtml <\/b>hinterlegt. Das ändern wir nun durch Hinzufügen der folgenden Zeile:<\/p>\n
<h1>Hello index.cshtml!<\/h1><\/pre>\n
Beim nächsten Start der Anwendung sehen wir dann auch den gewünschten Text im Browser (siehe Bild 5).<\/p>\n
\"Die<\/p>\n
Bild 5: Die Seite läuft!<\/span><\/b><\/p>\n
Dynamische Inhalte hinzufügen<\/h2>\n
Nun gehen wir einen Schritt weiter und wollen einen dynamischen Inhalt hinzufügen – was der eigentliche Sinn des Artikels ist. Dazu nutzen wir das @<\/b>-Zeichen und die dadurch per IntelliSense eingeblendeten verfügbaren Code-Elemente. In diesem Fall wollen wir das aktuelle Datum und die Uhrzeit ausgeben (siehe Bild 6). Das erledigen wir mit folgendem Code (die ersten Zeilen bleiben natürlich erhalten):<\/p>\n
\"Anzeige<\/p>\n
Bild 6: Anzeige von Datum und Uhrzeit<\/span><\/b><\/p>\n
<h1>Hello index.cshtml!<\/h1>\r\n<p>Es ist jetzt @DateTime.Now<\/p><\/pre>\n
Razor-Anweisungen<\/h2>\n
Schauen wir uns nun an, was die mit @ <\/b>beginnenden Anweisungen in der Datei index.cshtml <\/b>bedeuten.<\/p>\n