„Blazor Render Modes“ paaiškinimai – „SitePoint“.

A ankstesnis straipsnistrumpai paaiškinome būsimus „Blazor .NET8 Render Modes“ pakeitimus, kurie leidžia kiekvienam „Razor“ puslapiui arba atskiram komponentui nurodyti, ar tas puslapis ar komponentas bus atvaizduojamas serveryje (WebSocket), kliente (WebAssembly) ar automatinis režimas (interaktyvus serverio pusės atvaizdavimas pirmą kartą, o vėliau kliente).

Kadangi tuo tarpu „Blazor“ išleistoje versijoje buvo pristatyti atvaizdavimo režimai, pažvelkime į įvairias atvaizdavimo režimo parinktis ir kaip jas naudoti programoje.

Blazor recap

Blazor yra nemokama atvirojo kodo žiniatinklio sistema, leidžianti kūrėjams kurti žiniatinklio programas naudojant C# ir HTML. Jį kuria „Microsoft“ ir yra .NET ekosistemos dalis. „Blazor“ turi du prieglobos modelius: „Blazor Server“ ir „Blazor WebAssembly“. „Blazor Server“ siūlo būdą sukurti žiniatinklio vartotojo sąsają naudojant C#, o ne „JavaScript“. „Blazor Server“ programos yra talpinamos serveryje ir naudoja realaus laiko ryšį per „SignalR“, kad tvarkytų vartotojo sąsajos naujinius. Kita vertus, „Blazor WebAssembly“ naudojasi Web Assembly padaryti viską naršyklėje.

Blazor Render režimai

.NET 8 versijoje Blazor įdiegė keletą patobulinimų, įskaitant galimybę pasirinkti komponentų pateikimo režimą vykdymo metu. Tai reiškia, kad kūrėjai dabar gali pridėti kliento interaktyvumą kiekvienam komponentui ar puslapiui ir generuoti statinį HTML turinį su komponentais. Be to, „Blazor“ .NET 8 patobulino autentifikavimą, galimybę nukreipti į nurodytą elementą ir galimybę stebėti grandinės veiklą.

The atvaizdavimo režimo atributas naudojamas apibrėžti, kur turi būti pateiktas šakninio lygio komponentas. Parinktis RenderMode nurodo būdą, kuriuo komponentas turėtų būti atvaizduojamas. Yra keletas palaikomų „RenderMode“ parinkčių, įskaitant „Server“, „ServerPrerendered“ ir „Static“. Užmezgus ryšį su naršykle, serverio režimas interaktyvus. ServerPrerendered režimas pirmiausia pateikiamas iš anksto, o tada interaktyviai. Statinis režimas pateikiamas kaip statinis turinys.

Kiekvienas „Blazor“ žiniatinklio programos komponentas remiasi konkrečiu atvaizdavimo režimu, kad nustatytų naudojamą prieglobos modelį, kur jis pateikiamas ir ar jis interaktyvus, ar ne. Norėdami pritaikyti atvaizdavimo režimą komponentui, naudokite @rendermode direktyvą dėl komponento egzemplioriaus arba komponento apibrėžimo.

Statinis serveris ir interaktyvus serveris yra žinomi kaip serverio atvaizdavimo režimas. Interaktyvus žiniatinklio surinkimas yra žinomas kaip kliento atvaizdavimo režimas. Parinktis Automatinis paleidžiama nuo serverio, įkeliama į talpyklą ir vėlesnių apsilankymų metu perkeliama kliente. Taip taupomas pralaidumas ir greitesnis įkėlimo laikas.

Įgalinti interaktyvių atvaizdavimo režimų palaikymą (serveris ir klientas)

Kai kuriate .Blazor žiniatinklio programą, jūs, kaip kūrėjas, turite nustatyti interaktyvius pateikimo režimus. Kai pradedate nuo pateikto projekto šablono (su duomenų pavyzdžiais arba tuščiu, nesvarbu), šablone automatiškai bus pasiekiami šie plėtiniai:

Komponentų kūrėjo plėtiniai:

• AddInteractiveServerComponents prideda paslaugas, skirtas palaikyti interaktyvaus serverio komponentus.
• AddInteractiveWebAssemblyComponents prideda paslaugas, skirtas palaikyti Interactive WebAssembly komponentų pateikimą.
• MapRazorComponents aptinka galimus komponentus ir nurodo pagrindinį programos komponentą (pirmasis įkeltas komponentas), kuris pagal numatytuosius nustatymus yra programos komponentas (App.razor).

Galinių taškų konvencijų kūrimo priemonės plėtiniai:

• AddInteractiveServerRenderMode sukonfigūruoja programos interaktyvų serverio atvaizdavimą (interaktyvų SSR).
• AddInteractiveWebAssemblyRenderMode sukonfigūruoja programos Interactive WebAssembly pateikimo režimą.

Atskiri komponentai vis tiek turi deklaruoti savo pateikimo režimą, kai komponentų paslaugos ir galutiniai taškai sukonfigūruojami programos Programos faile. Galima sakyti, kad yra projekto konfigūracijos dalis ( Program.cs failą), kuriame nurodėte visuotinį projekto atvaizdavimo režimą, po kurio vis tiek turėtumėte nurodyti atskiro puslapio arba komponento atvaizdavimo režimą.

Atvaizdavimo režimo naudojimas pavyzdinėje programoje

Kai teorinės dalies nėra, pateiksime nuoseklų pavyzdį, kaip eksperimentuoti su skirtingais atvaizdavimo režimais. Pradėsime nuo numatytojo „Blazor Server Web App“ šablono „Visual Studio“, po to pridėsime projektą „Blazor WebAssembly“ ir parodysime interaktyvaus mygtuko „Render Mode“ parinktis.

1. Įsitikinkite, kad turite naujausią versiją „Visual Studio 2022“ (17.8.x arba naujesnė versija) įdiegta kartu su .NET 8 SDK.
2. Iš „Visual Studio“ pasirinkite Sukurti naują projektą ir ieškoti Blazor; bus parodyta keletas skirtingų pasirinkimų.
3. Pasirinkite „Blazor“ serverio programa kaip šablonas; spustelėkite Kitas
   
4. Pavyzdžiui, nurodykite savo projekto pavadinimą BlazorRenderModes
5. Viduje Papildoma informacija puslapyje, pateikite šiuos nustatymus:
   • Sistema: .NET 8.0 (ilgalaikis palaikymas)
   • Autentifikavimo tipas: nėra
   • Konfigūruoti HTTPS: pasirinkta
   • Interaktyvus atvaizdavimo režimas: Serveris
   • Interaktyvumo vieta: Puslapiui / komponentui
     
     Pastaba: kaip matote, „Blazor“ projekto vedlys jau buvo atnaujintas su „Render Mode“ parinktimis.
6. Projekte atidarykite Program.cs failą ir patikrinkite šiuos dalykus:

   
    builder.Services.AddRazorComponents()
        .AddInteractiveServerComponents().

   
   Tai paaiškina tai, ką paaiškinome anksčiau „Component Builder Extensions“, kur mūsų „Blazor Server“ programa dabar yra paruošta naudoti interaktyvų serverio atvaizdavimo režimą.

7. Šiek tiek žemiau toje pačioje Program.cs failą, rasite šiuos dalykus:

   app.MapRazorComponents()
        .AddInteractiveServerRenderMode();

   
   Tai paaiškina tai, ką paaiškinome anksčiau MapRazorComponentkur mūsų „Blazor Server“ programa dabar paruošta naudoti interaktyvų serverio atvaizdavimo režimą.

8. Norėdami pridėti interaktyvų komponentą prie mūsų programos, pridėkite pavyzdinį kodą prie programos Home.razor puslapį.

   @page "https://www.sitepoint.com/"<PageTitle>Home</PageTitle>
   
   This button demonstrates the use of Blazor Interactive Server Render Mode
   
   <button @onclick="Unlocked">Unlock Interactive Render Mode</button>
   
   <span>@unlockmessage</span>@code {
       string unlockmessage = "";
       void Unlocked()
       {
           unlockmessage = "Interactive Render Mode Unlocked";
       }
   
   
   }

9. The @page sintaksė yra Blazor maršrutas į puslapį, šiuo atveju į pagrindinį puslapį. Po to seka paprasta HTML kalba, rodanti tam tikrą tekstą, mygtuką ir teksto elementą HTML objekte „“.
10. 1 @code skyriuje yra C# kalba, kaip ir tradiciniame ASP.NET tinklalapyje, kuriame vartotojui spustelėjus mygtuką rodomas tekstinis pranešimas.
11. Sutaupyti kodas ir Bėk paraiška.
    
12. Jei paspausite mygtuką, galite būti nustebinti, kad nieko nevyksta. Kaip viskas atrodo gerai. Tačiau atminkite, kad mes nurodėme savo Blazor projektą Interaktyvus serverio atvaizdavimo režimaso tai reiškia, kad turime šiek tiek atnaujinti mygtuko elementą, kad jis būtų interaktyvus.
13. Grįžkite į kodą ir atnaujinkite Home.razor failą ir antroje eilutėje tiesiai po @page eilutę, pridėkite:

    @rendermode InteractiveServer

14. Kai vėl paleisite programą ir spustelėsite mygtuką, Teksto žinutė gražiai pasirodys! Puikus darbas!
    
15. Atidarant Naršyklės diagnostikos įrankiai (tikrinimas)ir patikrinti Tinklas taip pat rodo, kad tai yra aktyvus žiniatinklio lizdo ryšys.
    
16. Dabar atminkite, kad galima nurodyti atvaizdavimo režimą už puslapį arba vienam komponentui. (Jei jums įdomu, kas yra „Blazor“ komponentas, pagalvokite apie tinklalapio skiltį, pvz., mygtuką, formą, tinklelį…, kurį galima įkelti kaip atskirą elementą). Norėdami parodyti, kaip tai galima pritaikyti komponentui, atnaujinkite savo Home.razor failą taip:

    @page "https://www.sitepoint.com/"
    
     @*
     @rendermode InteractiveServer 
     *@
    

    kur @* *@ reiškia „pakomentuoti“.
    Tada pridėkite lentelę Orai prie pagrindinio puslapio išdėstymo, kuris techniškai yra atskiras puslapis Weather.razorkaip objektą naudojant atnaujintą kodo sintaksę:

    <span>@unlockmessage</span>
    
    <Weather @rendermode=InteractiveServer/>
    
    @code {
        string unlockmessage = "";

17. Kaip ir anksčiau, dabar įkeliame puslapį naudodami tradicinį statinį serverio atvaizdavimą, bet nurodome naudoti Interaktyvus serverio atvaizdavimo režimas už Weather komponentas.
18. Išsaugoti ir Bėk programą dar kartą. Pamatysite, kad ankstesnis mygtukas nieko nedaro, kai jį spustelėja, tačiau informacija apie orus yra gražiai įkeliama.

Būsimame straipsnyje pakartotinai panaudosime šį Blazor Web App pavyzdį ir pristatysime „InteractiveWebAssembly“, skirtą kliento pusės atvaizdavimui.

Santrauka

Apibendrinant galima teigti, kad naujasis Blazor .NET8 atvaizdavimo režimas suteikia kūrėjams daugiau lankstumo ir valdymo, kaip atvaizduojami jų komponentai, taip pagerindamas žiniatinklio programų našumą ir interaktyvumą.