ASP.NET Alapvető Blazor alapjai

Alapokkal kapcsolatos cikkek útmutatást adnak az alapvető Blazor fogalmakhoz. A fogalmak némelyike a Razor összetevőkalapszintű megértéséhez kapcsolódik, amelyeket a cikk következő szakaszában ismertetünk, és részletesen foglalkozunk a Összetevők cikkekkel.

Ügyfél- és kiszolgálómegjelenítési fogalmak

A Blazor dokumentációban a felhasználó rendszerében zajló tevékenységekről azt mondják, hogy az ügyfél eszközén vagy ügyféloldalon történnek. A szerveren zajló tevékenységet mondják úgy, hogy a szerveren vagy kiszolgálóoldalontörténik.

A renderelési kifejezés azt jelenti, hogy előállítjuk azt a HTML-jelölőnyelvet, amelyet a böngészők megjelenítenek.

• ügyféloldali renderelés (CSR) azt jelenti, hogy a végleges HTML-korrektúrát az ügyfél .NET WebAssembly futtatókörnyezete hozza létre. Az alkalmazás ügyfél által létrehozott felhasználói felületéhez nem küld HTML-t a rendszer egy kiszolgálóról az ügyfélnek az ilyen típusú rendereléshez. A lap felhasználói interaktivitását feltételezzük. Nincs olyan fogalom, mint statikus ügyféloldali renderelés. A CSR-t interaktívnak feltételezzük, ezért a "interaktív ügyféloldali renderelés" és a "interaktív CSR" nem használatos az iparág vagy a Blazor dokumentációjában.

• kiszolgálóoldali renderelés (SSR) azt jelenti, hogy a végső HTML-korrektúrát a kiszolgáló ASP.NET Core-futtatókörnyezete hozza létre. A HTML-fájlt egy hálózaton keresztül küldi el az ügyfélnek, hogy az ügyfél böngészője megjelenítse. Az ügyfél nem hoz létre HTML-t az alkalmazás kiszolgáló által létrehozott felhasználói felületéhez az ilyen típusú megjelenítéshez. Az SSR két fajtából áll:

  • Statikus SSR-: A kiszolgáló statikus HTML-t hoz létre, amely nem biztosít felhasználói interaktivitást vagy Razor összetevő állapotának fenntartását.
  • interaktív SSR-: Blazor események lehetővé teszik a felhasználók interaktivitását, és Razor összetevő állapotát a Blazor keretrendszer tartja fenn.

• Előrenderelés a laptartalom eredeti megjelenítése a kiszolgálón anélkül, hogy engedélyezné az eseménykezelőket a renderelt vezérlők számára. A kiszolgáló a lehető leghamarabb kiadja a lap HTML-felületét a kezdeti kérésre válaszul, így az alkalmazás rugalmasabbnak érzi magát a felhasználók számára. Az előrenderelés is javíthatja a keresőmotor-optimalizálást (SEO) azáltal, hogy a keresőmotorok által az oldal rangsorának kiszámításához használt kezdeti HTTP-válasz tartalmát rendereli. Az előrendelést mindig a végleges renderelés követi, akár a kiszolgálón, akár az ügyfélen.

Razor összetevők

Blazor alkalmazások Razor összetevőkönalapulnak , amelyeket gyakran csak összetevőknek neveznek. A összetevő a felhasználói felület egyik eleme, például egy lap, párbeszédpanel vagy adatbeviteli űrlap. Az összetevők .NET C#-osztályok, melyek beépülnek a .NET-gyűjteményekbe.

Razor arra vonatkozik, hogyan írják általában az összetevőket egy Razor jelölőlap formájában az ügyféloldali felhasználói felület logikájához és összetételéhez. 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. Razor fájlok a .razor fájlkiterjesztést használják.

Bár egyes Blazor fejlesztők és online erőforrások a "Blazor összetevők" kifejezést használják, a dokumentáció elkerüli ezt a kifejezést, és általánosan "Razor összetevőket" vagy "összetevőket" használ.

Blazor dokumentáció számos konvenciót fogad el az összetevők bemutatására és megvitatására:

• A példák általában ASP.NET Core/C# kódolási konvenciókhoz és mérnöki irányelvekhez igazodnak. További információkért tekintse meg a következő erőforrásokat:
  • ASP.NET Alapvető keretrendszerek tervezési irányelvei (dotnet/aspnetcore GitHub-adattár)
  • C#-kódolási konvenciók (C# útmutató)
• A projektkód, a fájl elérési útjai és nevei, a projektsablonok nevei és más speciális kifejezések az Egyesült Államok angol nyelvű, és általában kódkerítésűek.
• Az összetevőkre általában a C#-osztály neve (Pascal-eset) hivatkozik, amelyet az "összetevő" szó követ. Egy tipikus fájlfeltöltési összetevőt például "FileUpload összetevőnek" nevezünk.
• Az összetevők C#-osztályának neve általában megegyezik a fájl nevével.
• Az routable-összetevők általában a relatív URL-címeiket az összetevő osztálynevére állítják be a kebab-eset esetében. Például egy FileUpload összetevő tartalmazza az útválasztási konfigurációt, amely a renderelt összetevő eléréséhez szükséges a relatív URL-/file-uploadalatt. Az útválasztást és a navigációt az ASP.NET Core Blazor útválasztási és navigációsismerteti.
• Ha egy összetevő több verzióját használja, azokat egymás után számozza. A FileUpload3 összetevő például a /file-upload-3 pontnál érhető el.
• Razor irányelvek a következő sorrendben vannak elhelyezve: , .razor file (.NET 8 vagy újabb), @page utasítások, egyéb irányelvek betűrendben.
• Bár private tagok számára nem szükséges, a hozzáférési módosítókat a cikkbeli példákban és a mintaalkalmazásokban használjuk. A private például egy maxAllowedFiles nevű mező private int maxAllowedFiles = 3;deklarálására szolgál.
• összetevőparaméter értékek egy Razor fenntartott @ szimbólummalvezetnek, de nem kötelező. A literálok (például logikai értékek), a kulcsszavak (például this) és az null, mint összetevőparaméter-értékek nincsenek előtagként @-vel ellátva; ez is csupán egy dokumentációs konvenció. Ha szeretné, a saját kódjában előtagként használhatja a @ jelölést konstansokhoz.
• A C# osztályok a this kulcsszót használják, és elkerülik az aláhúzásjellel (_) rendelkező mezők előtagolását, amelyeket a konstruktorokban rendelnek hozzá, amely eltér a ASP.NET Core keretrendszer tervezési irányelveitől.
• A elsődleges konstruktorokat (C# 12 vagy újabb)használó példákban az elsődleges konstruktorparamétereket általában közvetlenül az osztálytagok használják. A cikk példáiban a kódsorok fel vannak osztva a vízszintes görgetés csökkentése érdekében. Ezek a törések nem befolyásolják a végrehajtást, de a projektbe illesztéskor eltávolíthatók.

Az Razor összetevőszintaxisával kapcsolatos további információkat az Razor szakaszában talál.

Az alábbiakban egy példaszámláló összetevőt és egy Blazor projektsablonból létrehozott alkalmazás részét mutatjuk be. Az összetevők részletes lefedettségét a dokumentáció későbbi, Components cikkeiben találja. Az alábbi példa az Alapjai cikkekben szereplő összetevőkkel kapcsolatos fogalmakat mutatja be, mielőtt a dokumentáció későbbi, Összetevők cikkekhez jut.

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

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

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

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

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

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

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

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

Az előző Counter összetevő:

• Az első sorban lévő @page irányelvvel állítja be az útvonalát.
• Beállítja a lap címét és címsorát.
• Az aktuális számot @currentCountsegítségével jeleníti meg. currentCount a @code blokk C#-kódjában definiált egész változó.
• Megjelenít egy gombot a IncrementCount metódus aktiválásához, amely a @code blokkban is megtalálható, és növeli a currentCount változó értékét.

Dokumentumobjektum-modell (DOM)

A dokumentumobjektum-modellre mutató hivatkozások a DOMrövidítést használják.

További információ:

• Bevezetés a DOM-ba (MDN-dokumentáció)
• 1. szintű dokumentumobjektum-modell specifikációja (W3C)

A .NET API-k részhalmaza Blazor WebAssembly alkalmazásokhoz

A Blazor WebAssembly által a böngészőn támogatott adott .NET API-k válogatott listája nincs elérhető. A WebAssemblyben nem támogatott .NET API-k felderítéséhez azonban manuálisan kereshet a [UnsupportedOSPlatform("browser")] jegyzetekkel ellátott .NET API-k listájára.

További információ:

• osztálykódtárak: Ügyféloldali böngészőkompatibilitás-elemző
• API-k megjegyzése adott platformokon nem támogatottként (dotnet/designs GitHub-adattár

Mintaalkalmazások

A dokumentációs mintaalkalmazások megtekinthetők és letölthetők:

Blazor minta GitHub-adattár (dotnet/blazor-samples)

Keresse meg a mintaalkalmazást, ha először kiválasztja azt a verziómappát, amely megfelel a .NET azon verziójának, amellyel éppen dolgozik.

További információ: az adattárban található minták listája és a letöltési utasítások: Blazor gitHub-adattár README fájl.

A ASP.NET Core-adattár alapszintű tesztalkalmazása szintén hasznos mintakészlet a különböző Blazor forgatókönyvekhez:

BasicTestApp ASP.NET Core referenciaforrásban (dotnet/aspnetcore)

Bájt többszörösei

A .NET bájtméretek metrikus előtagokat használnak a bájtok nem tízes alapú többszöröseire az 1024 hatványai szerint.

Támogatási kérelmek

Csak a dokumentációval kapcsolatos problémák megfelelőek az dotnet/AspNetCore.Docs adattárhoz. Terméktámogatás esetén ne nyisson meg dokumentációs problémát. Kérjen segítséget az alábbi támogatási csatornák közül egy vagy többen keresztül:

• Stack Overflow (címkézett: blazor)
• Általános ASP.NET Core Slack csapat
• Blazor Gitter

Az ASP.NET Core termékegységhez tartozó keretrendszerbeli hibák vagy termékvisszajelzés esetén nyisson egy hibajegyet a dotnet/aspnetcore felületen. A hibajelentésekhez általában a következők szükségesek:

• Probléma egyértelmű magyarázata: Kövesse a termékegység által a probléma megnyitásakor megadott GitHub-problémasablon utasításait.
• Minimális repro projekt: Helyezzen el egy projektet a GitHubon a termékegység mérnökei számára a letöltéshez és a futtatáshoz. Kapcsolja össze a projektet a probléma nyitó megjegyzésével.

Ha egy Blazor cikk esetleges problémáját tapasztalja, nyisson meg egy dokumentációs problémát. Dokumentációs probléma megnyitásához használja a cikk alján található Dokumentációs probléma megnyitása visszajelzési hivatkozást. A problémához hozzáadott metaadatok követési adatokat biztosítanak, és automatikusan pingelik a cikk szerzőjének adatait. Ha a témakört a dokumentációs probléma megnyitása előtt megvitatták a termékegységtel, helyezzen kereszthivatkozást a mérnöki problémára a dokumentációs probléma nyitó megjegyzésében.

A Visual Studióval kapcsolatos problémák vagy visszajelzések esetén használja a Problémajelentés vagy Javaslat funkcióra kézmozdulatokat a Visual Studión belül, amelyek belső problémákat nyitnak meg a Visual Studio számára. További információ: Visual Studio Feedback.

A Visual Studio Code-tal kapcsolatos problémák esetén kérjen támogatást a közösségi támogatási fórumokon. Hibajelentések és termékvisszajelzések esetén nyisson meg egy hibát a microsoft/vscode GitHub-adattárban.

A Blazor dokumentációval kapcsolatos GitHub-problémák automatikusan jelölve vannak a Blazor.Docs projekt (dotnet/AspNetCore.Docs GitHub-adattár) számára. Várjon egy rövid ideig a válaszra, különösen hétvégén és ünnepnapokon. A dokumentáció szerzői általában hétköznap 24 órán belül válaszolnak.

Közösségi hivatkozások Blazor erőforrásokhoz

Látogasson el a közösség által fenntartott Blazor erőforrásokra mutató hivatkozások gyűjteményéhez, amely a Kiváló Blazoroldalon található.