Schnellstart: Verwenden von Visual Studio zum Erstellen Ihrer ersten ASP.NET Core-Web-AppQuickstart: Use Visual Studio to create your first 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#.In this 5-10 minute introduction to how to use Visual Studio, you'll create a simple "Hello World" web app by using an ASP.NET project template and the C# programming language.

VorbereitungenBefore you begin

Installieren von Visual StudioInstall Visual Studio

Wenn Sie Visual Studio noch nicht installiert haben, können Sie es auf der Seite Visual Studio-Downloads kostenlos herunterladen.If you haven't already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

Wenn Sie Visual Studio noch nicht installiert haben, können Sie es auf der Seite Visual Studio-Downloads kostenlos herunterladen.If you haven't already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

Auswählen eines Designs (optional)Choose your theme (optional)

Die Screenshots in diesem Schnellstarttutorial verwenden das dunkle Design.This quickstart tutorial includes screenshots that use the dark theme. Wenn Sie ebenfalls das dunkle Design verwenden möchten, finden Sie auf der Seite Personalisieren der Visual Studio-IDE und des Editors entsprechende Anweisungen.If you aren't using the dark theme but would like to, see the Personalize the Visual Studio IDE and Editor page to learn how.

Erstellen eines ProjektsCreate a project

Zunächst müssen Sie ein Projekt für die ASP.NET Core-Webanwendung erstellen.To start, you'll create an ASP.NET Core web application project. Der Projekttyp enthält alle nötigen Vorlagendateien zum Erstellen einer Web-App, schon bevor Sie mit der Bearbeitung beginnen.The project type comes with all template files to create a web app, before you've even added anything!

  1. Öffnen Sie Visual Studio 2017.Open Visual Studio 2017.

  2. Klicken Sie oben in der Menüleiste auf Datei > Neu > Projekt.From the top menu bar, choose File > New > Project.

  3. Klappen Sie im linken Bereich des Dialogfelds Neues Projekt den Eintrag Visual C# auf, und wählen Sie .NET Core aus.In the left pane of the New Project dialog box, expand Visual C#, and then choose .NET Core. Klicken Sie im mittleren Bereich auf ASP.NET Core-Web-App.In the middle pane, choose ASP.NET Core Web Application.

    Benennen Sie Ihre Datei anschließend mit HelloWorld und wählen Sie OK.Then, name your file HelloWorld and choose OK.

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

    Note

    Falls Sie die Projektvorlagenkategorie .NET Core nicht finden, klicken Sie im linken Bereich auf den Link Visual Studio-Installer öffnen.If you don't see the .NET Core project template category, choose the Open Visual Studio Installer link in the left pane. (Abhängig von Ihren Anzeigeeinstellungen müssen Sie zur Anzeige möglicherweise scrollen.)(Depending on your display settings, you might have to scroll to see it.)

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

    Der Visual Studio-Installer wird gestartet.The Visual Studio Installer launches. Klicken Sie auf die Workload ASP.NET und Webentwicklung und anschließend auf Ändern.Choose the ASP.NET and web development workload, and then choose Modify.

    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.)(You might have to close Visual Studio before you can continue installing the new workload.)

  4. Klicken Sie im oberen Dropdownmenü des Dialogfelds Neue ASP.NET Core-Webanwendung auf ASP.NET Core 2.1.In the New ASP.NET Core Web Application dialog box, select ASP.NET Core 2.1 from the top drop-down menu. Wählen Sie dann Webanwendung und anschließend OK aus.Next, choose Web Application, and then choose OK.

    Dialogfeld „Neue ASP.NET Core-Webanwendung“

    Note

    Wenn ASP.NET Core 2.1 (oder höher) nicht angezeigt wird, stellen Sie sicher, dass Sie die aktuelle Version von Visual Studio ausführen.If you don't see ASP.NET Core 2.1 or later, make sure that you are running the most recent release of Visual Studio. Weitere Informationen zum Aktualisieren Ihrer Installation finden Sie auf der Seite Aktualisieren von Visual Studio auf die aktuelle Version.For more information about how to update your installation, see the Update Visual Studio to the most recent release page.

Im Anschluss wird Ihre Projektdatei in Visual Studio geöffnet.Soon after, Visual Studio opens your project file.

  1. Öffnen Sie Visual Studio.Open Visual Studio.

  2. Wählen Sie im Startfenster Neues Projekt erstellen aus.On the start window, choose Create a new project.

    Fenster „Neues Projekt erstellen“ anzeigen

  3. Geben Sie im Fenster Neues Projekt erstellen im Suchfeld ASP.NET ein.On the Create a new project window, enter or type ASP.NET in the search box. Wählen Sie anschließend in der Liste der Sprachen C# und dann aus der Liste der Plattformen Windows aus.Next, choose C# from the Language list, and then choose Windows from the Platform list.

    Nachdem Sie die Sprach- und Plattformfilter angewendet haben, wählen Sie die Vorlage ASP.NET Core-Webanwendung und dann Weiter aus.After you apply the language and platform filters, choose the ASP.NET Core Web Application template, and then choose Next.

    Wählen Sie die C#-Vorlage für die ASP.NET Core-Webanwendung aus

    Note

    Wenn Sie die Vorlage ASP.NET Core-Webanwendung nicht sehen, können Sie sie über das Fenster Neues Projekt erstellen installieren.If you do not see the ASP.NET Core Web Application template, you can install it from the Create a new project window. Wählen Sie in der Meldung Sie finden nicht, wonach Sie suchen? den Link Weitere Tools und Features installieren aus.In the Not finding what you're looking for? message, choose the Install more tools and features link.

    Link „Weitere Tools und Features installieren“ aus der Meldung „Sie finden nicht, wonach Sie suchen“ im Fenster „Neues Projekt erstellen“

    Wählen Sie anschließend im Visual Studio-Installer die Workload ASP.NET- und Webentwicklung aus.Then, in the Visual Studio Installer, choose the ASP.NET and web development workload.

    Workload „ASP.NET Core-Webanwendung“ im Visual Studio-Installer

    Wählen Sie anschließend die Schaltfläche Ändern im Visual Studio-Installer aus.After that, choose the Modify button in the Visual Studio Installer. Möglicherweise werden Sie aufgefordert, Ihre Arbeit zu speichern; wenn dies der Fall ist, führen Sie das aus.You might be prompted to save your work; if so, do so. Wählen Sie als Nächstes Weiter aus, um die Workload zu installieren.Next, choose Continue to install the workload. Kehren Sie dann zu Schritt 2 in dieser Vorgehensweise "Projekt erstellen" zurück.Then, return to step 2 in this "Create a project" procedure.

  4. Geben Sie im Fenster Neues Projekt konfigurieren im Feld Projektname HalloWelt ein.In the Configure your new project window, type or enter HelloWorld in the Project name box. Wählen Sie anschließend Erstellen aus.Then, choose Create.

    Benennen Sie Ihr Projekt im Fenster „Neues Projekt konfigurieren“ „HalloWelt“

  5. Überprüfen Sie im Fenster Neue ASP.NET Core-Webanwendung erstellen, ob ASP.NET Core 2.1 oder höher im oberen Dropdownmenü angezeigt wird.In the Create a new ASP.NET Core Web Application window, verify that ASP.NET Core 2.1 or later appears in the top drop-down menu. Wählen Sie dann Webanwendung aus; diese Option beinhaltet Razor Pages-Beispielseiten.Then, choose Web Application, which includes example Razor Pages. Wählen Sie als Nächstes Erstellen aus.Next, choose Create.

    Fenster „Neue ASP.NET Core-Webanwendung erstellen“

    Visual Studio öffnet Ihr neues Projekt.Visual Studio opens your new project.

Erstellen und Ausführen der AppCreate and run the app

  1. Erweitern Sie im Projektmappen-Explorer den Ordner Seiten, und wählen Sie die About.cshtml.In the Solution Explorer, expand the Pages folder, and then choose About.cshtml.

    Auswählen der About-cshtml-Datei im Projektmappen-Explorer

    Diese Datei entspricht der Seite mit der Bezeichnung Info in der Web-App, die im Webbrowser ausgeführt wird.This file corresponds to a page that's named About in the web app, which runs in a web browser.

    Die Seite „Info“ in der Web-App

    Im Editor wird der HTML-Code für den Bereich „Weitere Informationen“ der Seite Info angezeigt.In the editor, you'll see HTML code for the "additional information" area of the About page.

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

  2. Ändern Sie den Text "„Weitere Informationen“ in „Hallo Welt!“.Change the "additional information" text to read "Hello World!".

    Ä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.In the Solution Explorer, expand About.cshtml, and then choose About.cshtml.cs. (Diese Datei entspricht auch der Seite Info in einem Webbrowser.)(This file also corresponds with the About page in a web browser.)

    Auswählen der About-cshtml-Datei im Projektmappen-Explorer

    Im Editor wird C#-Code mit Text für den Bereich „Anwendungsbeschreibung“ der Seite Info angezeigt.In the editor, you'll see C# code that includes text for the "application description" area of the About page.

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

  4. Ändern Sie den Text „Anwendungsbeschreibung“ in „Wie lautet meine Nachricht?“.Change the "application description" message text to read "What's my message?".

    Ä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.Choose IIS Express or press Ctrl+F5 to run the app and open it in a web browser.

    Die Schaltfläche „IIS Express“ in Visual Studio

    Note

    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.If you get an error message that says, Unable to connect to web server 'IIS Express', or an error message that mentions an SSL certificate, close Visual Studio. Öffnen Sie dann Visual Studio unter Verwendung der Option Als Administrator ausführen aus dem Kontextmenü.Next, open Visual Studio by using the Run as administrator option from the right-click context menu. Führen Sie die Anwendung anschließend erneut aus.Then, run the application again.

  6. Überprüfen Sie im Webbrowser, ob auf der Seite Info Ihr aktualisierter Text angezeigt wird.In the web browser, verify that the About page includes your updated text.

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

  7. Schließen Sie den Webbrowser.Close the web browser.

Überprüfen Ihrer ArbeitReview your work

Sehen Sie sich die folgende Animation an, um Ihre Arbeit zu überprüfen, die Sie im Rahmen des vorherigen Abschnitts verrichtet haben.View the following animation to check the work that you completed in the previous section.

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.Congratulations on completing this Quickstart! Wir hoffen, dass Sie etwas über C#, ASP.NET Core und die Visual Studio-IDE (Integrierte Entwicklungsumgebung) gelernt haben.We hope you learned a little bit about C#, ASP.NET Core, and the Visual Studio IDE (integrated development environment).

Nächste SchritteNext steps

Fahren Sie für weitere Informationen mit dem folgenden Tutorial fort:To learn more, continue with the following tutorial:

Siehe auchSee also

Veröffentlichen einer Web-App in Azure App Service mit Visual StudioPublish your web app to Azure App Service by using Visual Studio