Schnellstart: Verwenden von Visual Studio zum Erstellen Ihrer ersten ASP.NET Core-Web-App

In dieser 5-10-minütigen Einführung in die Bedienung von Visual Studio erstellen Sie eine einfache Hallo-Welt-Web-App unter Verwendung einer ASP.NET-Projektvorlage und der Programmiersprache C#.

Voraussetzungen

Installieren von Visual Studio

Wenn Sie Visual Studio noch nicht installiert haben, können Sie es auf der Seite Visual Studio-Downloads kostenlos herunterladen.

Wenn Sie Visual Studio noch nicht installiert haben, können Sie es auf der Seite Visual Studio-Downloads kostenlos herunterladen.

Auswählen eines Designs (optional)

Die Screenshots in diesem Schnellstarttutorial verwenden das dunkle Design. Wenn Sie das dunkle Design noch nicht verwenden, aber mehr darüber erfahren möchten, lesen Sie Vorgehensweise: Personalisieren von Visual Studio-IDE und Editor.

Erstellen eines Projekts

Zunächst müssen Sie ein Projekt für die ASP.NET Core-Webanwendung erstellen. Der Projekttyp enthält alle nötigen Vorlagendateien zum Erstellen einer Web-App, schon bevor Sie mit der Bearbeitung beginnen.

  1. Öffnen Sie Visual Studio 2017.

  2. Klicken Sie oben in der Menüleiste auf Datei > Neu > Projekt.

  3. Klappen Sie im linken Bereich des Dialogfelds Neues Projekt den Eintrag Visual C# auf, und wählen Sie .NET Core aus. Klicken Sie im mittleren Bereich auf ASP.NET Core-Web-App.

    Benennen Sie Ihre Datei anschließend mit HelloWorld und wählen Sie OK.

    Erstellen des neuen Projekts für die ASP.NET Core-Web-App für C#

    Hinweis

    Falls Sie die Projektvorlagenkategorie .NET Core nicht finden, klicken Sie im linken Bereich auf den Link Visual Studio-Installer öffnen. (Abhängig von Ihren Anzeigeeinstellungen müssen Sie zur Anzeige möglicherweise scrollen.)

    Den Visual Studio-Installer im Dialogfeld „Neues Projekt“ öffnen

    Der Visual Studio-Installer wird gestartet. Klicken Sie auf die Workload ASP.NET und Webentwicklung und anschließend auf Ändern.

    ASP.NET-Workload in VS-Installer

    (Möglicherweise müssen Sie Visual Studio schließen, bevor Sie die Installation des neuen Workloads fortsetzen können.)

  4. Klicken Sie im oberen Dropdownmenü des Dialogfelds Neue ASP.NET Core-Webanwendung auf ASP.NET Core 2.1. Wählen Sie dann Webanwendung und anschließend OK aus.

    Dialogfeld „Neue ASP.NET Core-Webanwendung“

    Hinweis

    Wenn ASP.NET Core 2.1 nicht angezeigt wird, stellen Sie sicher, dass Sie die aktuelle Version von Visual Studio ausführen. Weitere Informationen zum Aktualisieren Ihrer Installation finden Sie auf der Seite Aktualisieren von Visual Studio auf die aktuelle Version.

Im Anschluss wird Ihre Projektdatei in Visual Studio geöffnet.

  1. Wählen Sie im Startfenster Neues Projekt erstellen aus.

    Screenshot: Startfenster in Visual Studio mit hervorgehobener Option „Neues Projekt erstellen“.

  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: Fenster „Neues Projekt erstellen“, gefiltert nach „C#“, „Windows“ und „Web“. Die Projektvorlage „ASP.NET Core-Web-App“ ist hervorgehoben.

    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? den Link Weitere Tools und Features installieren aus.

    Screenshot: Meldung „Sie finden nicht, wonach Sie suchen?“ mit dem Link „Weitere Tools und Features installieren“.

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

    Screenshot: Workload „Plattformübergreifende .NET Core-Entwicklung“ im Visual Studio-Installer.

    Wählen Sie anschließend die Schaltfläche Ändern im Visual Studio-Installer aus. Speichern Sie Ihre Arbeit, wenn Sie dazu aufgefordert werden. Wählen Sie als Nächstes Weiter aus, um die Workload zu installieren. Kehren Sie dann zu Schritt 2 in dieser Vorgehensweise "Projekt erstellen" zurück.

  3. Geben Sie im Fenster Neues Projekt konfigurieren im Feld ProjektnameHalloWelt ein. Klicken Sie dann auf Weiter.

    Screenshot: Fenster „Neues Projekt konfigurieren“ mit der Eingabe „HelloWorld“ im Feld „Projektname“.

  4. Überprüfen Sie im Fenster Zusätzliche Informationen, ob im oberen Dropdownmenü .NET Core 3.1 angezeigt wird. Beachten Sie, dass Sie die Docker-Unterstützung aktivieren können, indem Sie das Kontrollkästchen aktivieren. Sie können außerdem Authentifizierungsunterstützung hinzufügen, indem Sie auf die Schaltfläche zum Ändern der Authentifizierung klicken. Dort können Sie unter folgenden Optionen wählen:

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

    Lassen Sie das Kontrollkästchen Docker aktivieren deaktiviert, und wählen Sie als Authentifizierungstyp Keine aus. Wählen Sie anschließend Erstellen.

    Screenshot: Fenster „Zusätzliche Informationen“ mit ausgewählter Option „.NET Core 3.1“ im Feld „Framework“.

    Visual Studio öffnet das neue Projekt.

  1. Wählen Sie im Startfenster Neues Projekt erstellen aus.

    Screenshot: Startfenster in Visual Studio mit hervorgehobener Option „Neues Projekt erstellen“.

  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: Fenster „Neues Projekt erstellen“, gefiltert nach „C#“, „Windows“ und „Web“. Die Projektvorlage „ASP.NET Core-Web-App“ ist hervorgehoben.

    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? den Link Weitere Tools und Features installieren aus.

    Screenshot: Meldung „Sie finden nicht, wonach Sie suchen?“ mit dem Link „Weitere Tools und Features installieren“.

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

    Screenshot: Workload „Plattformübergreifende .NET Core-Entwicklung“ im Visual Studio-Installer.

    Wählen Sie anschließend die Schaltfläche Ändern im Visual Studio-Installer aus. Speichern Sie Ihre Arbeit, wenn Sie dazu aufgefordert werden. Wählen Sie als Nächstes Weiter aus, um die Workload zu installieren. Kehren Sie dann zu Schritt 2 in dieser Vorgehensweise "Projekt erstellen" zurück.

  3. Geben Sie im Fenster Neues Projekt konfigurieren im Feld ProjektnameHalloWelt ein. Klicken Sie dann auf Weiter.

    Screenshot: Fenster „Neues Projekt konfigurieren“ mit der Eingabe „HelloWorld“ im Feld „Projektname“.

  4. Vergewissern Sie sich, dass im Fenster Zusätzliche Informationen im Feld Framework die Option .NET 6.0 angezeigt wird. Beachten Sie, dass Sie die Docker-Unterstützung aktivieren können, indem Sie das Kontrollkästchen aktivieren. Sie können auch Authentifizierungsunterstützung hinzufügen, indem Sie in der Dropdownliste Authentifizierungstyp einen Wert auswählen. Dort können Sie unter folgenden Optionen wählen:

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

    Lassen Sie das Kontrollkästchen Docker aktivieren deaktiviert, und wählen Sie als Authentifizierungstyp Keine aus. Wählen Sie anschließend Erstellen.

    Screenshot: Fenster „Zusätzliche Informationen“ mit ausgewählter Option „.NET 6.0“ im Feld „Framework“.

    Visual Studio öffnet das neue Projekt.

Erstellen und Ausführen der App

  1. Erweitern Sie im Projektmappen-Explorer den Ordner Seiten, und wählen Sie die About.cshtml.

    Screenshot: Anzeige der Dateien des HelloWorld-Projekts im Projektmappen-Explorer von Visual Studio. Der Ordner „Seiten“ ist erweitert, und die Datei „About.cshtml“ ist ausgewählt.

    Diese Datei entspricht der Seite mit der Bezeichnung Info in der Web-App, die im Webbrowser ausgeführt wird.

    Die Seite „Info“ in der Web-App

    Im Editor wird der HTML-Code für den Bereich „Weitere Informationen“ der Seite Info angezeigt.

    HTML-Code für den Bereich „Weitere Informationen“ im Visual Studio-Editor

  2. Ändern Sie den Text "„Weitere Informationen“ in „Hallo Welt!“.

    Ändern des standardmäßigen HTML-Codes für den Bereich „Weitere Informationen“ im Visual Studio-Editor

  3. Erweitern Sie im Projektmappen-Explorer den Ordner About.cshtml, und wählen Sie die About.cshtml.cs. (Diese Datei entspricht auch der Seite Info in einem Webbrowser.)

    Screenshot: Anzeige der Dateien des HelloWorld-Projekts im Projektmappen-Explorer von Visual Studio. „About.cshtml“ ist erweitert, und „About.cshtml.cs“ ist ausgewählt.

    Im Editor wird C#-Code mit Text für den Bereich „Anwendungsbeschreibung“ der Seite Info angezeigt.

    C#-Code für die Anwendung im Bereich „Anwendungsbeschreibung“ im Visual Studio-Editor

  4. Ändern Sie den Text „Anwendungsbeschreibung“ in „Wie lautet meine Nachricht?“.

    Ändern des Standardnachrichtentexts im Bereich „Anwendungsbeschreibung“ im Visual Studio-Editor

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

    Die Schaltfläche „IIS Express“ in Visual Studio

    Hinweis

    Wenn Sie die Fehlermeldung Verbindung mit Webserver „IIS Express“ nicht möglich erhalten oder eine Fehlermeldung angezeigt wird, in der ein SSL-Zertifikat erwähnt wird, schließen Sie Visual Studio. Öffnen Sie dann Visual Studio unter Verwendung der Option Als Administrator ausführen aus dem Kontextmenü. Führen Sie die Anwendung anschließend erneut aus.

  6. Überprüfen Sie im Webbrowser, ob auf der Seite Info Ihr aktualisierter Text angezeigt wird.

    Anzeigen der aktualisierten „Info“-Seite mit den gemachten Änderungen

  7. Schließen Sie den Webbrowser.

Überprüfen Ihrer Arbeit

Sehen Sie sich die folgende Animation an, um Ihre Arbeit zu überprüfen, die Sie im Rahmen des vorherigen Abschnitts verrichtet haben.

Animierte GIF-Datei, auf der gezeigt wird, wie eine einfache C#-ASP.NET Core-Web-App in Visual Studio erstellt und ausgeführt wird

Damit haben Sie den Schnellstart erfolgreich abgeschlossen. Wir hoffen, dass Sie etwas über C#, ASP.NET Core und die Visual Studio-IDE (Integrierte Entwicklungsumgebung) gelernt haben.

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

    Screenshot: „Index.cshtml“ im erweiterten Ordner „Seiten“ im Projektmappen-Explorer.

    Diese Datei entspricht der Seite mit der Bezeichnung Home in der Web-App, die im Webbrowser ausgeführt wird.

    Screenshot: Homepage für die Web-App im Browserfenster.

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

    Screenshot: Datei „Index.cshtml“ für die Homepage im Visual Studio-Code-Editor.

  2. Ändern Sie den Text „Welcome“ in „Hello World!“.

    Screenshot: Datei „Index.cshtml“ im Visual Studio-Code-Editor mit von „Welcome“ zu „Hello World!“ geändertem Text.

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

    Screenshot: Hervorgehobene Schaltfläche „IIS Express“ in Visual Studio.

    Hinweis

    Wenn Sie die Fehlermeldung Verbindung mit Webserver „IIS Express“ nicht möglich erhalten oder eine Fehlermeldung angezeigt wird, in der ein SSL-Zertifikat erwähnt wird, schließen Sie Visual Studio. Öffnen Sie dann Visual Studio unter Verwendung der Option Als Administrator ausführen aus dem Kontextmenü. Führen Sie die Anwendung anschließend erneut aus.

  4. Überprüfen Sie im Webbrowser, ob auf der Seite Home Ihr aktualisierter Text angezeigt wird.

    Screenshot: Homepage für die Web-App im Browserfenster mit aktualisierter Meldung „Hello World!“.

  5. Schließen Sie den Webbrowser.

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

    Screenshot: „Index.cshtml“ im erweiterten Ordner „Seiten“ im Projektmappen-Explorer.

    Diese Datei entspricht der Seite mit der Bezeichnung Home in der Web-App, die im Webbrowser ausgeführt wird.

    Screenshot: Homepage für die Web-App im Browserfenster.

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

    Screenshot: Datei „Index.cshtml“ für die Homepage im Visual Studio-Code-Editor.

  2. Ändern Sie den Text „Welcome“ in „Hello World!“.

    Screenshot: Datei „Index.cshtml“ im Visual Studio-Code-Editor mit von „Welcome“ zu „Hello World!“ geändertem Text.

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

    Screenshot: Hervorgehobene Schaltfläche „IIS Express“ in Visual Studio.

    Hinweis

    Wenn Sie die Fehlermeldung Verbindung mit Webserver „IIS Express“ nicht möglich erhalten oder eine Fehlermeldung angezeigt wird, in der ein SSL-Zertifikat erwähnt wird, schließen Sie Visual Studio. Öffnen Sie dann Visual Studio unter Verwendung der Option Als Administrator ausführen aus dem Kontextmenü. Führen Sie die Anwendung anschließend erneut aus.

  4. Überprüfen Sie im Webbrowser, ob auf der Seite Home Ihr aktualisierter Text angezeigt wird.

    Screenshot: Homepage für die Web-App im Browserfenster mit aktualisierter Meldung „Hello World!“.

  5. Schließen Sie den Webbrowser.

Nächste Schritte

Weitere Informationen zum Erstellen von ASP.NET-Web-Apps 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