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

Gilt für:yesVisual Studio noVisual Studio für Mac

In diesem Tutorial für die C#-Entwicklung mit ASP.NET Core erstellen Sie mit C# eine ASP.NET Core-Web-App in Visual Studio.

In diesem Lernprogramm lernen Sie Folgendes:

  • Erstellen eines Visual Studio-Projekts
  • Erstellen einer ASP.NET Core-Web-App mit C#
  • Vornehmen von Änderungen an der Web-App
  • Einführung in die IDE-Features
  • Ausführen der Web-App

Voraussetzungen

Für dieses Tutorial benötigen Sie Visual Studio. Besuchen Sie die Seite Visual Studio-Downloads, um eine kostenlose Version zu erhalten.

Erstellen eines Projekts

Zunächst erstellen Sie ein ASP.NET Core-Projekt. Der Projekttyp enthält alle Vorlagendateien, die Sie zum Erstellen einer voll funktionsfähigen Website benötigen.

  1. Klicken Sie im Startfenster auf Neues Projekt erstellen.

    Screenshot shows the start window for Visual Studio. Create a new project option is highlighted.

  2. Wählen Sie im Fenster Neues Projekt erstellen in der Liste der Sprachen C# aus. Wählen Sie anschließend in der Liste der Plattformen Windows und in der Liste der Projekttypen Web aus.

    Nachdem Sie die Sprach-, Plattform- und Projekttypfilter angewendet haben, wählen Sie die Vorlage ASP.NET Core-Web-App und dann Weiter aus.

    Screenshot shows the ASP.NET Core Web App project template highlighted in the New Project dialog box.

    Hinweis

    Wenn die Vorlage ASP.NET Core-Web-App nicht angezeigt wird, können Sie sie über das Fenster Neues Projekt erstellen installieren. Wählen Sie in der Meldung Sie finden nicht, wonach Sie suchen? am Ende der Vorlagenliste den Link Weitere Tools und Features installieren aus.

    Screenshot shows the Install more tools and features link that is part of the Not finding what you're looking for message.

    Wählen Sie als Nächstes im Visual Studio-Installer die Workload ASP.NET und Webentwicklung aus.

    Screenshot shows the dot NET Core cross-platform development workload in the Visual Studio Installer.

    Wählen Sie im Visual Studio-Installer Ändern aus. Möglicherweise werden Sie aufgefordert, Ihre Arbeit zu speichern. Wählen Sie als Nächstes Weiter aus, um die Arbeitsauslastung zu installieren.

  3. Geben Sie im Fenster Neues Projekt konfigurieren im Feld Projektname den Text MyCoreApp ein. Klicken Sie anschließend auf Weiter.

    Screenshot shows the Configure your new project window with MyCoreApp entered in the Project name field.

  4. Vergewissern Sie sich, dass im Fenster Zusätzliche Informationen im Feld Zielframework die Option .NET Core 3.1 angezeigt wird. In diesem Fenster können Sie die Docker-Unterstützung aktivieren und Authentifizierungen hinzufügen. Im Dropdownmenü Authentifizierungstyp sind die folgenden vier Optionen vorhanden:

    • Keine. Keine Authentifizierung
    • Einzelne Konten: Diese Authentifizierungen werden in einer lokalen oder Azure-basierten Datenbank gespeichert.
    • Microsoft Identity Platform: Diese Option verwendet Active Directory, Azure AD oder Microsoft 365 für die Authentifizierung.
    • Windows: Geeignet für Intranetanwendungen.

    Lassen Sie das Kontrollkästchen Docker aktivieren deaktiviert, und wählen Sie als Authentifizierungstyp Keine aus. Wählen Sie als Nächstes die Option Erstellen.

    Screenshot shows the default settings in the Additional information window. The Framework value is .NET Core 3.1.

    Visual Studio öffnet das neue Projekt.

  1. Klicken Sie im Startfenster auf Neues Projekt erstellen.

    Screenshot shows the start window for Visual Studio. Create a new project option is highlighted.

  2. Wählen Sie im Fenster Neues Projekt erstellen in der Liste der Sprachen C# aus. Wählen Sie anschließend in der Liste der Plattformen Windows und in der Liste der Projekttypen Web aus.

    Nachdem Sie die Sprach-, Plattform- und Projekttypfilter angewendet haben, wählen Sie die Vorlage ASP.NET Core-Web-App und dann Weiter aus.

    Screenshot shows the ASP.NET Core Web App project template selected and highlighted on the Create a new project page.

    Hinweis

    Wenn die Vorlage ASP.NET Core-Web-App nicht angezeigt wird, können Sie sie über das Fenster Neues Projekt erstellen installieren. Wählen Sie in der Meldung Sie finden nicht, wonach Sie suchen? am Ende der Vorlagenliste den Link Weitere Tools und Features installieren aus.

    Screenshot shows the Install more tools and features link that is part of the Not finding what you're looking for message.

    Wählen Sie anschließend im Visual Studio-Installer die Workload ASP.NET und Webentwicklung aus.

    Screenshot shows the ASP.NET and web development workload in the Visual Studio Installer.

    Wählen Sie im Visual Studio-Installer Ändern aus. Möglicherweise werden Sie aufgefordert, Ihre Arbeit zu speichern. Wählen Sie als Nächstes Weiter aus, um die Arbeitsauslastung zu installieren.

  3. Geben Sie im Fenster Neues Projekt konfigurieren im Feld Projektname den Text MyCoreApp ein. Klicken Sie anschließend auf Weiter.

    Screenshot shows the Configure your new project window with MyCoreApp entered in the Project name field.

  4. Vergewissern Sie sich, dass im Fenster Zusätzliche Informationen im Feld Zielframework die Option .NET 6.0 angezeigt wird. In diesem Fenster können Sie die Docker-Unterstützung aktivieren und Authentifizierungen hinzufügen. Im Dropdownmenü Authentifizierungstyp sind die folgenden vier Optionen vorhanden:

    • Keine. Keine Authentifizierung
    • Einzelne Konten: Diese Authentifizierungen werden in einer lokalen oder Azure-basierten Datenbank gespeichert.
    • Microsoft Identity Platform: Diese Option verwendet Active Directory, Azure AD oder Microsoft 365 für die Authentifizierung.
    • Windows: Geeignet für Intranetanwendungen.

    Lassen Sie das Kontrollkästchen Docker aktivieren deaktiviert, und wählen Sie als Authentifizierungstyp Keine aus. Wählen Sie als Nächstes die Option Erstellen.

    Screenshot shows the default settings in the Additional information window. The Framework value is .NET 6.0.

    Visual Studio öffnet das neue Projekt.

Die Projektmappe

Diese Lösung verwendet das Razor Pages-Entwurfsmuster. Dieses unterscheidet sich vom Entwurfsmuster Model View Controller (MVC) dadurch, dass es optimiert ist und den Modell- und Controllercode in die Razor Pages-Seite selbst einfügt.

Kennenlernen der Projektmappe

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

    Screenshot shows the MyCoreApp project selected in the Solution Explorer in Visual Studio.

  2. Erweitern Sie den Ordner Seiten.

    Screenshot shows the contents of the Pages folder in the the Solution Explorer in Visual Studio..

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

    Screenshot shows the Index dot c s h t m l file open in the Visual Studio code editor.

  4. Jede CSHTML-Datei verfügt über eine zugeordnete Codedatei. Erweitern Sie den Knoten Index.cshtml im Projektmappen-Explorer, und wählen Sie die Datei Index.cshtml.cs aus, um die Codedatei im Editor zu öffnen.

    Screenshot shows Index dot c s h t m l file selected in the Solution Explorer in Visual Studio.

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

    Screenshot shows the Index dot c s h t m l dot c s file open in the Visual Studio code editor.

  6. Das Projekt enthält den Ordner wwwroot, der das Stammverzeichnis Ihrer Website ist. Erweitern Sie den Ordner, um den Inhalt anzuzeigen.

    Screenshot shows the w w w root folder selected in the Solution Explorer in Visual Studio.

    Sie können statische Websiteinhalte wie CSS, Bilder und JavaScript-Bibliotheken direkt in die gewünschten Pfade einfügen.

  7. Das Projekt enthält auch Konfigurationsdateien, die die Web-App zur Laufzeit verwalten. Die Standardkonfiguration der Anwendung befindet sich in der Datei appsettings.json. Sie können diese Einstellungen jedoch auch mit appsettings.Development.json überschreiben. Erweitern Sie die Datei appsettings.json, um die Datei appsettings.Development.json anzuzeigen.

    Screenshot shows appsettings dot j son selected and expanded in the Solution Explorer in Visual Studio.

Ausführen, Debuggen und Vornehmen von Änderungen

  1. Klicken Sie in der Symbolleiste auf die Schaltfläche IIS Express, um die App im Debugmodus zu kompilieren und auszuführen. Alternativ können Sie F5 drücken oder in der Menüleiste Debuggen>Debuggen starten auswählen.

    Screenshot shows the I I S Express button highlighted in the toolbar in Visual Studio.

    Hinweis

    Wenn die Fehlermeldung Es kann keine Verbindung mit dem Webserver "IIS Express" hergestellt werden angezeigt wird, schließen Sie Visual Studio, und starten Sie das Programm als Administrator neu. Klicken Sie hierfür über das Startmenü mit der rechten Maustaste auf Visual Studio, und wählen Sie die Option Als Administrator ausführen aus dem Kontextmenü aus.

    Möglicherweise wird auch eine Meldung angezeigt, die Sie fragt, ob Sie ein IIS-SSL-Expresszertifikat akzeptieren möchten. Wählen Sie Ja aus, um den Code in einem Webbrowser anzuzeigen, und dann erneut Ja, wenn im Anschluss eine Sicherheitswarnung angezeigt wird.

  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. Im Browser wird auf der Seite Datenschutz der in der Datei Privacy.cshtml festgelegte Text gerendert.

    Screenshot shows the MyCoreApp Privacy page with the following text: Use this page to detail your site's privacy policy.

  4. Wechseln Sie zurück zu Visual Studio, und drücken Sie UMSCHALT+F5, um das Debuggen zu beenden. Durch diese Aktion wird auch das Projekt im Browserfenster geschlossen.

  5. Öffnen Sie in Visual Studio die Datei Privacy.cshtml, um sie zu 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"] .

    Screenshot shows the Privacy dot c s h t m l file open in the Visual Studio code editor with the updated text.

  6. Nehmen Sie nun 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 wird unterhalb der Einfügemarke oder am linken Rand angezeigt. Wählen Sie die Glühbirne und dann Remove unnecessary usings (Nicht benötigte using-Anweisungen entfernen) aus.

    Screenshot shows the Privacy dot c s h t m l file in the Visual Studio code editor with the Quick Actions tooltip exposed for a greyed out using directive.

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

    Screenshot shows the Preview Changes dialog box. The dialog box shows the directive being removed, and previews the code change after the removal.

    Wählen Sie Übernehmen. Visual Studio löscht die unnötigen using-Anweisungen aus der Datei.

  7. Ändern Sie dann in der OnGet()-Methode den Text 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.

    Screenshot shows an error mark, in the form of a wavy underline, for DateTime in the Visual Studio code editor.

    Ö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.

    Screenshot shows the Error List toolbar in Visual Studio with DateTime listed.

  9. Beheben Sie diesen Fehler nun. Bewegen Sie den Cursor im Code-Editor in die Zeile, die den Fehler enthält, und wählen Sie anschließend am linken Rand die Glühbirne für schnelle Aktionen aus. Wählen Sie im Dropdownmenü using System; aus, um diese Anweisung am Anfang der Datei hinzuzufügen und die Fehler zu beheben.

    Screenshot shows the Quick Actions options from its drop-down menu with a mouseover on using System.

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

  11. Wählen Sie oben auf der Website Privacy aus, um die Änderungen anzuzeigen.

    Screenshot showing the updated Privacy page that includes the changes you made.

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

Ändern der Seite „Home“

  1. Erweitern Sie im Projektmappen-Explorer den Ordner Pages, und wählen Sie Index.cshtml aus.

    Screenshot shows Index dot c s h t m l selected under the Pages node in the Solution Explorer.

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

     Screenshot shows the Home page for the web app in the browser window.

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

    Screenshot shows the Index dot c s h t m l file for the Home page in the Visual Studio code editor.

  2. Ersetzen Sie den Text Welcome durch Hello World! .

    Screenshot shows the Index dot c s h t m l file in the Visual Studio code editor with the Welcome text changed to Hello World!.

  3. Klicken Sie auf IIS Express oder drücken Sie STRG+F5, um die App auszuführen und im Webbrowser zu öffnen.

    Screenshot shows the IIS Express button highlighted in the toolbar for Visual Studio.

  4. Die neuen Änderungen an der Seite Home werden jetzt im Webbrowser angezeigt.

    Screenshot shows the Home page for the web app in the browser window. The updated text says Hello World!

  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 Projektmappen-Explorer aus, um den Inhalt anzuzeigen.

    Screenshot shows the MyCoreApp project selected and its content in the Solution Explorer in Visual Studio.

  2. Erweitern Sie den Ordner Seiten.

    Screenshot shows the contents of the Pages folder in the Solution Explorer.

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

    Screenshot shows the Index.cshtml file open in the Visual Studio code editor.

  4. Jede CSHTML-Datei verfügt über eine zugeordnete Codedatei. Erweitern Sie den Knoten Index.cshtml im Projektmappen-Explorer, und wählen Sie die Datei Index.cshtml.cs aus, um die Codedatei im Editor zu öffnen.

    Screenshot shows Index.cshtml file selected in the Solution Explorer in Visual Studio.

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

    Screenshot shows the Index.cshtml.cs file open in the Visual Studio code editor.

  6. Das Projekt enthält den Ordner wwwroot, der das Stammverzeichnis Ihrer Website ist. Erweitern Sie den Ordner, um den Inhalt anzuzeigen.

    Screenshot shows the w w w root folder selected in the Solution Explorer in Visual Studio.

    Sie können statische Websiteinhalte wie CSS, Bilder und JavaScript-Bibliotheken direkt in die gewünschten Pfade einfügen.

  7. Das Projekt enthält auch Konfigurationsdateien, die die Web-App zur Laufzeit verwalten. Die Standardkonfiguration der Anwendung befindet sich in der Datei appsettings.json. Sie können diese Einstellungen jedoch auch mit appsettings.Development.json überschreiben. Erweitern Sie die Datei appsettings.json, um die Datei appsettings.Development.json anzuzeigen.

    Screenshot shows appsettings.json selected and expanded, which exposes appsettings.Development.json, in the Solution Explorer in Visual Studio.

Ausführen, Debuggen und Vornehmen von Änderungen

  1. Klicken Sie in der Symbolleiste auf die Schaltfläche IIS Express, um die App im Debugmodus zu kompilieren und auszuführen. Alternativ können Sie F5 drücken oder in der Menüleiste Debuggen>Debuggen starten auswählen.

    Screenshot shows the I I S Express button highlighted in the toolbar in Visual Studio.

    Hinweis

    Wenn die Fehlermeldung Es kann keine Verbindung mit dem Webserver "IIS Express" hergestellt werden angezeigt wird, schließen Sie Visual Studio, und starten Sie das Programm als Administrator neu. Klicken Sie hierfür über das Startmenü mit der rechten Maustaste auf Visual Studio, und wählen Sie die Option Als Administrator ausführen aus dem Kontextmenü aus.

    Möglicherweise wird auch eine Meldung angezeigt, die Sie fragt, ob Sie ein IIS-SSL-Expresszertifikat akzeptieren möchten. Wählen Sie Ja aus, um den Code in einem Webbrowser anzuzeigen, und dann erneut Ja, wenn im Anschluss eine Sicherheitswarnung angezeigt wird.

  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. Im Browser wird auf der Seite Datenschutz der in der Datei Privacy.cshtml festgelegte Text gerendert.

    Screenshot shows the MyCoreApp Privacy page with the following text: Use this page to detail your site's privacy policy.

  4. Wechseln Sie zurück zu Visual Studio, und drücken Sie UMSCHALT+F5, um das Debuggen zu beenden. Durch diese Aktion wird auch das Projekt im Browserfenster geschlossen.

  5. Öffnen Sie in Visual Studio die Datei Privacy.cshtml, um sie zu 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"] .

    Screenshot shows the Privacy.cshtml file open in the Visual Studio code editor with the updated text.

  6. Nehmen Sie nun eine Codeänderung vor. Wählen Sie Privacy.cshtml.cs aus. Bereinigen Sie dann die using-Anweisungen oben in der Datei, indem Sie die folgende Verknüpfung 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 wird unterhalb der Einfügemarke oder am linken Rand angezeigt. Wählen Sie die Glühbirne und dann Remove unnecessary usings (Nicht benötigte using-Anweisungen entfernen) aus.

    Screenshot shows the Privacy.cshtml file in the Visual Studio code editor with the Quick Actions tooltip open and Preview changes highlighted.

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

    Screenshot shows the Preview Changes dialog box. The dialog box shows the directive being removed, and previews the code change after the removal.

    Wählen Sie Übernehmen. Visual Studio löscht die unnötigen using-Anweisungen aus der Datei.

  7. Erstellen Sie anschließend mithilfe der DateTime.ToString-Methode eine Zeichenfolge für das aktuelle Datum, die für Ihre Kultur oder Region formatiert ist.

    • 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 die 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 den folgenden Code:

public void OnGet()
{
   string dateTime = DateTime.Now.ToString("d", new CultureInfo("en-US"));
   ViewData["TimeStamp"] = dateTime;
}
  1. Sie sehen, dass CultureInfo wellenförmig unterstrichen ist. Die Wellenlinie gibt an, dass sich dieser Typ nicht im Geltungsbereich befindet.

    Screenshot shows an error mark, in the form of a wavy underline, for CultureInfo in the Visual Studio code editor.

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

    Screenshot shows the Error List toolbar in Visual Studio with CultureInfo listed, and is missing a using directive.

  2. Beheben Sie diesen Fehler nun. Bewegen Sie den Cursor im Code-Editor in die Zeile, die den Fehler enthält, und wählen Sie anschließend am linken Rand die Glühbirne für schnelle Aktionen aus. Wählen Sie im Dropdownmenü using System.Globalization; aus, um diese Anweisung am Anfang der Datei hinzuzufügen und die Fehler zu beheben.

    Screenshot shows the Quick Actions options from its drop-down menu with a mouseover on System.Globalization directive.

  3. Drücken Sie F5, um das Projekt im Webbrowser zu öffnen.

  4. Wählen Sie oben auf der Website Privacy aus, um die Änderungen anzuzeigen.

    Screenshot showing the Privacy page of the MyCoreApp that includes the changes made to add the date.

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

Ändern der Seite „Home“

  1. Erweitern Sie im Projektmappen-Explorer den Ordner Pages, und wählen Sie Index.cshtml aus.

    Screenshot shows Index.cshtml selected under the Pages node in the Solution Explorer.

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

    Screenshot shows the Home page for the web app in the browser window.

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

    Screenshot shows the Index.cshtml file for the Home page in the Visual Studio code editor.

  2. Ersetzen Sie den Text Welcome durch Hello World! .

    Screenshot shows the Index.cshtml file in the Visual Studio code editor with the 'Welcome' text changed to 'Hello World!'.

  3. Klicken Sie auf IIS Express oder drücken Sie STRG+F5, um die App auszuführen und im Webbrowser zu öffnen.

    Screenshot shows the IIS Express button highlighted in the toolbar for Visual Studio.

  4. Die neuen Änderungen an der Seite Home werden jetzt im Webbrowser angezeigt.

    Screenshot shows the Home page for the web app in the browser window. The updated text says 'Hello World!'

  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.

Nächste Schritte

Damit haben Sie das Tutorial erfolgreich abgeschlossen. Wir hoffen, dass Ihnen dieses Tutorial zu C#, ASP.NET Core und der Visual Studio-IDE gefallen hat. Weitere Informationen zum Erstellen einer Web-App oder Website mit C# und ASP.NET Core finden Sie im folgenden Tutorial:

Alternativ können Sie lernen, wie Sie Ihre Web-App mit Docker containerisieren:

Weitere Informationen

Veröffentlichen Ihrer Web-App in Azure App Service mit Visual Studio