Razor et Blazor sont deux des frameworks d'interface utilisateur web les plus populaires pour créer des applications web dans l'environnement de développement Visual Studio. Cet article de blog examinera les similitudes et les différences entre ces deux technologies .NET basées sur leur syntaxe, leurs interactions, leurs avantages et leurs inconvénients. Il démontrera également quelques cas d'utilisation avec quelques exemples de code.

Qu'est-ce que Razor et Blazor dans ASP.NET Core ?

Razor

Razor est un langage de balisage côté serveur qui permet aux développeurs de créer des pages web de manière dynamique en utilisant le HTML et le code côté serveur .NET intégré. Razor génère des pages web à partir de Razor Pages, des fichiers de modèle de page web écrits en C# ou VB. Les pages Razor écrites avec du code VB utilisent l'extension de fichier .vbhtml, et les pages Razor écrites avec du code C# utilisent l'extension de fichier .cshtml.

Les applications web modernes ASP.NET prennent en charge Razor, et il peut être utilisé de préférence au balisage ASP.NET traditionnel pour générer des composants de vue d'application.

Blazor

Blazor est un framework d'application web qui permet aux développeurs de créer des interfaces interactives côté client en utilisant des langages de programmation .NET. Les applications web créées avec Blazor sont des applications monopage (SPA) qui s'exécutent à l'intérieur d'un client de navigateur web (et non sur un serveur web). L'exécution des applications côté navigateur est rendue possible grâce à WebAssembly, une bibliothèque de jeu d'instructions multiplateforme présente dans tous les navigateurs web modernes capables d'exécuter du code source .NET.

Avec Blazor, les développeurs peuvent créer des composants web côté client réutilisables et interactifs avec C#, HTML et CSS (sans avoir besoin d'incorporer JavaScript). De plus, comme ces composants sont écrits en C#, les développeurs ont la flexibilité de déplacer les détails d'implémentation entre le client et le serveur comme code source et bibliothèques si nécessaire.

Blazor utilise-t-il les composants Razor ?

Blazor prend entièrement en charge la syntaxe Razor. Vous pouvez créer des applications Blazor en utilisant l'ensemble des fonctionnalités de balisage complet de Razor : utilisez des boucles, des conditions, etc. Considérez l'exemple suivant.

@page "/HelloWorld"

<h1>
   Example Component
</h1>

@foreach (var person in People)
{
    <h2>@person.FirstName</h2>
}

@page "/HelloWorld"

<h1>
   Example Component
</h1>

@foreach (var person in People)
{
    <h2>@person.FirstName</h2>
}

Ce composant Razor utilise une boucle foreach pour itérer sur une collection appelée People, affichant le prénom de chaque personne à l'intérieur des balises <h2>.

Connexion entre Razor et Blazor

On peut voir clairement qu'il y a une relation entre Blazor et Razor. Après tout, le nom de Blazor lui-même est une combinaison des mots "browser" et "razor".

Razor et Blazor sont tous deux utilisés pour créer des applications web en utilisant HTML et C#. Puisqu'ils sont open-source et gratuits, les développeurs peuvent les utiliser immédiatement et sans restriction. Lors du développement d'applications web ASP.NET, nous utilisons la syntaxe Razor parce qu'elle est plus similaire à ASP.NET Core et ASP.NET MVC.

Blazor crée des interfaces utilisateur flexibles et interactives à partir d'un ou plusieurs composants écrits avec la syntaxe Razor.

C'est à ce moment-là que nous devons faire une distinction significative avec la façon dont Razor est utilisé dans Blazor : il est utilisé pour créer des composants (boutons, éléments de page, etc.), et non pour créer des pages entières.

De plus, les fichiers Razor (fichiers avec l'extension .cshtml) dans Blazor sont formellement connus sous le nom de composants Razor, et non pas de composants Blazor (bien que les deux termes soient souvent utilisés de manière interchangeable dans de nombreux cercles de développement).

Fonctionnement des Razor Pages et Blazor Server

Razor fonctionne dans les applications MVC pour servir des pages entières au navigateur.

Razor Pages en action

Lorsqu'un utilisateur clique sur un bouton ou un lien, le navigateur envoie une demande au serveur, qui accède à la base de données, récupère les vues Razor .cshtml (ou la Razor Page), combine les données et le balisage ensemble, et renvoie le tout au navigateur (réaffichant toute la page).

Blazor, d'autre part, vous permet de créer une page web entière en utilisant une série de composants plus petits écrits dans la syntaxe Razor.

Blazor en action

Cela illustre le fonctionnement de Blazor WebAssembly (Blazor WASM).

Le premier appel à votre application Blazor WASM retourne le programme complet, y compris tous les composants que vous avez définis, un peu comme une application monopage créée en utilisant JavaScript.

Maintenant que le navigateur a accès à ces éléments, il peut les afficher, les cacher et les mettre à jour en réponse aux informations et événements.

De cette manière, les applications Blazor sont plus similaires aux applications que vous développeriez en utilisant une bibliothèque/framework JavaScript "contemporain" tel que Vue ou Angular. Les applications Blazor effectuent des appels réseau vers un backend tout en s'exécutant dans le navigateur pour récupérer et envoyer des données.

Passons maintenant à la discussion sur certains avantages et inconvénients de l'application Blazor et du moteur de vue Razor.

Avantages et inconvénients de Blazor et Razor

En ce qui concerne la création d'applications web interactives basées sur le framework .NET, Blazor et Razor sont tous deux fortement favorisés. Ces technologies offrent une transition nouvelle pour utiliser C# comme langage de programmation principal pour des projets JavaScript standard.

Voici quelques avantages et inconvénients à considérer lors de la création d'applications web en utilisant Razor ou Blazor.

Avantages de Blazor

• Blazor côté client exécute directement le code .NET dans le navigateur en utilisant WebAssembly (le rendant plus rapide et moins consommateur de bande passante réseau) et fournit un contenu web dynamique.
• Il utilise la même syntaxe et logique que les langages côté serveur, le rendant compatible avec toutes les bibliothèques et outils .NET.

Inconvénients de Blazor

• Il y a peu d'outils .NET et de support de débogage disponibles pour l'exécution des applications .NET côté client utilisant Blazor.
• Les avantages en termes de performance de Blazor côté client ne sont pas présents dans l'implémentation côté serveur.

Avantages de Razor

• Razor permet l'insertion logique (conditionnelle) de code C# dans les pages web.
• Razor est extrêmement flexible et peut être utilisé pour créer une grande gamme d'applications.
• La structure de Razor est bien organisée.

Inconvénients de Razor

• JavaScript est nécessaire pour implémenter des interactions dynamiques côté client.
• Plusieurs pages autonomes peuvent être difficiles à gérer et à maintenir avec Razor.

La fonctionnalité remarquable d'IronPDF est la conversion de HTML en PDF avec IronPDF, qui conserve les mises en page et les styles. Cette fonctionnalité est idéale pour générer des PDFs à partir de contenu basé sur le web, tel que des rapports, des factures et de la documentation. Les fichiers HTML, les URL et les chaînes HTML peuvent tous être convertis en PDFs.

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();
        
        // Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");
        
        // Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");
        
        // Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();
        
        // Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");
        
        // Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");
        
        // Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

Imports IronPdf

Module Program
    Sub Main(args As String())
        Dim renderer = New ChromePdfRenderer()

        ' Convert HTML String to PDF
        Dim htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>"
        Dim pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent)
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf")

        ' Convert HTML File to PDF
        Dim htmlFilePath = "path_to_your_html_file.html" ' Specify the path to your HTML file
        Dim pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath)
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf")

        ' Convert URL to PDF
        Dim url = "http://ironpdf.com" ' Specify the URL
        Dim pdfFromUrl = renderer.RenderUrlAsPdf(url)
        pdfFromUrl.SaveAs("URLToPDF.pdf")
    End Sub
End Module

Imports IronPdf

Module Program
    Sub Main(args As String())
        Dim renderer = New ChromePdfRenderer()

        ' Convert HTML String to PDF
        Dim htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>"
        Dim pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent)
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf")

        ' Convert HTML File to PDF
        Dim htmlFilePath = "path_to_your_html_file.html" ' Specify the path to your HTML file
        Dim pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath)
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf")

        ' Convert URL to PDF
        Dim url = "http://ironpdf.com" ' Specify the URL
        Dim pdfFromUrl = renderer.RenderUrlAsPdf(url)
        pdfFromUrl.SaveAs("URLToPDF.pdf")
    End Sub
End Module

Ce programme C# démontre l'utilisation de IronPdf pour convertir du contenu HTML en documents PDF. Il prend en charge les conversions à partir d'une chaîne HTML, d'un fichier HTML et d'une URL.

Conclusion

Razor peut gérer la logique API et le templating côté serveur, mais ne peut pas gérer une logique côté client qui n'est pas basée sur JavaScript. Blazor permet aux programmeurs de gérer les fonctionnalités côté client et serveur avec juste C#. Razor est une syntaxe de balisage pour les modèles qui incorpore du code côté serveur dans le HTML. Blazor, d'autre part, est un framework SPA qui peut fonctionner soit sur Blazor WebAssembly soit sur le Blazor Serveur, selon la situation.

Découvrez IronPDF pour la manière la plus simple de créer, lire, mettre à jour et manipuler des fichiers PDF dans les applications Razor et les applications Blazor. IronPDF fait partie de la Iron Suite d'Iron Software qui contient cinq bibliothèques utiles pour créer des applications web Razor ou Blazor avec Excel, PDF, Barcodes, QR Codes, et images.

Iron Suite est disponible gratuitement pour un usage personnel. Pour plus d'informations sur l'obtention d'une licence commerciale, veuillez visiter les informations sur les licences Iron Suite.