A ASP.NET Core használatának első lépései

Ez az oktatóanyag bemutatja, hogyan hozhat létre, futtathat és módosíthat egy ASP.NET Core-t Blazor Web App a .NET CLI használatával. Blazor .NET előtérbeli webes keretrendszer, amely támogatja a kiszolgálóoldali renderelést és az ügyfél interaktivitását egyetlen programozási modellben.

Megtudhatja, hogyan:

• Hozz létre egy Blazor Web App.
• Nyisd meg az alkalmazást.
• Módosítsa az alkalmazást.
• Állítsa le az alkalmazást.

Prerequisites

Szerezze be és telepítse a legújabb .NET SDK-t a Download .NET webhelyen.

Hozz létre egy Blazor Web App-t

Nyisson meg egy parancshéjat a mintaalkalmazás megfelelő helyére, és az alábbi paranccsal hozzon létre egy parancsot Blazor Web App. A -o|--output beállítás létrehoz egy mappát a projekthez, és a projekt BlazorSampleneve:

dotnet new blazor -o BlazorSample

Az alkalmazás futtatása

Módosítsa a könyvtárat a BlazorSample mappára a következő paranccsal:

cd BlazorSample

A dotnet watch parancs futtatja az alkalmazást, és megnyitja az alapértelmezett böngészőt az alkalmazás kezdőlapján:

dotnet watch

Az alkalmazás oldalsávjának navigációs sávjával keresse fel a Számláló lapot, ahol a számláló növeléséhez kattintson a Click me gombra.

Az alkalmazás módosítása

Hagyja nyitva a böngészőt, amin a Számláló oldal már betöltve van. Az alkalmazás futtatásához a dotnet watch parancs használatával anélkül módosíthatja az alkalmazás korrektúrát és kódot, hogy újra kellene építenie az alkalmazást a böngésző változásainak megfelelően.

A projektben a CounterRazor Számláló weboldalt megjelenítő összetevő a Components/Pages/Counter.razor található. Razor a HTML-korrektúra és a fejlesztői hatékonyság érdekében tervezett C#-kód kombinálására szolgáló szintaxis.

Nyissa meg a Counter.razor fájlt egy szövegszerkesztőben, és jegyezze fel néhány érdekes sort, amelyek tartalmat renderelnek, és az összetevő számláló funkcióját működőképessé teszik.

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

A fájl egy olyan sorral kezdődik, amely az összetevő relatív elérési útját jelzi (/counter):

@page "/counter"

A lap címe címkék szerint <PageTitle> van beállítva:

<PageTitle>Counter</PageTitle>

Megjelenik egy H1 fejléc:

<h1>Counter</h1>

A bekezdéselemek (<p>) az aktuális számot jelenítik meg, amelyet egy következő nevű currentCountváltozó tárol:

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

A gomb (<button>) lehetővé teszi a felhasználó számára a számláló növelését, ami akkor fordul elő, ha egy gombkattintás végrehajt egy C# metódust:IncrementCount

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

A @code blokk az összetevő által végrehajtott C#-kódot tartalmazza:

• A számlálóváltozó currentCount nulla kezdeti értékkel van létrehozva.
• A IncrementCount metódus definiálva. A metóduson belüli kód minden alkalommal egy-egy lépéssel növeli a currentCount változót a metódus meghívásakor.

private int currentCount = 0;

private void IncrementCount()
{
    currentCount++;
}

Változtassuk meg a számláló növekményét a IncrementCount metódusban.

Módosítsa a sort úgy, hogy a currentCount minden alkalommal tíz értékkel növekedjen, amikor a IncrementCount hívásra kerül.

- currentCount++;
+ currentCount += 10;

Mentse a fájlt.

A fájl mentése után a futó alkalmazás automatikusan frissül, mert a parancsot dotnet watch használta. Térjen vissza az alkalmazáshoz a böngészőben, és válassza a Click me Counter (Számláló) lapon található gombot. Tanúsítsa, hogy a számláló a meglévő egyről tizenegyre növekszik. Minden alkalommal, amikor a gomb ki van jelölve, az érték tízzel növekszik.

Az alkalmazás leállítása

Kövesse az alábbi lépéseket:

• Zárja be a böngészőablakot.
• Az alkalmazás leállításához nyomja le a CtrlC+ a parancshéjban.

Congratulations! Sikeresen elvégezte ezt az oktatóanyagot.

Következő lépések

Ez az oktatóanyag bemutatta, hogyan végezheti el az alábbi műveleteket:

• Hozz létre egy Blazor Web App.
• Nyisd meg az alkalmazást.
• Módosítsa az alkalmazást.
• Állítsa le az alkalmazást.

A ASP.NET Core alapjairól az alábbiakban olvashat bővebben:

ASP.NET Alapvető alapismeretek áttekintése

További oktatóanyagok

Alkalmazás típusa	Scenario	Tutorials
Webalkalmazás	Új kiszolgáló- és ügyfél-webfejlesztés a Blazor	Blazor Teendőlista-alkalmazás létrehozása és filmadatbázis-alkalmazás Blazor létrehozása (áttekintés)
Webes API	Kiszolgálóalapú adatfeldolgozás minimális API-kkal	Oktatóanyag: Minimális API létrehozása ASP.NET Core használatával
Távoli eljáráshívás (RPC) alkalmazás	Szerződés-első szolgáltatások protokollpufferek használatával	.NET gRPC-ügyfél és -kiszolgáló létrehozása a ASP.NET Core-ban
Valós idejű alkalmazás	Kiszolgáló/ügyfél kétirányú kommunikációja	Az első lépések az ASP.NET Core-ral SignalR

További erőforrások

• Bevezetés a .NET használatába
• Visual Studio
• Visual Studio Code
• .NET fejlesztői közösség
• .NET Live TV