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.

Bevor Sie beginnenBefore 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.

Aktualisieren von Visual Studio 2017Update Visual Studio

Wenn Sie Visual Studio bereits installiert haben, stellen Sie sicher, dass Sie die aktuelle Version verwenden.If you've already installed Visual Studio, make sure that you are running the most recent release. Weitere Informationen zum Aktualisieren Ihrer Installation finden Sie auf der Seite Aktualisieren von Visual Studio 2017 auf die aktuelle Version.For more information about how to update your installation, see the Update Visual Studio 2017 to the most recent release page.

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 in der Menüleiste im oberen Bereich 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.0 (oder höher).In the New ASP.NET Core Web Application dialog box, select ASP.NET Core 2.0 or later from the top drop-down menu.

    Note

    Wenn ASP.NET Core 2.0 (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.0 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 2017 auf die aktuelle Version.For more information about how to update your installation, see the Update Visual Studio 2017 to the most recent release page.

  5. Wählen Sie dann Webanwendung und anschließend OK aus.Next, choose Web Application, and then choose OK.

    Dialogfeld „Neue ASP.NET Core-Webanwendung“

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

Erstellen der AppCreate 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 Webanwendung.This file corresponds to a page that's named About in the web app.

    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 Ihrer Web-App.)(This file also corresponds with the About page in your web app.)

    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

Ausführen der AppRun the app

  1. Drücken Sie STRG+F5, um die App auszuführen und sie im Webbrowser zu öffnen.Press Ctrl+F5 to run the app and open it in a web browser.

    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 or context menu. Führen Sie die Anwendung anschließend erneut aus.Then, run the application again.

  2. Wählen Sie im oberen Bereich der Webseite Info aus.At the top of the web page, choose About.

    Auswählen von „Info“ auf der Webseite

  3. Schauen Sie sich den aktualisierten Text an, den Sie auf der Seite Info hinzugefügt haben.View the updated text that you added to the About page.

    Anzeigen der aktualisierten „Info“-Seite mit dem hinzugefügten Text

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

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 Ihrer Web-App in Azure App Service mit Visual StudioPublish your web app to Azure App Service by using Visual Studio