Kom igång med ASP.NET Core

Den här självstudien 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:

Prerequisites

Obtain and install the latest .NET SDK at Download .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äknar 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++;
}

Nu ska vi ändra ökning av räknaren IncrementCount i -metoden.

Ändra raden så att currentCount den ö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 Click me knappen 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.
• To shut down the app, press Ctrl+C in the command shell.

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

Next steps

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

Den här självstudien visar hur du skapar och kör en ASP.NET Core-webbapp med hjälp av .NET CLI.

För Blazor handledningar, se ASP.NET Core Blazor-handledningar.

Du får lära dig att:

Prerequisites

Obtain and install the latest .NET SDK at Download .NET.

Skapa Razor sidapp

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

dotnet new webapp -o RazorPagesSample

Kör appen

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

cd RazorPagesSample

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

dotnet watch

Ändra appen

Öppna Pages/Index.cshtml-filen i en textredigerare.

Efter raden med hälsningen "Welcome" lägger du till följande rad för att visa det lokala systemets datum och tid:

<p>The time on the server is @DateTime.Now</p>

Spara ändringarna.

Så snart du sparar filen uppdateras appen som körs automatiskt eftersom du använde dotnet watch kommandot .

Uppdatera sidan i webbläsaren för att se resultatet:

Stäng av appen

Så här stänger du av appen:

• Stäng webbläsarfönstret.
• Press Ctrl+C in the command shell.

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

Next steps

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