Kom igång med ASP.NET Core

Den här handledningen visar hur du skapar, kör och ändrar en ASP.NET Core Blazor Web App med hjälp av .NET CLI. Blazor är ett .NET-klientdelswebbramverk som stöder både återgivning på serversidan och klientinteraktivitet i en enda programmeringsmodell.

Du får lära dig att:

• Skapa en Blazor Web App.
• Kör appen.
• Ändra appen.
• Stäng appen.

Prerequisites

Hämta och installera den senaste .NET SDK:en på Ladda ned .NET.

Skapa en Blazor Web App

Öppna ett kommandogränssnitt till en lämplig plats för exempelappen och använd följande kommando för att skapa en Blazor Web App. Alternativet -o|--output skapar en mapp för projektet och ger projektet BlazorSamplenamnet :

dotnet new blazor -o BlazorSample

Kör appen

Ändra katalogen till BlazorSample mappen med följande kommando:

cd BlazorSample

Kommandot dotnet watch kör appen och öppnar standardwebbläsaren på appens landningssida:

dotnet watch

Med hjälp av appens sidofältsnavigering går du till sidan Räknar, där du kan välja Click me knappen för att öka räknaren.

Ändra appen

Låt webbläsaren vara öppen med sidan Räknare inläst. Genom att använda dotnet watch kommandot för att köra appen kan du göra ändringar i appens markering och kod utan att behöva återskapa appen för att återspegla ändringarna i webbläsaren.

Komponenten CounterRazor som renderar counter-webbsidan finns i Components/Pages/Counter.razor projektet. Razor är en syntax för att kombinera HTML-kod med C#-kod som är utformad för utvecklares produktivitet.

Counter.razor Öppna filen i en textredigerare och notera några intressanta rader som renderar innehåll och få komponentens räknarfunktion att fungera.

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++;
    }
}

Filen börjar med en rad som anger komponentens relativa sökväg (/counter):

@page "/counter"

Sidans rubrik anges med <PageTitle> taggar:

<PageTitle>Counter</PageTitle>

En H1-rubrik visas:

<h1>Counter</h1>

Ett styckeelement (<p>) visar det aktuella antalet, som lagras i en variabel med namnet currentCount:

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

Med en knapp (<button>) kan användaren öka räknaren, vilket inträffar när en knappklick kör en C#-metod med namnet IncrementCount:

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

Blocket @code innehåller C#-kod som komponenten kör:

• Räknarvariabeln currentCount upprättas med ett initialt värde på noll.
• Metoden IncrementCount definieras. Koden i metoden ökar variabeln currentCount med en varje gång metoden anropas.

private int currentCount = 0;

private void IncrementCount()
{
    currentCount++;
}

Låt oss ändra inkrementet på räknaren i metoden IncrementCount.

Ändra raden så att currentCount ökas med ett värde på tio varje gång IncrementCount anropas.

- currentCount++;
+ currentCount += 10;

Spara filen.

Så snart du sparar filen uppdateras appen som körs automatiskt eftersom du använde dotnet watch kommandot . Gå tillbaka till appen i webbläsaren och välj knappen Click me på sidan "Räknare." Se hur räknaren nu ökar från det befintliga värdet ett till ett värde på elva. Varje gång knappen väljs ökar värdet med tio.

Stäng av appen

Följ dessa steg:

• Stäng webbläsarfönstret.
• Om du vill stänga av appen trycker du på Ctrl+C i kommandogränssnittet.

Congratulations! Du har framgångsrikt slutfört denna handledning.

Nästa steg

I den här handledningen lärde du dig att:

• Skapa en Blazor Web App.
• Kör appen.
• Ändra appen.
• Stäng appen.

Mer information om grunderna i ASP.NET Core finns i följande:

översikt över grunderna i ASP.NET Core

Ytterligare guider

Apptyp	Scenario	Tutorials
Webbapp	Ny server- och klientwebbutveckling med Blazor	Skapa en Blazor att göra-listapp och skapa en Blazor filmdatabasapp (översikt)
Webb-API	Serverbaserad databehandling med minimala API:er	Självstudie: Skapa ett minimalt API med ASP.NET Core
App för fjärrproceduranrop (RPC)	Kontrakt först-tjänster med protokollbuffertar	Skapa en .NET gRPC-klient och -server i ASP.NET Core
Realtidsapp	Dubbelriktad kommunikation mellan server och klient	Kom igång med ASP.NET Core SignalR

Ytterligare resurser

• Introduktion till .NET
• Visual Studio
• Visual Studio Code
• .NET Developer Community
• .NET Live TV