Megosztás a következőn keresztül:


ASP.NET Core Blazor

Jegyzet

Ez nem a cikk legújabb verziója. Az aktuális verziót ennek a cikknek a .NET 9-es verziójában találja.

Figyelmeztetés

A ASP.NET Core ezen verziója már nem támogatott. További információ: .NET és .NET Core támogatási szabályzat. Az aktuális kiadást tekintse meg ennek a cikknek a .NET 9-es verziójában .

Fontos

Ezek az információk egy olyan előzetes termékre vonatkoznak, amelyet a kereskedelmi forgalomba kerülés előtt jelentősen módosíthatnak. A Microsoft nem vállal kifejezett vagy hallgatólagos szavatosságot az itt megadott információkra vonatkozóan.

Az aktuális kiadásról a cikk .NET 9-es verziójában.

Üdvözöljük Blazor!

Blazor egy .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:

Blazor egy keretrendszer az interaktív ügyféloldali webes felhasználói felület létrehozásához .NET-:

  • Gazdag interaktív felhasználói felületeket hozhat létre C#használatával.
  • Ossza meg a .NET-ben írt kiszolgálóoldali és ügyféloldali alkalmazáslogikát.
  • A felhasználói felületet HTML-ként és CSS-ként jeleníti meg a széles körű böngészőtámogatás érdekében, beleértve a mobilböngészőket is.
  • Hibrid asztali és mobilalkalmazások létrehozása .NET és Blazorhasználatával.
  • Gazdag interaktív felhasználói felületeket hozhat létre C#használatával.
  • Ossza meg a .NET-ben írt kiszolgálóoldali és ügyféloldali alkalmazáslogikát.
  • A felhasználói felületet HTML-ként és CSS-ként jeleníti meg a széles körű böngészőtámogatás érdekében, beleértve a mobilböngészőket is.

A .NET ügyféloldali webfejlesztéshez való használata a következő előnyöket nyújtja:

  • Kód írása C#-ban, amely javíthatja az alkalmazásfejlesztés és -karbantartás hatékonyságát.
  • Használja ki .NET-kódtárak meglévő .NET-ökoszisztémáját.
  • Előnyt jelent a . A NET teljesítménye, megbízhatósága és biztonsága.
  • Windows, Linux vagy macOS rendszeren is hatékonyan dolgozhat olyan fejlesztői környezetekkel, mint például Visual Studio vagy Visual Studio Code. Integrálható modern üzemeltetési platformokkal, például Docker.
  • A stabil, funkciógazdag és könnyen használható nyelvek, keretrendszerek és eszközök közös készletére építhet.

Jegyzet

A Blazor gyors üzembe helyezési oktatóanyagot Az első Blazor alkalmazás létrehozásacímű témakörben talál.

Összetevők

Blazor alkalmazások összetevőkönalapulnak. A Blazor egyik összetevője a felhasználói felület olyan eleme, mint például egy lap, párbeszédpanel vagy adatbeviteli űrlap.

Az összetevők olyan .NET C#-osztályok, amelyek a .NET-szerelvényekbe vannak beépítve, és a következőket tartalmazzák:

  • Rugalmas felhasználói felületi renderelési logika definiálása.
  • Felhasználói események kezelése.
  • Beágyazhatók és újra felhasználhatók.
  • Megosztható és terjeszthető Razor osztálykódtárakként vagy NuGet-csomagok.

Az összetevőosztályt általában Razor korrektúralap formájában írják, .razor fájlkiterjesztéssel. A Blazor összetevőit hivatalosan Razor összetevőkneknevezik , informálisan Blazor összetevőknek. 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 lehetővé teszi a HTML-jelölés és a C# közötti váltást ugyanabban a fájlban, IntelliSense programozási támogatással a Visual Studio-ban.

Blazor természetes HTML-címkéket használ a felhasználói felület összetételéhez. Az alábbi Razor korrektúra egy olyan összetevőt mutat be, amely egy számlálót növel, amikor a felhasználó kiválaszt egy gombot.

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

Az összetevők a böngésző Dokumentumobjektum-modelljének (DOM) memória-beli ábrázolásává válnak, amit megjelenítési fánakhívnak, amely a felhasználói felület rugalmas és hatékony frissítésére szolgál.

Teljes körű webes alkalmazás készítése Blazor

Blazor Web Appegy összetevőalapú architektúrát biztosítanak kiszolgálóoldali rendereléssel és teljes ügyféloldali interaktivitással egyetlen megoldásban, ahol válthat a kiszolgálóoldali és az ügyféloldali megjelenítési módok között, és akár ugyanabban az oldalon is keverheti őket.

Blazor Web Apps gyorsan képes felhasználói felületet biztosítani a böngészőnek úgy, hogy statikusan rendereli a html-tartalmat a kiszolgálóról a kérésekre válaszul. Az oldal gyorsan betöltődik, mert a felhasználói felület renderelése gyorsan megtörténik a kiszolgálón anélkül, hogy nagy JavaScript-csomagot kellene letöltenie. Blazor tovább javíthatja a felhasználói élményt a kiszolgálómegjelenítés különböző progresszív fejlesztéseivel, például az űrlapbejegyzésekkel való továbbfejlesztett navigációval és az aszinkron módon létrehozott tartalom streamelésével.

Blazor támogatja interaktív kiszolgálóoldali renderelést (interaktív SSR), ahol a felhasználói felületi interakciók a kiszolgálóról valós idejű kapcsolaton keresztül kezelhetők a böngészővel. Az interaktív SSR olyan gazdag felhasználói élményt tesz lehetővé, mint amit egy ügyfélalkalmazás elvárna, de nem kell API-végpontokat létrehoznia a kiszolgálói erőforrások eléréséhez. Az interaktív lapok laptartalma előrerendezett, ahol a rendszer először létrehozza és elküldi a tartalmat az ügyfélnek 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.

Blazor Web Appügyféloldali renderelés (CSR) támogatja az interaktivitást, amely az alkalmazással letölthető WebAssembly készült .NET-futtatókörnyezetre támaszkodik. Ha Blazor fut a WebAssemblyen, a .NET-kód hozzáférhet a böngésző teljes funkcionalitásához, és együttműködhet a JavaScripttel. A .NET-kód a böngésző biztonsági tesztkörnyezetében fut azokkal a védelemmel, amelyeket a tesztkörnyezet biztosít az ügyfélszámítógépen végzett rosszindulatú műveletek ellen.

Blazor alkalmazások teljes mértékben megcélzhatják a WebAssembly böngészőben való futtatását kiszolgáló bevonása nélkül. Az különálló Blazor WebAssembly alkalmazásesetén az eszközök statikus fájlokként vannak üzembe helyezve egy webkiszolgálón vagy szolgáltatásban, amely képes statikus tartalmakat kiszolgálni az ügyfelek számára. A letöltés után az önálló Blazor WebAssembly-alkalmazások progresszív webalkalmazásként (PWA) gyorsítótárazhatók és offline is végrehajthatók.

Natív ügyfélalkalmazás létrehozása Blazor Hybrid

Blazor Hybrid lehetővé teszi Razor összetevők használatát egy natív ügyfélalkalmazásban a webes, mobil és asztali platformok natív és webes technológiáinak keverékével. A kód natív módon fut a .NET-folyamatban, és egy beágyazott Web View vezérlőelemre rendereli a webes felhasználói felületet egy helyi interop csatornával. A WebAssembly nem használható hibrid alkalmazásokban. A hibrid alkalmazások .NET Multi-platform App UI (.NET MAUI)épülnek, amely platformfüggetlen keretrendszer natív mobil- és asztali alkalmazások C# és XAML használatával történő létrehozásához.

A Blazor Hybrid támogatja a Windows Presentation Foundation (WPF) és a Windows Forms használatát, hogy az alkalmazások áttérhessenek a korábbi technológiákról .NET MAUI.

Blazor Server

Blazor Server támogatja Razor összetevők üzemeltetését a kiszolgálón egy ASP.NET Core-alkalmazásban. A felhasználói felület frissítései SignalR kapcsolaton keresztül kezelhetők.

A futtatókörnyezet a kiszolgálón marad, és kezeli a következőt:

  • Az alkalmazás C# kódjának végrehajtása.
  • Felhasználói felületi események küldése a böngészőből a kiszolgálóra.
  • Felhasználói felületi frissítések alkalmazása a kiszolgáló által visszaküldött renderelt összetevőre.

A Blazor Server által a böngészővel való kommunikációhoz használt kapcsolat JavaScript-interop hívások kezelésére is használható.

Blazor Server .NET-kódot futtat a kiszolgálón, és egy SignalR kapcsolaton keresztül kommunikál az ügyfél dokumentumobjektum-modelljével

Blazor Server alkalmazások a hagyományos modelleknél eltérő módon renderelik a felhasználói felületet ASP.NET Core-alkalmazásokban Razor nézetek vagy Razor oldalak használatával. Mindkét modell a Razor nyelvi használja a HTML-tartalom rendereléshez való leírásához, de jelentősen eltérnek korrektúra megjelenítésének módjában.

Ha Razor lap vagy nézet jelenik meg, a Razor kód minden sora HTML-t bocsát ki szöveges formában. A renderelés után a kiszolgáló megsemmisíti a lap- vagy nézetpéldányt, beleértve a létrehozott állapotot is. Amikor egy másik kérés történik a lapra vonatkozóan, a rendszer a teljes lapot ismét HTML-re irányítja át, és elküldi az ügyfélnek.

Blazor Server egy HTML- vagy XML-DOM-hoz hasonló összetevőkből álló grafikont hoz létre. Az összetevődiagram tulajdonságokban és mezőkben tárolt állapotot tartalmaz. Blazor kiértékeli az összetevő-gráfot, hogy létrehozhassa a korrektúra bináris ábrázolását, amelyet a rendszer renderelés céljából elküld az ügyfélnek. Miután létrejött a kapcsolat az ügyfél és a kiszolgáló között, az összetevő statikus előrerendelt elemei interaktív elemekre lesznek cserélve. Ha előre rendezi a tartalmat a kiszolgálón, hogy a HTML-tartalmat gyorsan betölthesse az ügyfélre, az alkalmazás rugalmasabbnak érzi magát az ügyfél számára.

Miután az összetevők interaktívak lettek az ügyfélen, a felhasználói felület frissítéseit a felhasználói interakció és az alkalmazásesemények aktiválják. Frissítés esetén a rendszer újrarendezi az összetevő-gráfot, és kiszámítja a felhasználói felület (különbség) értékét. Ez a diff az ügyfél felhasználói felületének frissítéséhez szükséges legkisebb DOM-módosítások készlete. A rendszer bináris formátumban küldi el a diffet az ügyfélnek, és a böngésző alkalmazza.

A rendszer eltávolít egy összetevőt, miután a felhasználó eltávolodik az összetevőtől.

Blazor WebAssembly

Blazor WebAssembly egy egyoldalas alkalmazás-keretrendszer (SPA) interaktív ügyféloldali webalkalmazások .NET-tel való létrehozásához.

A .NET-kód webböngészőkben való futtatását WebAssembly (rövidített wasm) teszi lehetővé. A WebAssembly egy kompakt bájtkódformátum, amely a gyors letöltéshez és a maximális végrehajtási sebességhez van optimalizálva. A WebAssembly egy nyílt webes szabvány, amely beépülő modulok nélküli webböngészőkben támogatott. A WebAssembly minden modern böngészőben működik, beleértve a mobilböngészőket is.

A WebAssembly-kód a JavaScripten keresztül érheti el a böngésző teljes funkcionalitását, amit JavaScript interoperabilitásnakneveznek, amit gyakran röviden JavaScript interop-nak vagy JS interop-nak neveznek. A WebAssembly által a böngészőben végrehajtott .NET-kód a böngésző JavaScript-tesztkörnyezetében fut, a védőfal által biztosított védelemmel az ügyfélszámítógépen végzett rosszindulatú műveletek ellen.

Blazor WebAssembly .NET-kódot futtat a böngészőben a WebAssembly használatával.

Blazor WebAssembly-alkalmazások létrehozásakor és futtatásakor:

  • A C#-kódfájlok és Razor fájlok .NET-szerelvényekbe vannak lefordítva.
  • A szerelvények és a .NET-futtatókörnyezet letöltődnek a böngészőbe.
  • Blazor WebAssembly rendszerindítással elindítja a .NET WebAssembly futtatókörnyezetet, és konfigurálja a futtatókörnyezetet az alkalmazás szerelvények betöltéséhez. A futtatókörnyezet JavaScript-interop használatával kezeli a DOM-manipulációt és a böngésző API-hívásait.

A közzétett alkalmazás mérete, adatcsomag mérete, kritikus teljesítménytényező az alkalmazás használhatósága szempontjából. Egy nagy alkalmazás letöltése viszonylag hosszú időt vesz igénybe egy böngészőbe, ami csökkenti a felhasználói élményt. Blazor WebAssembly optimalizálja a hasznos teher méretét azzal a céllal, hogy csökkentse a letöltési időket.

  • A fel nem használt kód a Köztes nyelv (IL) vágóáltal közzétett közzétételekor törlődik az alkalmazásból.
  • A HTTP-válaszok tömörítve vannak.
  • A .NET futtatókörnyezet és az összeállítások gyorsítótárazódnak a böngészőben.

Blazor Hybrid

A hibrid alkalmazások natív és webes technológiák keverékét használják. A Blazor Hybrid-alkalmazások Blazor használnak egy natív ügyfélalkalmazásban. Razor összetevők natív módon futnak a .NET-folyamatban, és a webes felhasználói felületet beágyazott Web View vezérlőelemre renderelik egy helyi interop csatornával. A WebAssembly nem használható hibrid alkalmazásokban. A hibrid alkalmazások a következő technológiákat foglalják magukban:

  • .NET Multi-platform App UI (.NET MAUI): Platformfüggetlen keretrendszer natív mobil- és asztali alkalmazások C# és XAML használatával való létrehozásához.
  • Windows Presentation Foundation (WPF): Felbontásfüggetlen felhasználói felületi keretrendszer, amely egy vektoralapú renderelési motort használ, amely a modern grafikus hardver előnyeit használja.
  • Windows Forms: Egy felhasználói felületi keretrendszer, amely gazdag asztali ügyfélalkalmazásokat hoz létre a Windowshoz. A Windows Forms fejlesztői platform számos alkalmazásfejlesztési funkciót támogat, beleértve a vezérlőket, a grafikus elemeket, az adatkötést és a felhasználói bevitelt.

JavaScript interop

A külső JavaScript-kódtárakat és böngésző API-khoz való hozzáférést igénylő alkalmazások esetében az összetevők együttműködnek a JavaScripttel. Az összetevők bármilyen kódtárat vagy API-t használhatnak, amelyet a JavaScript képes használni. A C#-kód a JavaScript-kód, a JavaScript-kód pedig C#-kódba.

Kódmegosztás és .NET Standard

implementálja a .NET Standard, amely lehetővé teszi, hogy projektek a .NET Standard specifikációinak megfelelő kódtárakra hivatkozjanak. A .NET Standard a .NET-implementációkban gyakran használt .NET API-k formális specifikációja. A .NET Standard osztálykódtárak különböző .NET-platformokon oszthatók meg, például Blazor, .NET-keretrendszer, .NET Core, .NET Multi-platform App UI (.NET MAUI), Mono és Unity.

A webböngészőn belül nem alkalmazható API-k (például a fájlrendszer elérése, socketek megnyitása és szálak kezelése) hibát jeleznek PlatformNotSupportedException.

Következő lépések