Einführung in ASP.NET Web Pages – Programmiergrundlagen
von Tom FitzMacken
In diesem Tutorial erhalten Sie einen Überblick über das Programmieren in ASP.NET Web Pages mit Razor-Syntax.
Sie lernen Folgendes:
- Die grundlegende "Razor"-Syntax, die Sie für die Programmierung in ASP.NET Web Pages verwenden.
- Eine einfache C#-Programmiersprache, die Sie verwenden werden.
- Einige grundlegende Programmierkonzepte für Webseiten.
- Installieren von Paketen (Komponenten, die vordefinierten Code enthalten) für die Verwendung mit Ihrer Website
- Verwenden von Hilfsprogrammen zum Ausführen allgemeiner Programmieraufgaben
Beschriebene Features/Technologien:
- NuGet und der Paket-Manager.
- Das
GravatarHilfsprogramm.
In diesem Tutorial lernen Sie in erster Linie die Programmiersyntax kennen, die Sie für ASP.NET Web Pages verwenden. Sie lernen die Razor-Syntax und den Code kennen, der in der Programmiersprache C# geschrieben wird. Im vorherigen Tutorial haben Sie einen Einblick in diese Syntax erhalten. In diesem Tutorial wird die Syntax näher erläutert.
Wir versprechen, dass dieses Tutorial die meiste Programmierung beinhaltet, die Sie in einem einzelnen Tutorial sehen werden, und dass es das einzige Tutorial ist, in dem es sich nur um die Programmierung handelt. In den restlichen Tutorials in diesem Satz erstellen Sie tatsächlich Seiten, die interessante Dinge ausführen.
Außerdem erfahren Sie mehr über Helfer. Ein Hilfsprogramm ist eine Komponente – ein gepackter Code , den Sie einer Seite hinzufügen können. Der Helfer führt für Sie Aufgaben aus, die sonst mühsam oder komplex sein könnten, von Hand zu erledigen.
Erstellen einer Seite zum Spielen mit Razor
In diesem Abschnitt spielen Sie ein wenig mit Razor, damit Sie ein Gefühl für die grundlegende Syntax erhalten.
Starten Sie WebMatrix, wenn sie noch nicht ausgeführt wird. Sie verwenden die Website, die Sie im vorherigen Tutorial (Erste Schritte Mit Webseiten) erstellt haben. Klicken Sie zum erneuten Öffnen auf Meine Websites , und wählen Sie WebPageMovies aus:
Wählen Sie den Arbeitsbereich Dateien aus.
Klicken Sie im Menüband auf Neu , um eine Seite zu erstellen. Wählen Sie CSHTML aus, und nennen Sie die neue Seite TestRazor.cshtml.
Klicken Sie auf OK.
Kopieren Sie folgendes in die Datei, und ersetzen Sie das, was bereits vorhanden ist.
Hinweis
Wenn Sie Code oder Markup aus den Beispielen in eine Seite kopieren, sind Einzug und Ausrichtung möglicherweise nicht mit den im Tutorial identisch. Einzug und Ausrichtung wirken sich jedoch nicht auf die Ausführung des Codes aus.
@{
// Working with numbers
var a = 4;
var b = 5;
var theSum = a + b;
// Working with characters (strings)
var technology = "ASP.NET";
var product ="Web Pages";
// Working with objects
var rightNow = DateTime.Now;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Razor Syntax</title>
<meta charset="utf-8" />
<style>
body {font-family:Verdana; margin-left:50px; margin-top:50px;}
div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
span.bright {color:red;}
</style>
</head>
<body>
<h1>Testing Razor Syntax</h1>
<form method="post">
<div>
<p>The value of <em>a</em> is @a. The value of <em>b</em> is @b.
<p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
<p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
</div>
<div>
<p>The technology is @technology, and the product is @product.</p>
<p>Together they are <span class="bright">@(technology + " " + product)</span></p>
</div>
<div>
<p>The current date and time is: @rightNow</p>
<p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
</div>
</form>
</body>
</html>
Untersuchen der Beispielseite
Das meiste, was Sie sehen, ist normales HTML. Oben befindet sich jedoch der folgende Codeblock:
@{
// Working with numbers.
var a = 4;
var b = 5;
var theSum = a + b;
// Working with characters (strings).
var technology = "ASP.NET";
var product ="Web Pages";
// Working with objects.
var rightNow = DateTime.Now;
}
Beachten Sie folgendes bei diesem Codeblock:
- Das Zeichen @ teilt ASP.NET mit, dass es sich um Razor-Code und nicht um HTML handelt. ASP.NET behandelt alles nach dem @-Zeichen als Code, bis es wieder in HTML ausgeführt wird. (In diesem Fall ist das das <! DOCTYPE-Element> .
- Die Klammern ( { und } ) schließen einen Block mit Razor-Code ein, wenn der Code mehr als eine Zeile enthält. Die Klammern geben ASP.NET an, wo der Code für diesen Block beginnt und endet.
- Die Zeichen // markieren einen Kommentar , d. h. einen Teil des Codes, der nicht ausgeführt wird.
- Jede Anweisung muss mit einem Semikolon (;). (Allerdings keine Kommentare.)
- Sie können Werte in Variablen speichern, die Sie mit dem Schlüsselwort (keyword) var erstellen (deklarieren). Wenn Sie eine Variable erstellen, geben Sie ihr einen Namen, der Buchstaben, Zahlen und Unterstriche (_) enthalten kann. Variablennamen können nicht mit einer Zahl beginnen und nicht den Namen eines Programmier-Schlüsselwort (keyword) (z. B. var) verwenden.
- Sie schließen Zeichenfolgen (z. B. "ASP.NET" und "Webseiten") in Anführungszeichen ein. (Sie müssen doppelte Anführungszeichen sein.) Zahlen befinden sich nicht in Anführungszeichen.
- Leerzeichen außerhalb von Anführungszeichen spielen keine Rolle. Zeilenumbrüche spielen meist keine Rolle. Die Ausnahme besteht darin, dass Sie eine Zeichenfolge nicht in Anführungszeichen zeilenübergreifend aufteilen können. Einzug und Ausrichtung spielen keine Rolle.
In diesem Beispiel ist nicht ersichtlich, dass bei allen Code die Groß-/Kleinschreibung beachtet wird. Dies bedeutet, dass die Variable TheSum eine andere Variable ist als Variablen, die den Namen "Sum" oder "sum" haben können. Ebenso ist var ein Schlüsselwort (keyword), Var nicht.
Objekte und Eigenschaften und Methoden
Dann gibt es den Ausdruck DateTime.Now. Einfach ausgedrückt ist DateTime ein Objekt. Ein Objekt ist eine Sache, mit der Sie programmieren können – eine Seite, ein Textfeld, eine Datei, ein Bild, eine Webanforderung, eine E-Mail-Nachricht, ein Kundendatensatz usw. Objekte verfügen über eine oder mehrere Eigenschaften , die ihre Eigenschaften beschreiben. Ein Textfeldobjekt verfügt unter anderem über eine Text-Eigenschaft, ein Anforderungsobjekt über eine Url-Eigenschaft (und andere), eine E-Mail-Nachricht über eine From-Eigenschaft und eine To-Eigenschaft usw. Objekte verfügen auch über Methoden , die die "Verben" sind, die sie ausführen können. Sie arbeiten viel mit Objekten.
Wie Sie im Beispiel sehen können, ist DateTime ein Objekt, mit dem Sie Datums- und Uhrzeiten programmieren können. Sie verfügt über eine Eigenschaft namens Now, die das aktuelle Datum und die aktuelle Uhrzeit zurückgibt.
Verwenden von Code zum Rendern von Markup auf der Seite
Beachten Sie im Textkörper der Seite Folgendes:
<div>
<p>The value of <em>a</em> is @a. The value of <em>b</em> is @b.
<p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
<p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
</div>
<div>
<p>The technology is @technology, and the product is @product.</p>
<p>Together they are <span class="bright">@(technology + " " + product)</span></p>
</div>
<div>
<p>The current date and time is: @rightNow</p>
<p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
</div>
Auch hier teilt das @-Zeichen ASP.NET mit, dass es sich um Code und nicht um HTML handelt. Im Markup können Sie @ gefolgt von einem Codeausdruck hinzufügen, und ASP.NET wird den Wert dieses Ausdrucks direkt an diesem Punkt rendern. Im Beispiel @a wird der Wert der Variablen mit dem Namen a gerendert, @product was sich in der Variablen mit dem Namen product befindet usw.
Sie sind jedoch nicht auf Variablen beschränkt. In einigen Fällen ist das @-Zeichen einem Ausdruck vorangestellt:
- @(a*b) rendert das Produkt von dem, was sich in den Variablen a und b befindet. (Der * -Operator bedeutet Multiplikation.)
- @(technology + " " + product) rendert die Werte in den Variablen Technologie und Produkt, nachdem sie verkettet und dazwischen ein Leerzeichen hinzugefügt wurden. Der Operator (+) zum Verketten von Zeichenfolgen ist mit dem Operator zum Hinzufügen von Zahlen identisch. ASP.NET können in der Regel feststellen, ob Sie mit Zahlen oder mit Zeichenfolgen arbeiten und das Richtige mit dem +-Operator ausführen.
- @Request.Url rendert die Url-Eigenschaft des Request-Objekts. Das Request-Objekt enthält Informationen zur aktuellen Anforderung aus dem Browser, und natürlich enthält die Url-Eigenschaft die URL der aktuellen Anforderung.
Das Beispiel soll Ihnen auch zeigen, dass Sie auf unterschiedliche Weise arbeiten können. Sie können Berechnungen im Codeblock oben ausführen, die Ergebnisse in eine Variable einfügen und dann die Variable im Markup rendern. Oder Sie können Berechnungen in einem Ausdruck direkt im Markup ausführen. Der Ansatz, den Sie verwenden, hängt davon ab, was Sie tun, und zu einem gewissen Grad von Ihren eigenen Vorlieben.
Anzeigen des Codes in Aktion
Klicken Sie mit der rechten Maustaste auf den Namen der Datei, und wählen Sie dann Im Browser starten aus. Sie sehen die Seite im Browser mit allen Werten und Ausdrücken, die auf der Seite aufgelöst sind.
Sehen Sie sich die Quelle im Browser an.
Wie Sie von Ihrer Erfahrung im vorherigen Tutorial erwarten, befindet sich kein Razor-Code auf der Seite. Sie sehen nur die tatsächlichen Anzeigewerte. Wenn Sie eine Seite ausführen, stellen Sie tatsächlich eine Anforderung an den Webserver, der in WebMatrix integriert ist. Wenn die Anforderung empfangen wird, löst ASP.NET alle Werte und Ausdrücke auf und rendert deren Werte in der Seite. Anschließend wird die Seite an den Browser gesendet.
Tipp
Razor und C#
Bisher haben wir gesagt, dass Sie mit Razor-Syntax arbeiten. Das stimmt, aber es ist nicht die vollständige Geschichte. Die tatsächliche Programmiersprache, die Sie verwenden, heißt C#. C# wurde vor über einem Jahrzehnt von Microsoft erstellt und hat sich zu einer der wichtigsten Programmiersprachen für die Erstellung von Windows-Apps entwickelt. Alle Regeln, die Sie zum Benennen einer Variablen und zum Erstellen von Anweisungen usw. gesehen haben, sind eigentlich alle Regeln der C#-Sprache.
Razor bezieht sich genauer auf die kleinen Konventionen, wie Sie diesen Code in eine Seite einbetten. Die Konvention der Verwendung von @ zum Markieren von Code auf der Seite und verwendung von @{ } zum Einbetten eines Codeblocks ist beispielsweise der Razor-Aspekt einer Seite. Helfer werden auch als Teil von Razor betrachtet. Razor-Syntax wird an mehr Stellen als nur in ASP.NET Web Pages verwendet. (Sie wird beispielsweise auch in ASP.NET MVC-Ansichten verwendet.)
Wir Erwähnung dies, denn wenn Sie nach Informationen zur Programmierung ASP.NET Web Pages suchen, finden Sie viele Verweise auf Razor. Viele dieser Verweise gelten jedoch nicht für das, was Sie tun, und können daher verwirrend sein. Und tatsächlich geht es bei vielen Ihrer Programmierfragen darum, entweder mit C# zu arbeiten oder mit ASP.NET zu arbeiten. Wenn Sie also speziell nach Informationen zu Razor suchen, finden Sie möglicherweise nicht die Antworten, die Sie benötigen.
Hinzufügen von bedingter Logik
Eines der großartigen Features bei der Verwendung von Code auf einer Seite ist, dass Sie die Vorgänge basierend auf verschiedenen Bedingungen ändern können. In diesem Teil des Tutorials lernen Sie einige Möglichkeiten kennen, mit denen Sie die Auf der Seite angezeigten Elemente ändern können.
Das Beispiel ist einfach und etwas erfunden, sodass wir uns auf die bedingte Logik konzentrieren können. Die Seite, die Sie erstellen, führt folgendes aus:
- Zeigen Sie unterschiedlichen Text auf der Seite an, je nachdem, ob die Seite zum ersten Mal angezeigt wird oder ob Sie auf eine Schaltfläche geklickt haben, um die Seite zu übermitteln. Dies ist der erste bedingte Test.
- Die Meldung wird nur angezeigt, wenn ein bestimmter Wert in der Abfragezeichenfolge der URL übergeben wird (http://...? show=true). Dies ist der zweite bedingte Test.
Erstellen Sie in WebMatrix eine Seite, und nennen Sie sie TestRazorPart2.cshtml. (Klicken Sie im Menüband auf Neu, wählen Sie CSHTML aus, benennen Sie die Datei, und klicken Sie dann auf OK.)
Ersetzen Sie den Inhalt dieser Seite durch Folgendes:
@{
var message = "This is the first time you've requested the page.";
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Razor Syntax - Part 2</title>
<meta charset="utf-8" />
<style>
body {font-family:Verdana; margin-left:50px; margin-top:50px;}
div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
</style>
</head>
<body>
<h1>Testing Razor Syntax - Part 2</h1>
<form method="post">
<div>
<p>@message</p>
<p><input type="submit" value="Submit" /></p>
</div>
</form>
</body>
</html>
Der Codeblock oben initialisiert eine Variable namens message mit etwas Text. Im Textkörper der Seite wird der Inhalt der Nachrichtenvariablen in einem <p-Element> angezeigt. Das Markup enthält auch ein <Eingabeelement> zum Erstellen einer Submit-Schaltfläche .
Führen Sie die Seite aus, um zu sehen, wie sie jetzt funktioniert. Vorerst handelt es sich im Grunde genommen um eine statische Seite, auch wenn Sie auf die Schaltfläche Senden klicken.
Zurück zu WebMatrix. Fügen Sie innerhalb des Codeblocks den folgenden hervorgehobenen Code nach der Zeile hinzu, die die Nachricht initialisiert:
@{
var message = "This is the first time you've requested the page.";
if(IsPost) {
message = "Now you've submitted the page.";
}
}
Der if { } -Block
Sie haben gerade eine If-Bedingung hinzugefügt. Im Code weist die if-Bedingung eine Struktur wie die folgende auf:
if(some condition){
One or more statements here that run if the condition is true;
}
Die zu testde Bedingung befindet sich in Klammern. Es muss sich um einen Wert oder einen Ausdruck handeln, der true oder false zurückgibt. Wenn die Bedingung true ist, führt ASP.NET die -Anweisung oder -Anweisungen aus, die sich innerhalb der geschweiften Klammern befinden. (Diese sind dann Teil der If-then-Logik .) Wenn die Bedingung false ist, wird der Codeblock übersprungen.
Im Folgenden finden Sie einige Beispiele für Bedingungen, die Sie in einer if-Anweisung testen können:
if(currentValue > 12) { ... }
if(dueDate <= DateTime.Today) { ... }
if(IsDone == true) { ... }
if(IsPost) { ... }
if(!IsPost) { ... }
if(a != 0) { ... }
if(fileProcessingIsDone != true && displayMessage == false) { ... }
Sie können Variablen anhand von Werten oder Ausdrücken testen, indem Sie einen logischen Operator oder Vergleichsoperator verwenden: gleich (==), größer als (>), kleiner als (<), größer als oder gleich (>=) und kleiner als oder gleich (<=). Der !=-Operator bedeutet nicht gleich , z. B. if(a != 0) bedeutet , wenn ein nicht gleich 0 ist.
Hinweis
Stellen Sie sicher, dass der Vergleichsoperator für gleich (==) nicht mit =identisch ist. Der Operator = wird nur verwendet, um Werte zuzuweisen (var a=2). Wenn Sie diese Operatoren mischen, erhalten Sie entweder einen Fehler, oder Sie erhalten einige seltsame Ergebnisse.
Um zu testen, ob etwas wahr ist, lautet die vollständige Syntax if(IsDone == true). Sie können aber auch die Verknüpfung if(IsDone) verwenden. Wenn kein Vergleichsoperator vorhanden ist, geht ASP.NET davon aus, dass Sie auf true testen.
Der -Operator selbst bedeutet ein logisches NOT. Beispielsweise die Bedingung if(! IsPost) bedeutet , wenn IsPost nicht wahr ist.
Sie können Bedingungen mithilfe eines logischen AND-Operators (&& ) oder logischen OR (|| Operator) kombinieren. Beispielsweise bedeutet die letzte der if-Bedingungen in den vorherigen Beispielen, dass FileProcessingIsDone nicht auf true und displayMessage auf false festgelegt ist.
Der Else-Block
Eine letzte Sache über if-Blöcke: auf einen if-Block kann ein else-Block folgen. Ein else-Block ist nützlich, wenn Sie anderen Code ausführen müssen, wenn die Bedingung false ist. Im Folgenden finden Sie ein einfaches Beispiel:
var message = "";
if(errorOccurred == true)
{
message = "Sorry, an error occurred.";
}
else
{
message = "The process finished without errors!";
}
Sie werden einige Beispiele in späteren Tutorials dieser Reihe sehen, in denen die Verwendung eines Else-Blocks nützlich ist.
Testen, ob es sich bei der Anforderung um eine Übermittlung (Post) handelt
Es gibt noch mehr, aber kehren wir zum Beispiel zurück, das die Bedingung if(IsPost){ ... }aufweist. IsPost ist eigentlich eine Eigenschaft der aktuellen Seite. Wenn die Seite zum ersten Mal angefordert wird, gibt IsPost false zurück. Wenn Sie jedoch auf eine Schaltfläche klicken oder die Seite anderweitig übermitteln , d. h., Sie posten sie, gibt IsPost true zurück. Mit IsPost können Sie also bestimmen, ob Es sich um eine Formularübermittlung handelt. (In Bezug auf HTTP-Verben gibt IsPost false zurück, wenn die Anforderung ein GET-Vorgang ist. Wenn es sich bei der Anforderung um einen POST-Vorgang handelt, gibt IsPost true zurück.) In einem späteren Tutorial arbeiten Sie mit Eingabeformularen, in denen dieser Test besonders nützlich ist.
Führen Sie die Seite aus. Da Sie die Seite zum ersten Mal angefordert haben, wird "Dies ist das erste Mal, dass Sie die Seite angefordert haben" angezeigt. Diese Zeichenfolge ist der Wert, mit dem Sie die Nachrichtenvariable initialisiert haben. Es gibt einen if(IsPost)-Test, der aber im Moment false zurückgibt, sodass der Code im if-Block nicht ausgeführt wird.
Klicken Sie auf die Schaltfläche Senden . Die Seite wird erneut angefordert. Wie zuvor ist die Nachrichtenvariable auf "Dies ist das erste Mal ..." festgelegt. Dieses Mal gibt der Test if(IsPost) jedoch true zurück, sodass der Code im if-Block ausgeführt wird. Der Code ändert den Wert der Nachrichtenvariablen in einen anderen Wert, der im Markup gerendert wird.
Fügen Sie nun eine if-Bedingung im Markup hinzu. Fügen Sie unter dem <p-Element> , das die Schaltfläche Submit enthält, das folgende Markup hinzu:
@if(IsPost){
<p>You submitted the page at @DateTime.Now</p>
}
Sie fügen Code innerhalb des Markups hinzu, sodass Sie mit @beginnen müssen. Dann gibt es einen if-Test, der dem test ähnelt, den Sie zuvor im Codeblock hinzugefügt haben. Innerhalb der geschweiften Klammern fügen Sie jedoch gewöhnlichen HTML-Code hinzu– zumindest ist es gewöhnlich, bis es zu @DateTime.Nowkommt. Dies ist ein weiteres bisschen Razor-Code, also müssen Sie @ davor hinzufügen.
Der Punkt hier ist, dass Sie if-Bedingungen sowohl im Codeblock oben als auch im Markup hinzufügen können. Wenn Sie eine if-Bedingung im Text der Seite verwenden, können die Zeilen im Block Markup oder Code sein. In diesem Fall müssen Sie , wie es immer der Fall ist, Markup und Code kombinieren, @ verwenden, um ASP.NET klar zu machen, wo sich der Code befindet.
Führen Sie die Seite aus, und klicken Sie auf Übermitteln. Dieses Mal wird beim Übermitteln nicht nur eine andere Meldung angezeigt ("Jetzt haben Sie übermittelt ..."), sondern es wird auch eine neue Nachricht angezeigt, die datums- und uhrzeitlich auflistet.
Testen des Werts einer Abfragezeichenfolge
Ein weiterer Test. Dieses Mal fügen Sie einen if-Block hinzu, der einen Wert namens show testet, der möglicherweise in der Abfragezeichenfolge übergeben wird. (Wie folgt: http://localhost:43097/TestRazorPart2.cshtml?show=true) Sie ändern die Seite so, dass die angezeigte Meldung ("Dies ist das erste Mal ..." usw.) nur angezeigt wird, wenn der Wert von show true ist.
Fügen Sie unten (aber innerhalb) des Codeblocks oben auf der Seite Folgendes hinzu:
var showMessage = false;
if(Request.QueryString["show"].AsBool() == true) {
showMessage = true;
}
Der vollständige Codeblock sieht nun wie im folgenden Beispiel aus. (Denken Sie daran, dass der Einzug beim Kopieren des Codes auf ihre Seite möglicherweise anders aussieht. Dies wirkt sich jedoch nicht auf die Ausführung des Codes aus.)
@{
var message = "This is the first time you've requested the page.";
if(IsPost) {
message = "Now you've submitted the page.";
}
var showMessage = false;
if(Request.QueryString["show"].AsBool() == true) {
showMessage = true;
}
}
Der neue Code im -Block initialisiert eine Variable namens showMessage mit false. Anschließend wird ein If-Test ausgeführt, um nach einem Wert in der Abfragezeichenfolge zu suchen. Wenn Sie die Seite zum ersten Mal anfordern, hat sie eine URL wie die folgende:
http://localhost:43097/TestRazorPart2.cshtml
Der Code bestimmt, ob die URL eine Variable mit dem Namen show in der Abfragezeichenfolge enthält, wie diese Version der URL:
http://localhost:43097/TestRazorPart2.cshtml?show=true
Der Test selbst untersucht die QueryString-Eigenschaft des Request-Objekts. Wenn die Abfragezeichenfolge ein Element mit dem Namen show enthält, und wenn dieses Element auf true festgelegt ist, wird der if-Block ausgeführt und legt die showMessage-Variable auf true fest.
Hier gibt es einen Trick, wie Sie sehen können. Wie der Name sagt, ist die Abfragezeichenfolge eine Zeichenfolge. Sie können jedoch nur auf true und false testen, wenn der von Ihnen getestete Wert ein boolescher Wert (true/false) ist. Bevor Sie den Wert der Show-Variable in der Abfragezeichenfolge testen können, müssen Sie sie in einen booleschen Wert konvertieren. Dies ist das, was die AsBool-Methode tut – sie nimmt eine Zeichenfolge als Eingabe an und konvertiert sie in einen booleschen Wert. Wenn die Zeichenfolge "true" ist, konvertiert die AsBool-Methode diesen Wert eindeutig in true. Wenn der Wert der Zeichenfolge etwas anderes ist, gibt AsBool false zurück.
Tipp
Datentypen und As()-Methoden
Wir haben bisher nur gesagt, dass Sie beim Erstellen einer Variablen die Schlüsselwort (keyword) var verwenden. Das ist jedoch nicht die ganze Geschichte. Um Werte zu bearbeiten – um Zahlen hinzuzufügen oder Zeichenfolgen zu verketten, Datumsangaben zu vergleichen oder auf true/false zu testen – muss C# mit einer entsprechenden internen Darstellung des Werts arbeiten. C# kann in der Regel ermitteln, wie diese Darstellung aussehen soll (d. h. welcher Typ die Daten sind), basierend auf dem, was Sie mit den Werten tun. Ab und zu kann es das aber nicht. Andernfalls müssen Sie helfen, indem Sie explizit angeben, wie C# die Daten darstellen soll. Die AsBool-Methode tut dies– sie teilt C# mit, dass ein Zeichenfolgenwert von "true" oder "false" als boolescher Wert behandelt werden soll. Es gibt ähnliche Methoden, um Zeichenfolgen auch als andere Typen darzustellen, z. B. AsInt (treat as an integer), AsDateTime (treat as a date/time), AsFloat (treat as a floating-point number) usw. Wenn Sie diese As( ) -Methoden verwenden, wird ein Fehler angezeigt, wenn C# den Zeichenfolgenwert nicht wie angefordert darstellen kann.
Entfernen Oder kommentieren Sie im Markup der Seite dieses Element (hier wird es auskommentiert angezeigt):
<!-- <p>@message</p> -->
Fügen Sie Genau dort, wo Sie diesen Text entfernt oder auskommentiert haben, Folgendes hinzu:
@if(showMessage) {
<p>@message</p>
}
Der if-Test besagt, dass ein p-Element> mit dem Wert der Nachrichtenvariable gerendert <wird, wenn die showMessage-Variable true ist.
Zusammenfassung Ihrer bedingten Logik
Falls Sie sich nicht ganz sicher sind, was Sie gerade getan haben, finden Sie hier eine Zusammenfassung.
- Die Nachrichtenvariable wird mit einer Standardzeichenfolge initialisiert ("Dies ist das erste Mal ...").
- Wenn die Seitenanforderung das Ergebnis einer Übermittlung (Post) ist, wird der Wert der Nachricht in "Jetzt haben Sie übermittelt ..." geändert.
- Die showMessage-Variable wird zu false initialisiert.
- Wenn die Abfragezeichenfolge ?show=true enthält, wird die showMessage-Variable auf true festgelegt.
- Wenn showMessage true ist, wird im Markup ein <p-Element> gerendert, das den Wert der Nachricht anzeigt. (Wenn showMessage false ist, wird an diesem Punkt im Markup nichts gerendert.)
- Wenn es sich bei der Anforderung um einen Post handelt, wird im Markup ein <p-Element> gerendert, das Datum und Uhrzeit anzeigt.
Führen Sie die Seite aus. Es gibt keine Nachricht, da showMessage false ist. Daher gibt der test if(showMessage) im Markup false zurück.
Klicken Sie auf Submit(Senden). Das Datum und die Uhrzeit werden angezeigt, aber immer noch keine Nachricht.
Navigieren Sie in Ihrem Browser zum Feld URL, und fügen Sie am Ende der URL Folgendes hinzu: ?show=true, und drücken Sie dann die EINGABETASTE.
Die Seite wird erneut angezeigt. (Da Sie die URL geändert haben, ist dies eine neue Anforderung, keine Übermittlung.) Klicken Sie erneut auf Übermitteln . Die Nachricht wird erneut angezeigt, ebenso wie das Datum und die Uhrzeit.
Ändern Sie in der URL ?show=true in ?show=false, und drücken Sie die EINGABETASTE. Übermitteln Sie die Seite erneut. Die Seite ist zurück zum Start – keine Nachricht.
Wie bereits erwähnt, ist die Logik dieses Beispiels ein wenig erfunden. Wenn jedoch auf vielen Ihrer Seiten angezeigt wird, benötigt es eines oder mehrere der hier angezeigten Formulare.
Installieren eines Hilfsprogrammes (Anzeigen eines Gravatarimages)
Einige Aufgaben, die Benutzer häufig auf Webseiten ausführen möchten, erfordern viel Code oder zusätzliches Wissen. Beispiele: Anzeigen eines Diagramms für Daten; Platzieren einer Facebook Schaltfläche "Gefällt mir" auf einer Seite; Senden von E-Mails von Ihrer Website; Zuschneiden oder Ändern der Größe von Bildern; Verwenden von PayPal für Ihre Website. Um diese Art von Dingen zu vereinfachen, können Sie ASP.NET Web Pages Hilfsprogramme verwenden. Hilfsprogramme sind Komponenten, die Sie für eine Website installieren und mit denen Sie typische Aufgaben mit nur wenigen Zeilen Razor-Code ausführen können.
ASP.NET Web Pages hat einige Helfer integriert. Viele Hilfsprogramme sind jedoch in Paketen (Add-Ins) verfügbar, die mit dem NuGet-Paket-Manager bereitgestellt werden. Mit NuGet können Sie ein Paket auswählen, das installiert werden soll, und dann werden alle Details der Installation berücksichtigt.
In diesem Teil des Tutorials installieren Sie ein Hilfsprogramm, mit dem Sie ein Gravatar-Bild ("global erkannter Avatar") anzeigen können. Sie lernen zwei Dinge. Zum einen finden und installieren Sie ein Hilfsprogramm. Sie erfahren auch, wie ein Helfer es einfach macht, etwas zu tun, das Sie andernfalls tun müssten, indem Sie viel Code verwenden, den Sie selbst schreiben müssten.
Sie können Ihren eigenen Gravatar auf der Gravatar-Website unter http://www.gravatar.com/registrieren, aber es ist nicht unbedingt erforderlich, ein Gravatar-Konto zu erstellen, um diesen Teil des Tutorials auszuführen.
Klicken Sie in WebMatrix auf die Schaltfläche NuGet .
Dadurch wird der NuGet-Paket-Manager gestartet und verfügbare Pakete angezeigt. (Nicht alle Pakete sind Hilfsprogramme; einige fügen WebMatrix selbst Funktionen hinzu, einige sind zusätzliche Vorlagen usw.) Möglicherweise erhalten Sie eine Fehlermeldung zur Versionsinkompatibilität. Sie können diese Fehlermeldung ignorieren, indem Sie auf OK klicken und mit diesem Tutorial fortfahren.
Geben Sie in das Suchfeld "asp.net Hilfsprogramme" ein. NuGet zeigt die Pakete an, die den Suchbegriffen entsprechen.
Die ASP.NET Webhilfsbibliothek enthält Code, um viele gängige Aufgaben zu vereinfachen, einschließlich der Verwendung von Gravatar-Bildern. Wählen Sie das Paket ASP.NET Webhilfsbibliothek aus, und klicken Sie dann auf Installieren , um das Installationsprogramm zu starten. Wählen Sie Ja aus, wenn Sie gefragt werden, ob Sie das Paket installieren möchten, und akzeptieren Sie die Bedingungen, um die Installation abzuschließen.
Das ist alles. NuGet lädt alles herunter und installiert alles, einschließlich aller zusätzlichen Komponenten, die möglicherweise erforderlich sind (Abhängigkeiten).
Wenn Sie aus irgendeinem Grund ein Hilfsprogramm deinstallieren müssen, ist der Vorgang sehr ähnlich. Klicken Sie auf die Schaltfläche NuGet , klicken Sie auf die Registerkarte Installiert , und wählen Sie das Paket aus, das Sie deinstallieren möchten.
Verwenden eines Hilfsprogrammes auf einer Seite
Nun verwenden Sie das soeben installierte Hilfsprogramm. Der Vorgang zum Hinzufügen eines Hilfsprogrammes zu einer Seite ist für die meisten Helfer ähnlich.
Erstellen Sie in WebMatrix eine Seite, und nennen Sie sie GravatarTest.cshml. (Sie erstellen eine spezielle Seite, um das Hilfsprogramm zu testen, aber Sie können Hilfsprogramme auf jeder Seite Ihrer Website verwenden.)
Fügen Sie innerhalb des <body-Elements> ein div-Element> hinzu<. Geben Sie im <div-Element> Folgendes ein:
@Gravatar.
Das Zeichen @ ist dasselbe Zeichen, das Sie zum Markieren von Razor-Code verwendet haben. Gravatar ist das Hilfsobjekt, mit dem Sie arbeiten.
Sobald Sie den Punkt (.) eingeben, zeigt WebMatrix eine Liste der Methoden (Funktionen) an, die das Gravatar-Hilfsprogramm zur Verfügung stellt:
Dieses Feature wird als IntelliSense bezeichnet. Es hilft Ihnen beim Programmieren, indem kontextgerechte Optionen bereitgestellt werden. IntelliSense funktioniert mit HTML, CSS, ASP.NET Code, JavaScript und anderen Sprachen, die in WebMatrix unterstützt werden. Es ist ein weiteres Feature, das die Entwicklung von Webseiten in WebMatrix erleichtert.
Drücken Sie G auf der Tastatur, und Sie sehen, dass IntelliSense die GetHtml-Methode findet. Drücken Sie TAB. IntelliSense fügt die ausgewählte Methode (GetHtml) für Sie ein. Geben Sie eine offene Klammer ein, und beachten Sie, dass die schließende Klammer automatisch hinzugefügt wird. Geben Sie Ihre E-Mail-Adresse in Anführungszeichen zwischen den beiden Klammern ein. Wenn Sie über ein Gravatar-Konto verfügen, wird Ihr Profilbild zurückgegeben. Wenn Sie kein Gravatar-Konto haben, wird ein Standardimage zurückgegeben. Wenn Sie fertig sind, sieht die Zeile wie folgt aus:
@Gravatar.GetHtml("john@contoso.com")
Zeigen Sie nun die Seite in einem Browser an. Je nachdem, ob Sie über ein Gravatar-Konto verfügen, wird entweder Ihr Bild oder das Standardbild angezeigt.
Um eine Vorstellung davon zu erhalten, was der Helfer für Sie tut, sehen Sie sich die Quelle der Seite im Browser an. Zusammen mit dem HTML-Code, den Sie auf Ihrer Seite hatten, sehen Sie ein Bildelement, das einen Bezeichner enthält. Dies ist Code, den das Hilfsprogramm in die Seite an der Stelle gerendert hat, an der Sie hatten @Gravatar.GetHtml. Der Helfer hat die von Ihnen bereitgestellten Informationen übernommen und den Code generiert, der direkt mit Gravatar kommuniziert, um das richtige Bild für das angegebene Konto wieder zu erhalten.
Mit der GetHtml-Methode können Sie auch das Bild anpassen, indem Sie andere Parameter angeben. Der folgende Code zeigt, wie Sie ein Bild mit einer Breite und Höhe von 40 Pixel anfordern und ein angegebenes Standardbild namens wavatar verwenden, wenn das angegebene Konto nicht vorhanden ist.
@Gravatar.GetHtml("john@contoso.com", 40, "wavatar")
Dieser Code erzeugt etwa das folgende Ergebnis (das Standardbild variiert nach dem Zufallsprinzip).
Nächster Schritt
Um dieses Tutorial kurz zu halten, mussten wir uns nur auf einige Grundlagen konzentrieren. Natürlich gibt es noch viel mehr bei Razor und C#. Sie erfahren mehr, während Sie diese Tutorials durchlaufen. Wenn Sie jetzt mehr über die Programmieraspekte von Razor und C# erfahren möchten, können Sie hier eine ausführlichere Einführung lesen: Einführung in ASP.NET Webprogrammierung mit der Razor-Syntax.
Das nächste Tutorial führt Sie in das Arbeiten mit einer Datenbank ein. In diesem Tutorial beginnen Sie mit der Erstellung der Beispielanwendung, mit der Sie Ihre Lieblingsfilme auflisten können.
Vollständige Auflistung für die TestRazor-Seite
@{
// Working with numbers
var a = 4;
var b = 5;
var theSum = a + b;
// Working with characters (strings)
var technology = "ASP.NET";
var product ="Web Pages";
// Working with objects
var rightNow = DateTime.Now;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Razor Syntax</title>
<meta charset="utf-8" />
<style>
body {font-family:Verdana; margin-left:50px; margin-top:50px;}
div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
span.bright {color:red;}
</style>
</head>
<body>
<h1>Testing Razor Syntax</h1>
<form method="post">
<div>
<p>The value of <em>a</em> is @a. The value of <em>b</em> is @b.
<p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
<p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
</div>
<div>
<p>The technology is @technology, and the product is @product.</p>
<p>Together they are <span class="bright">@(technology + " " + product)</span></p>
</div>
<div>
<p>The current date and time is: @rightNow</p>
<p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
</div>
</form>
</body>
</html>
Vollständige Auflistung für die Seite "TestRazorPart2"
@{
var message = "This is the first time you've requested the page.";
if (IsPost) {
message = "Now you've submitted the page.";
}
var showMessage = false;
if (Request.QueryString["show"].AsBool() == true) {
showMessage = true;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Razor Syntax - Part 2</title>
<meta charset="utf-8" />
<style>
body {font-family:Verdana; margin-left:50px; margin-top:50px;}
div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
</style>
</head>
<body>
<h1>Testing Razor Syntax - Part 2</h1>
<form method="post">
<div>
<!--<p>@message</p>-->
@if(showMessage){
<p>@message</p>
}
<p><input type="submit" value="Submit" /></p>
@if (IsPost) {
<p>You submitted the page at @DateTime.Now</p>
}
</div>
</form>
</body>
</html>
Vollständige Auflistung für GravatarTest-Seite
@{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
@Gravatar.GetHtml("john@contoso.com")
@Gravatar.GetHtml("john@contoso.com", 40, "wavatar")
</div>
</body>
</html>
Weitere Ressourcen
Feedback
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Issues stufenweise als Feedbackmechanismus für Inhalte abbauen und durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unter https://aka.ms/ContentUserFeedback.
Feedback senden und anzeigen für