août 21, 2020

Comment travailler avec Blazor côté client

Vous avez probablement entendu parler de Blazor Wasm, mais qu'est-ce que c'est et comment pouvez-vous l'utiliser pour créer rapidement vos applications Web?

En bref, Blazor côté client (Blazor Wasm) apporte C # au navigateur.

Nous connaissons tous l'idée d'écrire du JavaScript, qui fonctionne dans le navigateur, mais maintenant nous avons une autre option: écrire C # et l'exécuter aussi dans le navigateur.

Cela fonctionne grâce à quelque chose appelé WebAssembly.

WebAssembly (Wasm) représente un changement important dans le développement d'applications Web: ouvrir la porte à la possibilité de compiler des ensembles binaires et de les expédier au navigateur (comme alternative à l'envoi de code JavaScript sous forme de texte).

Maintenant, vous pouvez pensez, exécuter du code binaire dans le navigateur semble compliqué. Mais, heureusement, nous n'avons pas à nous soucier des détails d'implémentation de niveau inférieur, car Microsoft a pris soin d'eux, nous permettant de nous concentrer sur la partie amusante: créer des applications Web à l'aide du modèle de composant de Blazor.

 ] dotnet nouveau blazorwasm

 < h1 >  Bonjour, @Name  </  h1 > 

@code {
    [Parameter]
    chaîne publique Name {get; ensemble; }
}

  < Greeting   Name  =  " Gurdeep "   />

 @if (_liked)
{
 < span >  A aimé!  </  span > 
}
autre
{
 < bouton   @onclick  =  " HandleLikeClicked "  > 
Comme!
Bouton  </  > 
}

 @code  {

	 [ Parameter ] 
	 public  EventCallback OnLiked  {  get [19659019];   set ;  } 

	 bool  _liked  {  get ;   set ;  } 

	 protected   void   HandleLikeClicked  ()   {
_liked  =   true ; 
OnLiked .  InvokeAsync  ( EventArgs .  Empty ) ; 
	} 
}

 @foreach (var post in Posts)
{
     < h2 >  @ post.Title  </  h2 > 
     < LikeButton   OnLiked  =  " () => HandleLiked (post) "   /> 
}

 @code  {
     private  List  < Post >  Messages  {  get ;   set ;  } 
    
     protected   void   HandleLiked  ( Post poste ) 
     {
        Console .  WriteLine  ( "A aimé ce message:"   +  post .  Title ) ; 
    } 
}