Lernprogramm: Erste Schritte mit C# und ASP.NET Core in Visual Studio

1. Wählen Sie im Startfenster Neues Projekt erstellenaus.

   

2. Wählen Sie im Fenster Erstellen eines neuen Projekts in der Liste "Sprache" C#- aus. Wählen Sie als Nächstes Windows aus der Plattformliste aus, und Web- aus der Projekttypenliste aus.

   Nachdem Sie die Filter für Sprache, Plattform und Projekttyp angewendet haben, wählen Sie die Vorlage ASP.NET Core Web App aus, und wählen Sie dann Nextaus.

   

3. Geben Sie im Fenster Konfigurieren des neuen ProjektsMyCoreApp in das Feld Projektname ein. Wählen Sie dann Weiteraus.

   

4. Überprüfen Sie im Fenster Zusätzliche Informationen, ob .NET Core 3.1- im Feld Zielframework angezeigt wird.

   In diesem Fenster können Sie die Docker-Unterstützung aktivieren und Authentifizierungsunterstützung hinzufügen. Das Dropdownmenü für Authentifizierungstyp verfügt über die folgenden vier Optionen:

   • Keine: Keine Authentifizierung.
   • einzelne Konten: Diese Authentifizierungen werden in einer lokalen oder azurebasierten Datenbank gespeichert.
   • Microsoft Identity Platform: Diese Option verwendet Microsoft Entra-ID oder Microsoft 365 für die Authentifizierung.
   • Windows: Geeignet für Intranetanwendungen.

   Lassen Sie das Kontrollkästchen "Docker aktivieren" deaktiviert, und wählen Sie "Keine" für den Authentifizierungstyp aus.

   

5. Wählen Sie Erstellen aus.

Visual Studio öffnet Ihr neues Projekt.

1. Wählen Sie im Startfenster Neues Projekt erstellenaus.

   

2. Wählen Sie im Fenster Erstellen eines neuen Projekts in der Liste "Sprache" C#- aus. Wählen Sie als Nächstes Windows aus der Liste Alle Plattformen aus, und Web- aus der Liste Alle Projekttypen Liste aus.

   Nachdem Sie die Sprach-, Plattform- und Projekttypfilter angewendet haben, wählen Sie die vorlage ASP.NET Core Web App (Razor Pages) aus, und wählen Sie dann Nextaus.

   

3. Geben Sie im Fenster "Konfigurieren Ihres neuen Projekts"MyCoreApp in das Feld Projektname ein. Wählen Sie dann Weiteraus.

   

4. Stellen Sie im Fenster Zusätzliche Informationen sicher, dass .NET 8.0 im Feld Zielframework angezeigt wird.

   In diesem Fenster können Sie die Containerunterstützung aktivieren und Authentifizierungsunterstützung hinzufügen. Das Dropdownmenü für Authentifizierungstyp verfügt über die folgenden vier Optionen:

   • Keine: Keine Authentifizierung.
   • einzelne Konten: Diese Authentifizierungen werden in einer lokalen oder azurebasierten Datenbank gespeichert.
   • Microsoft Identity Platform: Diese Option verwendet Microsoft Entra-ID oder Microsoft 365 für die Authentifizierung.
   • Windows: Geeignet für Intranetanwendungen.

   Lassen Sie das Kontrollkästchen Containerunterstützung aktivieren deaktiviert, und wählen Sie Keine für den Authentifizierungstyp aus.

   

5. Wählen Sie Erstellen aus.

Visual Studio öffnet Ihr neues Projekt.

Kennenlernen der Projektmappe

1. Die Projektvorlage erstellt eine Lösung mit einem einzelnen ASP.NET Core-Projekt namens MyCoreApp. Wählen Sie die Registerkarte Projektmappen-Explorer aus, um den Inhalt anzuzeigen.

   

2. Erweitern Sie den Ordner Seiten.

   

3. Wählen Sie die Index.cshtml Datei aus, und zeigen Sie die Datei im Code-Editor an.

   

4. Jede CSHTML-Datei weist eine zugeordnete Codedatei auf. Um die Codedatei im Editor zu öffnen, erweitern Sie den Index.cshtml Knoten im Projektmappen-Explorer, und wählen Sie die Index.cshtml.cs Datei aus.

   

5. Zeigen Sie die Index.cshtml.cs Datei im Code-Editor an.

   

6. Das Projekt enthält einen Ordner "wwwroot", der das Hauptverzeichnis für Ihre Website ist. Erweitern Sie den Ordner, um dessen Inhalt anzuzeigen.

   

   Sie können statische Websiteinhalte wie CSS, Bilder und JavaScript-Bibliotheken direkt in den Pfaden platzieren, in denen sie verwendet werden sollen.

   Das Projekt enthält auch Konfigurationsdateien, die die Web-App zur Laufzeit verwalten. Die Standardanwendung Konfiguration wird in appsettings.jsongespeichert. Sie können diese Einstellungen jedoch überschreiben, indem Sie appsettings.Development.jsonverwenden.

7. Erweitern Sie die appsettings.json Datei, um die appsettings.Development.json Datei anzuzeigen.

   

Ausführen, Debuggen und Vornehmen von Änderungen

1. Wählen Sie auf der Symbolleiste die Schaltfläche IIS Express aus, um die App im Debugmodus zu erstellen und auszuführen. Alternativ können Sie F5-drücken oder in der Menüleiste zu Debug>Start Debugging wechseln.

   

   Anmerkung

   Wenn eine Fehlermeldung angezeigt wird, die besagt, dass Keine Verbindung mit dem Webserver "IIS Express"herstellen kann, schließen Sie Visual Studio, und starten Sie das Programm dann als Administrator neu. Sie können diese Aufgabe ausführen, indem Sie im Startmenü mit der rechten Maustaste auf das Visual Studio-Symbol klicken und dann im Kontextmenü die Option Als Administrator ausführen auswählen.

   Möglicherweise erhalten Sie auch eine Meldung, die fragt, ob Sie ein IIS SSL Express-Zertifikat akzeptieren möchten. Um den Code in einem Webbrowser anzuzeigen, wählen Sie Jaaus, und wählen Sie dann Ja aus, wenn Sie eine Nachverfolgungswarnung erhalten.

2. Visual Studio startet ein Browserfenster. In der Menüleiste sollten die Seiten Home und Privacy angezeigt werden.

3. Wählen Sie in der Menüleiste die Seite Privacy aus. Die Seite Datenschutz- im Browser rendert den Text, der in der datei Privacy.cshtml festgelegt ist.

   

4. Kehren Sie zu Visual Studio zurück, und drücken Sie dann UMSCHALT+F5, um das Debuggen zu beenden. Diese Aktion schließt das Projekt im Browserfenster.

5. Öffnen Sie in Visual Studio Privacy.cshtml zum Bearbeiten. Löschen Sie als Nächstes den Satz Use this page to detail your site's privacy policy, und ersetzen Sie ihn durch This page is under construction as of @ViewData["TimeStamp"].

   

6. Jetzt nehmen wir eine Codeänderung vor. Wählen Sie Privacy.cshtml.cs aus. Bereinigen Sie dann die using-Anweisungen oben in der Datei mithilfe der folgenden Tastenkombination:

   Zeigen Sie mit der Maus auf eine ausgegraute using-Anweisung, oder wählen Sie eine aus. Eine Glühbirne für schnelle Aktionen erscheint unterhalb der Einfügemarke oder am linken Rand. Wählen Sie die Glühbirne und dann Remove unnecessary usings aus.

   

   Klicken Sie auf Vorschau der Änderungen, um die Änderungen anzuzeigen.

   

   Klicken Sie auf Übernehmen. Visual Studio löscht die unnötigen using Direktiven aus der Datei.

7. Ändern Sie als Nächstes in der OnGet()-Methode den Textkörper in den folgenden Code:

   public void OnGet()
   {
      string dateTime = DateTime.Now.ToShortDateString();
      ViewData["TimeStamp"] = dateTime;
   }
   

8. Sie sehen, dass DateTime wellenförmig unterstrichen ist. Die Wellenlinie gibt an, dass sich dieser Typ nicht im Geltungsbereich befindet.

   

   Öffnen Sie die Symbolleiste Fehlerliste. Dort werden dieselben Fehler aufgelistet. Wenn Ihnen die Symbolleiste Fehlerliste nicht angezeigt wird, wählen Sie in der oberen Menüleiste Ansicht>Fehlerliste aus.

   

9. Lassen Sie uns diesen Fehler beheben. Platzieren Sie im Code-Editor den Cursor in der Zeile, die den Fehler enthält, und wählen Sie dann die Glühbirne für Schnelle Aktionen am linken Rand aus. Wählen Sie im Dropdownmenü using System; aus, um diese Anweisung am Anfang der Datei hinzuzufügen und die Fehler zu beheben.

   

10. Drücken Sie F5-, um Ihr Projekt im Webbrowser zu öffnen.

11. Wählen Sie oben auf der Webseite Datenschutz, um Ihre Änderungen anzusehen.

    

12. Schließen Sie den Webbrowser, drücken Sie Shift+F5, um das Debuggen zu beenden.

Ändern der Startseite

1. Erweitern Sie im Projektmappen-Explorerden Ordner Seiten, und wählen Sie dann Index.cshtmlaus.

   

   Die Index.cshtml Datei entspricht Ihrer Startseite Seite in der Web-App, die in einem Webbrowser ausgeführt wird.

   

   Im Code-Editor sehen Sie HTML-Code für den Text, der auf der Seite Home angezeigt wird.

   

2. Ersetzen Sie den Willkommenstext durch Hello World!

   

3. Wählen Sie IIS Express aus, oder drücken Sie STRG+F5-, um die App auszuführen und in einem Webbrowser zu öffnen.

   

4. Im Webbrowser werden Ihre neuen Änderungen auf der Home-Seite angezeigt.

   

5. Schließen Sie den Webbrowser, drücken Sie UMSCHALT+F5, um das Debuggen zu beenden, und speichern Sie das Projekt. Sie können Visual Studio jetzt schließen.

Kennenlernen der Projektmappe

1. Die Projektvorlage erstellt eine Projektmappe mit einem einzelnen ASP.NET Core-Projekt namens MyCoreApp. Wählen Sie die Registerkarte Solution Explorer aus, um deren Inhalt anzuzeigen.

   

2. Erweitern Sie den Ordner Seiten.

   

3. Wählen Sie die Index.cshtml Datei aus, und zeigen Sie sie im Code-Editor an.

   

4. Jede CSHTML-Datei weist eine zugeordnete Codedatei auf. Um die Codedatei im Editor zu öffnen, erweitern Sie den Index.cshtml Knoten im Projektmappen-Explorer, und wählen Sie die Index.cshtml.cs Datei aus.

   

5. Zeigen Sie die Index.cshtml.cs Datei im Code-Editor an.

   

6. Das Projekt enthält einen wwwroot-Ordner, der das Stammverzeichnis für Ihre Website ist. Erweitern Sie den Ordner, um dessen Inhalt anzuzeigen.

   

   Sie können statische Websiteinhalte wie CSS, Bilder und JavaScript-Bibliotheken direkt in den Pfaden platzieren, in denen sie verwendet werden sollen.

7. Das Projekt enthält auch Konfigurationsdateien, die die Web-App zur Laufzeit verwalten. Die Standardanwendung Konfiguration wird in appsettings.jsongespeichert. Sie können diese Einstellungen jedoch überschreiben, indem Sie appsettings.Development.jsonverwenden. Erweitern Sie die appsettings.json Datei, um die appsettings.Development.json Datei anzuzeigen.

   

Ausführen, Debuggen und Vornehmen von Änderungen

1. Wählen Sie auf der Symbolleiste die Schaltfläche https aus, um die App im Debugmodus zu erstellen und auszuführen. Alternativ können Sie F5-drücken oder in der Menüleiste zu Debug>Debugging starten gehen.

   

   Anmerkung

   Möglicherweise erhalten Sie auch eine Nachricht, die fragt, ob Sie ein ASP.NET Core SSL-Zertifikat akzeptieren möchten. Um den Code in einem Webbrowser anzuzeigen, wählen Sie Jaaus, und wählen Sie dann Ja aus, wenn Sie eine Nachverfolgungswarnung erhalten. Erfahren Sie mehr über Erzwingen von SSL in ASP.NET Core.

2. Visual Studio startet ein Browserfenster. Dann sollten die Seiten Startseite und Datenschutz in der Menüleiste angezeigt werden.

3. Wählen Sie Datenschutz in der Menüleiste aus. Die Seite Datenschutz- im Browser rendert den Text, der in der datei Privacy.cshtml festgelegt ist.

   

4. Kehren Sie zu Visual Studio zurück, und drücken Sie dann UMSCHALT+F5, um das Debuggen zu beenden. Diese Aktion schließt das Projekt im Browserfenster.

5. Öffnen Sie in Visual Studio Privacy.cshtml zum Bearbeiten. Löschen Sie als Nächstes den Satz, Verwenden Sie diese Seite, um die Datenschutzrichtlinie Ihrer Website zu detaillieren und ersetzen Sie ihn durch Diese Seite wird seit @ViewData["TimeStamp"]bearbeitet.

   

6. Jetzt nehmen wir eine Codeänderung vor. Wählen Sie Privacy.cshtml.cs aus. Bereinigen Sie dann die using-Direktiven am Anfang der Datei, indem Sie die folgende Tastenkombination auswählen:

   Zeigen Sie mit der Maus auf eine ausgegraute using-Anweisung, oder wählen Sie eine aus. Eine Glühbirne für schnelle Aktionen erscheint unterhalb der Einfügemarke oder am linken Rand. Wählen Sie die Glühbirne aus, und klicken Sie dann auf den Pfeil zum Erweitern neben Nicht benötigte Using-Direktiven entfernen.

   

   Klicken Sie auf Vorschau der Änderungen, um die Änderungen anzuzeigen.

   

   Klicken Sie auf Übernehmen. Visual Studio löscht die unnötigen using Direktiven aus der Datei.

7. Erstellen Sie als Nächstes eine Zeichenfolge für das aktuelle Datum, das für Ihre Kultur oder Region formatiert ist, mithilfe der DateTime.ToString--Methode.

   • Das erste Argument für die Methode gibt an, wie das Datum angezeigt werden soll. In diesem Beispiel wird der Formatbezeichner (d) verwendet, der das kurze Datumsformat angibt.
   • Das zweite Argument ist das CultureInfo-objekt, das die Kultur oder Region für das Datum angibt. Das zweite Argument bestimmt unter anderem die Sprache aller Wörter im Datum und die Art der verwendeten Trennzeichen.

   Ändern Sie den Text der OnGet()-Methode in Privacy.cshtml.cs in den folgenden Code:

   public void OnGet()
   {
      string dateTime = DateTime.Now.ToString("d", new CultureInfo("en-US"));
      ViewData["TimeStamp"] = dateTime;
   }
   

8. Beachten Sie, dass die folgende using Direktive automatisch am Anfang der Datei hinzugefügt wird:

   using System.Globalization;
   

   System.Globalization enthält die CultureInfo-Klasse.

9. Drücken Sie F5-, um Ihr Projekt im Webbrowser zu öffnen.

10. Wählen Sie ganz oben auf der Webseite Datenschutz aus, um Ihre Änderungen anzuzeigen.

    

11. Schließen Sie den Webbrowser, und drücken Sie UMSCHALT+F5, um das Debuggen zu beenden.

Ändern der Startseite

1. Erweitern Sie im Projektmappen-Explorerden Ordner Seiten, und wählen Sie dann Index.cshtmlaus.

   

   Die Index.cshtml Datei entspricht Ihrer Startseite Seite in der Web-App, die in einem Webbrowser ausgeführt wird.

   

   Im Code-Editor sehen Sie HTML-Code für den Text, der auf der Seite Home angezeigt wird.

   

2. Ersetzen Sie den Willkommenstext durch Hello World!

   

3. Wählen Sie https- aus, oder drücken Sie STRG+F5-, um die App auszuführen und in einem Webbrowser zu öffnen.

   

4. Im Webbrowser werden Ihre neuen Änderungen auf der Home-Seite angezeigt.

   

5. Schließen Sie den Webbrowser, drücken Sie Umschalttaste+F5, um das Debuggen zu beenden und das Projekt zu speichern. Sie können Visual Studio jetzt schließen.