Začínáme s ASP.NET Core

V tomto kurzu se dozvíte, jak vytvořit, spustit a upravit ASP.NET Core Blazor Web App pomocí rozhraní příkazového řádku .NET. Blazor je front-endová webová architektura .NET, která podporuje vykreslování na straně serveru i interaktivitu klienta v jednom programovacím modelu.

Naučíte se:

• Vytvoření souboru Blazor Web App.
• Spustit aplikaci.
• Změňte aplikaci.
• Ukončete aplikaci.

Prerequisites

Získejte a nainstalujte nejnovější sadu .NET SDK na webu Download .NET.

Vytvořte soubor Blazor Web App

Otevřete příkazové prostředí do vhodného umístění pro ukázkovou aplikaci a pomocí následujícího příkazu vytvořte Blazor Web App. Tato -o|--output možnost vytvoří složku pro projekt a pojmenuje projekt BlazorSample:

dotnet new blazor -o BlazorSample

Spuštění aplikace

Pomocí následujícího příkazu změňte adresář na BlazorSample složku:

cd BlazorSample

Příkaz dotnet watch spustí aplikaci a otevře výchozí prohlížeč na cílové stránce aplikace:

dotnet watch

Pomocí navigace na bočním panelu aplikace přejděte na stránku Čítač, kde můžete stisknout tlačítko Click me pro zvýšení čítače.

Stránka čítače se vykreslí poté, co je jednou stisknuto tlačítko "Click me", a ukazuje čítač zvýšený na hodnotu jedna.

Změna aplikace

Nechte prohlížeč otevřený se stránkou Čítač načtená. Pomocí dotnet watch příkazu ke spuštění aplikace můžete provádět změny kódu a kódu aplikace, aniž byste museli aplikaci znovu sestavit, aby odrážela změny v prohlížeči.

Komponenta CounterRazor , která vykreslí webovou stránku Counter, se nachází v Components/Pages/Counter.razor projektu. Razor je syntaxe pro kombinování jazyka značek HTML s kódem jazyka C#, která zvyšuje produktivitu vývojářů.

Counter.razor Otevřete soubor v textovém editoru a poznamenejte si několik zajímavých řádků, které vykreslují obsah a usnadňují fungování funkce čítače komponenty.

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

Soubor začíná řádkem, který označuje relativní cestu komponenty (/counter):

@page "/counter"

Název stránky je nastavený značkami <PageTitle> :

<PageTitle>Counter</PageTitle>

Zobrazí se nadpis H1:

<h1>Counter</h1>

Prvek odstavce (<p>) zobrazí aktuální počet, který je uložen v proměnné s názvem currentCount:

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

Tlačítko (<button>) umožňuje uživateli zvýšit čítač, ke kterému dojde, když kliknutí na tlačítko spustí metodu jazyka C#s názvem IncrementCount:

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

Blok @code obsahuje kód jazyka C#, který komponenta spouští:

• Proměnná čítače currentCount je vytvořena s počáteční hodnotou nuly.
• Metoda IncrementCount je definována. Kód v rámci metody zvýší currentCount proměnnou o jeden při každém vyvolání metody.

private int currentCount = 0;

private void IncrementCount()
{
    currentCount++;
}

Pojďme změnit přírůstek počítadla v IncrementCount metodě.

Změňte řádek tak, aby se currentCount při každém zavolání IncrementCount zvýšil o hodnotu deset.

- currentCount++;
+ currentCount += 10;

Uložte soubor.

Jakmile soubor uložíte, spuštěná aplikace se aktualizuje automaticky, protože jste použili dotnet watch příkaz. Vraťte se do aplikace v prohlížeči a klepněte na tlačítko Click me na stránce Čítače. Zjistěte, jak se teď čítač zvýší z jeho stávající hodnoty o jednu hodnotu na hodnotu jedenácti. Pokaždé, když je tlačítko vybráno, hodnota se zvýší o deset.

Vypnutí aplikace

Postupujte takto:

• Zavřete okno prohlížeče.
• Aplikaci vypnete stisknutím kláves Ctrl+C v příkazovém prostředí.

Congratulations! Úspěšně jste dokončili tento kurz.

Další kroky

V tomto kurzu jste se naučili:

• Vytvoření souboru Blazor Web App.
• Spustit aplikaci.
• Změňte aplikaci.
• Ukončete aplikaci.

Další informace o základech ASP.NET Core najdete v následujících tématech:

Přehled základních principů ASP.NET

Další kurzy

Typ aplikace	Scenario	Tutorials
Webová aplikace	Vývoj nového serveru a klientského webu s využitím Blazor	Blazor Vytvoření aplikace seznamu úkolů a vytvoření Blazor aplikace pro databázi filmů (přehled)
Webové rozhraní API	Zpracování dat na serveru s minimálními rozhraními API	Kurz: Vytvoření minimálního rozhraní API pomocí ASP.NET Core
Aplikace pro vzdálené volání procedur (RPC)	Služby založené na smlouvách využívající Protocol Buffers	Vytvoření klienta a serveru .NET gRPC v ASP.NET Core
Aplikace v reálném čase	Obousměrná komunikace mezi serverem a klientem	Začínáme s ASP.NET Core SignalR

Dodatečné zdroje

• Úvod do .NET
• Visual Studio
• Visual Studio Code
• Komunita vývojářů .NET
• .NET Live TV