Qu'est-ce que Razor? Quel est le rapport avec Blazor et lequel devriez-vous utiliser? Apprenez la différence entre Blazor et Razor et comment les utiliser dans vos applications Web.

Vous dites Blazor, je dis Razor, arrêtons le tout!

Si vous avez passé du temps dans l'écosystème .NET , il est probable que vous ayez entendu des gens parler de Razor et Blazor, souvent dans la même phrase.

Mais qu'est-ce que Razor? Et est-il toujours pertinent maintenant que nous avons Blazor?

Razor est une syntaxe de balisage de modèle

Razor a commencé sa vie comme une syntaxe de balisage de modèle, basée sur C #.

L'idée? Vous pouvez écrire (principalement) du balisage HTML standard et y jeter du C # pour gérer des choses comme l'affichage des données et l'exécution de la logique de la vue.

Le cas d'utilisation courant de Razor au cours de la dernière décennie a été d'alimenter les vues ASP.NET MVC .

Lorsque vous écrivez une vue MVC (la partie V de MVC), vous utilisez généralement la syntaxe Razor pour lier des données à votre balisage.

     Bonjour @ Model.FirstName

Au-delà de la simple liaison de modèle, Razor vous permet également d'utiliser des expressions conditionnelles, telles que if instructions:

 @if (Model.IsAdmin) {
     Tout supprimer! 
}

De plus, vous pouvez effectuer d'autres tâches C #, comme boucler des données à l'aide des boucles foreach .

 @foreach (var personne dans Model.People) {
    
 @ person.Name 
}

À la base, Razor vous permet de prendre le balisage HTML standard et de le mélanger avec des données provenant d'ailleurs.

Maintenant, c'est une bonne idée à ce stade de garder à l'esprit les deux parties distinctes de tout code d'interface utilisateur.

Vous avez le balisage lui-même (essentiellement HTML) et Logic – parfois appelé logique d'interface utilisateur, parfois logique métier.

Quoi qu'il en soit, cette "logique" agit comme le lien entre votre balisage (la vue) et le reste de votre application.

Dans une application MVC, la logique de l'interface utilisateur a tendance à aller dans le contrôleur où vous interagissez avec votre application et bases de données, récupérant finalement les données à renvoyer via une vue.

PeopleController.cs

 public IActionResult ListPeople () {
    // récupérer des données de votre application / base de données
    modèle var = PeopleService.ListAll ();
    return View (modèle);
}

Razor Pages – Une alternative MVC

Avec ASP.NET Core, Microsoft a introduit une autre option.

Razor Pages a supprimé les vues et les contrôleurs, les remplaçant à la place par des pages individuelles.

De manière cruciale, Razor Pages reste utilisent Razor comme syntaxe de balisage de modèle (l'indice dans le nom), ce qui signifie que vous pouvez toujours écrire votre balisage exactement de la même manière, en utilisant Model Binding, foreach boucles et expressions conditionnelles pour donner vie à vos données.

Vous souvenez-vous de la distinction entre le balisage et la logique d'interface utilisateur que nous avons faite à propos de MVC? Elle s'applique ici aussi.

Les pages Razor se composent généralement d'une page .cshtml et d'une page cshtml.cs .

La page .cshtml est où va votre balisage, laissant votre page cshtml.cs libre de prendre la logique d'interface utilisateur (agissant comme le pont entre votre balisage et le reste de votre application).

People.cshtml

 @page
@model YourApp.Pages.PersonDetails

@foreach (var personne dans Model.People)
{
    
 @ person.Name 
}

People.cshtml.cs

 classe publique PersonDetails: PageModel
{
    Liste publique  People {get; ensemble; }

    public void OnGet ()
    {
        People = PeopleService.ListAll ();
    }
}

Dans ce cas, lorsque quelqu'un accède à / Personnes la liste des personnes est récupérée et affectée à Personnes sur le modèle Razor Page.

La syntaxe Razor dans ] People.cshtml utilise une boucle foreach pour parcourir la liste People (du modèle) et afficher le nom de chaque personne.

Composants de rasoir (Hello Blazor) [19659006] Enfin, nous avons le nouveau gamin de la ville .

Blazor est une alternative à MVC et Razor Pages mais avec une torsion: il s'agit d'un framework d'application (SPA) à une seule page qui se contente d'utiliser C # au lieu de JavaScript.

Les applications Blazor peuvent s'exécuter sur le serveur ou dans le navigateur grâce à Web Assembly .

Mais où Razor s'intègre-t-il dans cette image?

Il s'avère, les composants que vous construisez pour vos applications Blazor sont officiellement appelés Razor Components et pour cause …

Vous écrivez les utilisant Razor! Voici un exemple.

 @page "/ HelloWorld"


    Voir? C'est toujours Razor!


@foreach (var personne dans People) {
    
 person.FirstName 
}

C'est toujours le rasoir auquel nous sommes habitués. Vous pouvez faire tout ce que vous pouviez avant (utiliser des boucles, des conditions et ainsi de suite).

Mais il y a une différence cruciale: avec Blazor, nous avons affaire à des composants, pas à des pages.

Composants à fond

MVC et Razor Pages se sont toujours concentrés sur la diffusion de pages entières au navigateur.

Chaque fois que l'utilisateur clique sur un bouton ou un lien, le navigateur envoie une requête au serveur, qui accède à la base de données, obtient les vues (ou pages) .cshtml Razor ), écrase les données et le balisage ensemble, puis renvoie tout le lot au navigateur (qui restitue la page entière).

Maintenant, avec Blazor, vous pouvez créer votre interface utilisateur comme une série de composants à la place.

Cela montre le fonctionnement de Blazor Web Assembly (Blazor WASM).

Tout comme une application d'une seule page créée à l'aide de JavaScript, la première demande à votre application Blazor WASM renvoie l'application entière, y compris tous les composants que vous avez définis.

Ces composants peuvent représenter n'importe quoi, d'une page entière au plus petit des composants minuscules de votre application.

Avec ces composants maintenant disponibles pour le navigateur, ils peuvent être affichés, masqués et mis à jour en réponse aux données et aux événements.

Lorsqu'elles s'exécutent dans le navigateur, les applications Blazor effectuent des appels réseau vers un backend pour récupérer et publier des données; en ce sens, les applications Blazor ressemblent davantage aux applications que vous écririez en utilisant une bibliothèque / un cadre JavaScript "moderne" comme Vue ou Angular.

C'est ce modèle de composant qui distingue vraiment la version Blazor de Razor de MVC et de Razor Pages.

Création de composants Razor

Pour permettre ce passage à une approche basée sur les composants, Blazor apporte de nouvelles fonctionnalités à la syntaxe de marquage Razor .

Voici les points saillants:

Route vers un composant

Parfois, vous souhaiterez rendre un composant lorsque quelqu'un navigue vers une route spécifique dans votre application.

Dans ce mode, votre composant agit essentiellement comme une page (ou vue) dans votre application. [19659012] @page "/ HelloWorld"

Hello World

Rendu d'un composant où vous le souhaitez

Vous n'avez pas à router directement vers un composant, vous pouvez également restituer une instance d'un composant, à l'intérieur de tout autre composant.

 @page " / "

 Bienvenue sur le blog de Progress Telerik 

Ici, nous rendons les composants PostList et ContactUs sur la page, à laquelle un utilisateur accède lorsqu'il accède à la racine de l'application.

Passing Parameters

Le rendu des composants est excellent, mais assez limité si vous devez toujours afficher les mêmes données à chaque fois.

Les paramètres vous permettent de transmettre différentes données à vos composants.

 @page "/"

 Bienvenue sur le blog de Progress Telerik 

Dans ce cas, nous transmettons des paramètres supplémentaires à PostList pour contrôler son comportement.

Pour que cela fonctionne, PostList doit déclarer ces paramètres.

PostList.razor

 Affichage des articles du blog @PostCount ...

@code {
    [Parameter]
    public int PostCount {get; set;}

    [Parameter]
    public bool ShowSummaries {get; set;}
}

Rendu du contenu enfant

Parfois, lorsque vous effectuez le rendu d'un composant, vous souhaiterez également définir le contenu de ce composant.

Ceci est expliqué plus facilement avec un exemple.

Supposons que vous créez un tableau de bord pour votre application et que vous souhaitez afficher de nombreuses informations sous la forme d'une série de panneaux. Surtout, vous voulez que tous ces panneaux partagent le même aspect et la même sensation (et peut-être un comportement tel que la capacité d'être minimisé, étendu au plein écran, etc.)

Même si vous voulez que chaque panneau se comporte et se ressemble, tous les chaque fois que vous en rendez un, vous voulez lui donner un contenu différent comme ceci:

 
    



    
 Le plus grand nombre de téléchargements jamais enregistré en un mois! 
    

         Ce mois-ci, nous avons enregistré notre plus grand nombre de téléchargements jamais enregistrés en un seul mois.
    

Les deux sont des instances d'un composant Panel mais avec un contenu complètement différent.

La question devient, comment pouvons-nous prendre ce contenu que nous avons déclaré lors de l'utilisation du composant, et le rendre?

Razor Components a une astuce dans ses manches; tout contenu déclaré entre les balises est rendu disponible via un paramètre spécial.

Panel.razor

 

    @ChildContent


@code {
    [Parameter]
    public RenderFragment ChildContent {get; set; }
}

Une fois que vous avez accès au "bit du milieu" (le contenu à l'intérieur des balises) via ChildContent vous pouvez le rendre dans le balisage de votre composant où vous le souhaitez.

Aides pour la gestion des formulaires [19659046] Les formulaires sont simples, non?

Eh bien, oui et non. En surface, les formulaires acceptent simplement certaines données et les affichent ailleurs, mais en réalité, une fois que vous mettez des problèmes tels que la validation dans le mélange, ils ont tendance à consommer une quantité disproportionnée de votre précieux temps de développement.

Blazor en a quelques-uns aides pratiques pour les formulaires, expédition avec des composants de formulaire intégrés pour faciliter l'ensemble du processus de "création de formulaire".

 
    
     Soumettre 


 @code {
    private PersonModel personModel = new PersonModel ();

    privé vide HandleSubmit () {
        // agissez ici, le formulaire est valide!
    }
}

Ici, nous avons une instance du composant EditForm de Blazor, qui est lié à personModel (une instance d'une classe PersonModel ).

La

La Le composant InputText est ensuite lié à la propriété FirstName de ce modèle.

Maintenant, en supposant que le formulaire est "valide" (plus à ce sujet dans un instant), lorsqu'un utilisateur entre un nom et soumet le formulaire, la méthode HandleSubmit sera invoquée et nous pouvons facilement accéder au prénom affiché via personModel.FirstName .

Mais qu'en est-il de la validation?

Quand vous définissez votre modèle, vous pouvez utiliser les annotations de données de Microsoft pour spécifier ce qui constitue des données valides pour votre modèle.

 public class PersonModel {
    [Required]
    chaîne publique FirstName {get; set; }
}

Nous pouvons inclure une instance du composant DataAnnotationsValidator dans notre formulaire pour indiquer que nous voulons que Blazor prenne note de ces annotations.

 
    

    
     Soumettre 

Toute tentative de soumission du formulaire sans Prénom échouera, HandleSubmit ne sera pas invoquée et les entrées qui échouent à la validation obtiendront un invalide ] Classe CSS.

Enfin, un autre grand avantage de penser aux composants au lieu des POST entiers au serveur c'est que vous pouvez facilement câbler des boutons pour faire des choses lorsque vous cliquez dessus!

 
    Basculer le message d'accueil


@if (showGreeting) {
    
 Hé! 
}

@code {
    bool privé showGreeting {get; set; }

    void privé ToggleGreeting () {
        showGreeting =! showGreeting;
    }
}

Dans MVC ou Razor Pages, cela nécessiterait soit de sortir de Razor pour utiliser un peu de JavaScript côté client, soit de faire un post complet du formulaire sur le serveur (afin qu'il puisse comprendre quoi faire avec votre interface utilisateur).

Avec Razor Components dans Blazor, c'est une tâche simple de fournir une méthode qui sera invoquée lorsque le bouton sera cliqué.

Razor a évolué

Alors, où cela nous mène-t-il?

Où Razor a toujours eu ses points forts, ce qui rend assez trivial l'affichage / masquage conditionnel des données et la liaison à vos modèles, il a désormais de nouvelles astuces grâce à Blazor.

Blazor apporte une version moderne de Razor basée sur les composants, permettant de décomposer vos fonctionnalités. en petits composants qui sont petits, ciblés et donc plus rapides à construire.

Une fois que vous avez ces composants, vous pouvez facilement les composer ensemble pour créer une fonctionnalité plus grande, ou une application entière.

La seule question qui reste à répondre? Que vas-tu construire …