Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

ASP.NET MVC 5 Grundkurs

Die Razor-Syntax

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Innerhalb von Views kann auch programmiert werden. Als neue Syntaxmöglichkeit steht hier Razor zur Verfügung. Das kommt mit wenigen Syntaxzeichen aus und ermöglicht so sparsames Programmieren.
10:38

Transkript

Die Mischung von Code und Content ist, ja, schon seit lange Zeit verpönt, deswegen hat das ASP.NET Webforms fast auf die Spitze getrieben durch das CodeBehind-Modell gab es also eine, ja, im Wesentlichen HTML-Datei, dazu eine Code-Datei und aus der Code-Datei heraus wurden dann in der HTML-Datei Platzhalte mit Werten gefüllt. So prinzipiell das Modell auf den ersten Blick sieht es so aus, als würden wir in ASP.NET MVC einen Schritt zurückgehen, denn, ja, wir können Logik einbauen in unsere Views, in unsere HTML-Dateien. Aber das ist gar nicht so schlimm, denn die Logik, die wir einbauen, ist reine Anzeigelogik. Also ich gebe hier an dieser Stelle diesen Wert aus. Ich iteriere hier über eine Liste von Werten und für jeden einzelnen Wert gebe ich das folgende Markup aus, solche Sachen. Das kann man machen und beim Anlegen des Projektes wurden wir, ja, gefragt, welche Ansichtsengine wir verwenden möchten. Also, auf gut Deutsch, welche Art von Technologie, Programmiersprache sozusagen wir in unseren Views verwenden möchten. Jetzt ist es so, dass wir tatsächlich auf ASPX setzen können, können also klassisch mit Webforms arbeiten, das ist dann so, wenn man Inline Code in ASPX-Seiten. Das heißt, spitze Klammer, Prozent und dann der Code. Es gibt aber von Microsoft etwas Neues. Das würde also eingeführt für ASP.NET MVC, parallel auch für WebMatrix, der Entwicklungsumgebung, Webpages heißt das Ganze und dazu gibt es eine neue, sehr sehr spartanisch und dadurch wirklich nutzbares Syntax. Die Syntax heißt Razor und die wollen wir uns an einigen Beispielen anschauen. Wir haben, ja, bereits einen Controller und dazu auch eine View, eine Indexseite und diese Indexseite wollen wir vielleicht etwas Besseres erzeugen, als auch nur "Hallo Welt". und zwar ist, ja, bei jeder Syntax die Frage, wenn wir Sie im HTML-Kontext verwenden, wir baue ich Code ein? Denn die Technologie muss, ja, wissen, was ist jetzt Code und was ist Markup? Denn Markup wird eins zu eins an den Browser geschickt. Wir bekommen hier schon so einen keinen Hinweis, wir haben, ja, hier im Rahmen der Vorlage so einen merkwürdigen Block und dieser Block, der beinhaltet gegebenenfalls Code und in der Tat durch diesen Klammeraffen leiten wir Code ein. Der Klammeraffe ist also das wichtigste Zeichen, wenn wir auf Basis dieser Anzeigetechnologie arbeiten und damit können wir Code an verschiedenen Stellen einbauen. Dieser Klammeraffen hat auch mehrere Funktionen, nicht nur allein Codeeinbau, sondern beispielsweise auch Codeeingabe, gegebenenfalls sogar ein Kommentar. Probieren wir da einige Dinge mal aus und wir werden dann, wenn wir eine Datenbank anbinden, entsprechend auch noch weitere Möglichkeiten und Anwendungsfälle kennenlernen. Der klassische Fall ist tatsächlich, @{, alles innerhalb der geschweiften Klammer ist dann Code. Ich kann also beispielsweise Variablen anlegen. Ja, also zum Beispiel "var i=1". Kann natürlich auch mit Datentypen arbeiten, aber das ganz normaler C# Code, der sich hier drin befindet. Und da wird natürlich dann der Datentyp automatisch ermittelt, also können wir wieder mit "Hallo Welt" zum Beispiel Arbeiten, hätten jetzt ein String und eine Zahl. Die Frage ist nur, wie geben wir das aus? Na ja, eine Ausgabemöglichkeit ist einfach zu sagen, Klammeraffe, denn das ist, ja, schon ein Sonderzeichen, dass wie haben, dann zum Beispiel I, damit geben wir die Variable I aus oder auch @s. Das heißt, wir würden jetzt hier die "1" ausgeben, hier wir würden wir "Hallo Welt" ausgeben. Dazwischen ist ein Umbruch, der zählt, ja, in HTM, wie ein Leerzeichen, das heißt, wir erwarten dazwischen ein bisschen Platz, aber jetzt nicht unbedingt automatisch ein Umbruch. Schauen wir uns in Google Chrome an. Ist der Standard Index-View im HomeController, wird also so oder so automatisch geladen werden, da wir es gerade offen hatten, kommt das direkt so und tatsächlich 1 und "Hallo Welt". Werfen wir ein Blick in den Seitenquelltext. und in der Tat haben wir hier den eigentlichen Inhalt der Seite, das ist etwas, was Visual Studio noch einbaut zum Vereinfachen des debuggens. Aber interessant ist natürlich das hier, also dort wo @I stand, oder der Wert von I, also 1 ausgegeben, dort wo @S stand wurde der Wert von S, also "Hallo Welt" ausgegeben. Also alles wie geplant und das ist durchaus praktisch, weil wir dadurch eine sehr sehr einfache Syntax haben, um an bestimmten Stellen einfach Werte auszugeben und genau so wird die Arbeitsteilung hier sein. Wir bekommen irgendwie Modell-Daten übermittelt, also aus dem Modell, vielleicht aus der Datenbank irgendwelche Werte und die wollen wir einfach ausgeben, vielleicht auch ein bisschen hierzu programmieren. Und deswegen @{ ist einfach ein Codeblock, kann an einer beliebigen Stelle stehen. Und dann geben wir das einfach aus und das lässt sich auch trefflich mit HTML mischen, das heißt, wenn jetzt alles sein eigener Absatz sein soll, dann umgeben das einfach mit einem entsprechenden Absatz. Und das wäre es denn eigentlich auch schon gewesen. Da wir mit C# programmieren, haben wir natürlich auch Zugriff auf Kontrollstrukturen, also beispielsweise IF-Anweisungen oder Schleifen. Machen wir mal eine ganz klassische Schleife, also "for (var i=0; i<10; i++)". Ja, das ist jetzt die Vorschleife und innerhalb der Vorschleife mache ich irgendwas. Weiß noch nicht was und, ja, es ist irgendwie schwierig, ich würde, ja, gerne jetzt zum Beispiel Variable I ausgeben, Wie gebe ich die Variable I aus? Ich könnte hier natürlich den Code Block beenden und dann könnte ich hier die Variable I ausgeben und dann müsste ich hier noch einen neuen Code Block anfangen und in diesen neuen Code Block würde ich dann die geschweifte Klammer schließen. Sie sehen schon Visual Studio sträubt sich mit aller Macht. Aber wie geben wir denn dann tatsächlich Code aus innerhalb von einer Schleife? Gibt es sowas wie Response Write. Nun es ist noch ein bisschen einfacher, und zwar, wenn Sie sich vielleicht erinnern, als Sie das erste Mal irgendeine Web-Technologie gelernt haben oder vielleicht allgemein Programmierung gelernt haben. Dann war, ja, das Konzept zwischen Textausgabe und Programmiersyntax vielleicht ziemlich kompliziert. Also vor allem in Webtechnologien sieht man das häufig, wenn man HTML und eben eine Webtechnologie mischt und die Programmiersprache dann zusammen mit dem HTML sich vermischt und dann man, ja, immer wissen muss bin ich jetzt gerade im Code. Das heißt, kann ich dann nicht einfach HTML ausgeben oder bin ich im HTML und muss dann Code speziell einleiten, eben zum Beispiel, wie hier durch den Klammeraffen. Nun, eigentlich könnte das doch der Compiler selber rausfinden. Und deswegen tatsächlich funktioniert folgendes. Ich erzeuge ein HTML-Element, Sie sehen auch, automatisch es wird beendet, gibt es auch hier keine Fehlermeldung, denn die spitze Klammer vom Anbeginn eine Anweisung ist sicherlich kein C# Code. Das ist HTML Markup und der Compiler ist so klug und weiß, na ja, HTML Markup, das ist dann einfach eine Textausgabe. Das heißt, ich kann hier irgendwas ausgeben, zum Beispiel den Wert der Variablen I. Und ich nenne sie vielleicht statt I mal J, dann korrigiert das nicht mit unteren Code. Ja, das heißt, ich iteriere jetzt von null bis neun. Und bei jedem Durchlauf gebe ich den aktuellen Wert dieser Variable aus, einfach indem ich hier Markup verwende und der Compiler dann weiß, gut, spitze Klammern, Element wird auch wieder geschlossen. Das heißt, das ist eine Textausgabe, das ist so eine Art von Anweisungen, gib das jetzt aus, das ist so eine Art von Response Write. Im Browser aufgerufen ergibt das, dann eine Liste von zehn Zahlen von null bis neun. Und natürlich noch die Ausgaben von vorher, schauen wir in den Quellcode, dann sehen wir auch tatsächlich die einzelnen P-Elemente wurden so ausgegeben. Also auch hier von der Syntax her sehr sehr große Erleichterung und natürlich auch damit sehr bequemes Feature. Jetzt ist es natürlich so, dass Sie ein dieser Seiteneffekte, den wir gerade gesehen haben, nicht wollen, nämlich das alles in einem eigenen Absatz steht, Sie wollen vielleicht, dass die Werte nebeneinander stehen. Jetzt können Sie sich natürlich bei helfen, indem Sie statt P, einfach "Span" verwenden. Sie sehen auch hier wieder wird automatisch angepasst. Und dann haben Sie ein Fluss-Element und eben kein Block-Element aus HTML. Ah, vielleicht wollen Sie kein Span-Element, weil dadurch CSS-Regeln nicht mehr funktionieren. Jetzt gibt es hier zwei Auswege. Zum einen können Sie einfach ein Element nehmen, das es nicht gibt es, zum Beispiel "abcdf". "Abcdf" ist ein HTML-Tag, dass es nicht gibt. Ja, gibt es nicht, aber die Logik sagt natürlich trotzdem, ja, das ist ein Tag, das heißt, alles was zwischen öffnen und schließenden Tag steht wird irgendeine Form von Ausgabe sein. Das heißt, wenn wir uns das Ganze jetzt im Browser ansehen, dann sehen wir die Nummern nebeneinander, Quellcode verrät warum. Wir haben immer dieses Tag, dass der Browser nicht kennt, somit ignoriert. Ja, und nach jedem auftreten des Tags kommt ein Umbruch und ein paar Leerzeichen und das zählt in HTML als eben ein Leerzeichen, deswegen stehen die Elemente hier so direkt nebeneinander. Das geht, nur validiert dann natürlich Ihre Seite nicht mehr, eben weil es dies Element nicht gibt. Auch hierfür gibt es ein Ausweg in Razor. Und zwar gibt es das Tag "Text" und Sie sehen, ach, das ist jetzt gelb markiert. Okay, Visual Studio selber sagt, ja, dieses Text-Element, also kenne ich eigentlich nicht, gibt es nicht in HTML. Schauen wir in den Google Chrome. Die Ausgabe ist zunächst wie gewohnt. Das heißt, die Zahlen stehen nebeneinander, was ist im Quelltext? Und das ist jetzt die Überraschung. Hier stehen nur die Zahlen. Das heißt, dieser sozusagen virtuelle Tag Text, den es nicht gibt, ist für Razor und damit eben auch für ASP.NET MVC ein Hinweis, dass hier einfach Text ausgegeben werden soll, innerhalb eines Code Blocks dieses Text Tag selber wird dann nicht an den Browser geschickt, nur der Inhalt. und das ist dann auch eine sehr sehr bequeme Möglichkeit, entsprechend Code auszugeben und eins der weiteren Razor Features. Sie sehen, dass wirklich versucht wurde die Sonderzeichen der Syntax zu reduzieren. Es gibt eigentlich nur den Klammeraffen, die geschweiften Klammern und, na ja, vielleicht noch die spitzen Klammern, wenn Sie so wollen. Und damit lässt sich schon fast komplett die Programmierung durchziehen und nur so ist es auch möglich, innerhalb von einem Code Block komplexes Markup auszugeben. Sofern es sich natürlich dann eben jeweils um Tags handelt, die auch wieder abgeschlossen werden.

ASP.NET MVC 5 Grundkurs

Machen Sie sich mit den Grundlagen von ASP.NET MVC 5 vertraut und lassen Sie sich in dieser anspruchsvollen Einführung diesen Architekturansatz von Microsoft erläutern.

2 Std. 30 min (20 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!