Erste Schritte mit ASP.NET Core

In diesem Lernprogramm wird gezeigt, wie Sie mithilfe der .NET CLI eine ASP.NET Core Blazor Web App erstellen, ausführen und ändern. Blazor ist ein .NET-Frontend-Webframework, das sowohl serverseitiges Rendering als auch Clientinteraktivität in einem einzigen Programmiermodell unterstützt.

Hier erfahren Sie, wie Sie:

• Erstellen Sie eine Blazor Web App.
• Führen Sie die App aus.
• Ändern Sie die App.
• Beenden Sie die App.

Prerequisites

Installieren Sie das neueste .NET SDK von Download .NET.

Erstellen der Datei Blazor Web App

Öffnen Sie eine Befehlsshell an einem geeigneten Speicherort für die Beispiel-App und verwenden Sie den folgenden Befehl, um eine Blazor Web App zu erstellen. Die -o|--output Option erstellt einen Ordner für das Projekt und benennt das Projekt BlazorSample:

dotnet new blazor -o BlazorSample

App starten

Ändern Sie das Verzeichnis in den BlazorSample Ordner mit dem folgenden Befehl:

cd BlazorSample

Der dotnet watch Befehl führt die App aus und öffnet Ihren Standardbrowser auf der Startseite der App:

dotnet watch

Besuchen Sie mithilfe der Randleistennavigation der App die Zählerseite, auf der Sie die Click me Schaltfläche auswählen können, um den Zähler zu erhöhen.

Ändern der App

Lassen Sie den Browser geöffnet, wobei die Counter-Seite geladen ist. Mithilfe des dotnet watch Befehls zum Ausführen der App können Sie Änderungen am Markup und Code der App vornehmen, ohne die App neu erstellen zu müssen, um die Änderungen im Browser widerzuspiegeln.

Die Komponente CounterRazor, die die Counter-Webseite rendert, befindet sich im Projekt in Components/Pages/Counter.razor. Razor ist eine Syntax, mit der HTML-Markup mit C#-Code kombiniert werden kann, ausgerichtet auf die Produktivität der Entwickler.

Öffnen Sie die Counter.razor Datei in einem Text-Editor, und notieren Sie sich einige interessante Zeilen, mit denen Inhalte gerendert werden, und sorgen Sie dafür, dass die Zählerfunktion der Komponente funktioniert.

Components/Pages/Counter.razor:

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Die Datei beginnt mit einer Zeile, die den relativen Pfad der Komponente angibt (/counter):

@page "/counter"

Der Titel der Seite wird durch <PageTitle> Tags festgelegt:

<PageTitle>Counter</PageTitle>

Es wird eine H1-Überschrift angezeigt:

<h1>Counter</h1>

Ein Absatzelement (<p>) zeigt die aktuelle Anzahl an, die in einer Variablen mit dem Namen currentCountgespeichert ist:

<p role="status">Current count: @currentCount</p>

Mit einer Schaltfläche (<button>) kann der Benutzer den Zähler inkrementieren, was geschieht, wenn ein Schaltflächenklick eine C#-Methode mit dem Namen IncrementCount ausführt.

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

Der @code Block enthält C#-Code, den die Komponente ausführt:

• Die Zählervariable currentCount wird mit einem Anfangswert von Null festgelegt.
• Die IncrementCount Methode ist definiert. Der Code innerhalb der Methode erhöht die currentCount Variable jedes Mal, wenn die Methode aufgerufen wird.

private int currentCount = 0;

private void IncrementCount()
{
    currentCount++;
}

Ändern wir die Inkrementierung des Zählers in der IncrementCount-Methode.

Ändern Sie die Zeile so, dass currentCount jedes Mal, wenn IncrementCount aufgerufen wird, um einen Wert von zehn erhöht wird.

- currentCount++;
+ currentCount += 10;

Speichern Sie die Datei.

Sobald Sie die Datei speichern, wird die ausgeführte App automatisch aktualisiert, da Sie den dotnet watch Befehl verwendet haben. Wechseln Sie zurück zur App im Browser, und wählen Sie die Click me Schaltfläche auf der Zählerseite aus. Zeuge, wie der Zähler jetzt von seinem vorhandenen Wert von 1 auf einen Wert von elf erhöht. Jedes Mal, wenn die Schaltfläche ausgewählt wird, erhöht sich der Wert um zehn.

Schließen Sie die App

Folgen Sie diesen Schritten:

• Schließen Sie das Browserfenster.
• Um die App herunterzufahren, drücken Sie STRG+C in der Befehlsshell.

Congratulations! Sie haben dieses Lernprogramm erfolgreich abgeschlossen.

Nächste Schritte

In diesem Tutorial haben Sie Folgendes gelernt:

• Erstellen Sie eine Blazor Web App.
• Führen Sie die App aus.
• Ändern Sie die App.
• Beenden Sie die App.

Weitere Informationen zu den Grundlagen von ASP.NET Core finden Sie in den folgenden Themen:

Übersicht über ASP.NET Core-Grundlagen

Weitere Anleitungen

App-Typ	Scenario	Anleitungen
Web-App	Neue Server- und Clientwebentwicklung mit Blazor	Erstellen einer Blazor Todo-Listen-App und Erstellen einer Blazor Filmdatenbank-App (Übersicht)
Web-API	Serverbasierte Datenverarbeitung mit minimalen APIs	Lernprogramm: Erstellen einer minimalen API mit ASP.NET Core
Remoteprozeduraufruf-App (RPC)	Vertragsorientierte Dienste mit Protokollpuffern	Erstellen eines .NET gRPC-Clients und -Servers in ASP.NET Core
Echtzeit-App	Bidirektionale Server-/Clientkommunikation	Erste Schritte mit ASP.NET Core SignalR

Weitere Ressourcen

• Einführung in .NET
• Visual Studio
• Visual Studio Code
• .NET Developer Community
• .NET Live TV