Qu'est-ce que le framework Blazor (Tutoriel sur son fonctionnement pour les développeurs)

Blazor est un Framework .NET lancé par Microsoft en 2018. Le lancement du framework Blazor était avantageux car il permettait aux développeurs de créer des applications Web à page unique en utilisant C# au lieu de JavaScript.

Blazor vous permet de créer des interfaces web interactives en C# qui s'exécutent dans le navigateur avec WebAssembly(abrégé en Wasm). Les applications Blazor sont composées de composants d'interface utilisateur Web réutilisables, mis en œuvre à l'aide de C#, HTML et CSS. Le code du client et du serveur est écrit en C#, ce qui permet de partager le code et les bibliothèques.

Blazor peut exécuter votre code C# côté client directement dans le navigateur à l'aide de WebAssembly. Comme il s'agit de .NET fonctionnant sur WebAssembly, vous pouvez réutiliser le code et les bibliothèques des parties côté serveur de votre application.

Blazor peut également exécuter votre logique client sur le serveur. Les événements de l'interface utilisateur du client sont renvoyés au serveur à l'aide de SignalR, un cadre de messagerie en temps réel. Une fois l'exécution terminée, les modifications requises de l'interface utilisateur sont envoyées au client et fusionnées dans le modèle d'objet du document(DOM).

Qu'est-ce que WebAssembly ?

Blazor WebAssembly est une application à page unique(SPA) pour créer des applications web interactives côté client avec .NET. Blazor WebAssembly utilise des normes web ouvertes qui permettent un développement sans plugins ni recompilation du code dans d'autres langages. Blazor WebAssembly fonctionne dans tous les navigateurs modernes.

L'exécution du code .NET dans les navigateurs web est rendue possible par WebAssembly. WebAssembly est un format compact de bytecode optimisé pour un téléchargement rapide et une vitesse d'exécution maximale. WebAssembly est un standard web ouvert et est supporté par les navigateurs web sans plugins.

Le code WebAssembly peut accéder à toutes les fonctionnalités du navigateur via JavaScript. Connu sous le nom d'interopérabilité JavaScript, il est souvent abrégé en JavaScript interop ou JS interop. le code .NET exécuté via WebAssembly s'exécute dans le bac à sable JavaScript du navigateur avec les protections que le bac à sable fournit contre les actions malveillantes sur la machine cliente.

Créer des applications natives

Nous pouvons créer des applications clientes natives en utilisant les composants Blazor Web UI existants avec Blazor Hybrid. Les composants Blazor peuvent être partagés entre les mobiles, les ordinateurs de bureau et le web, tout en bénéficiant d'un accès complet aux capacités des clients natifs. Nous pouvons utiliser Blazor Hybrid pour créer des applications multiplateformes avec .NET Multi-platform App UI(MAUI)ou pour moderniser les applications existantes de Windows Presentation Foundation(WPF) et les applications Windows Forms.

Dans une application hybride Blazor, les composants Razor s'exécutent nativement sur l'appareil. Les composants effectuent un rendu vers un contrôle Web View intégré par le biais d'un canal interopératif local. Les composants ne s'exécutent pas dans le navigateur et WebAssembly n'est pas impliqué. Les composants Razor chargent et exécutent le code rapidement, et les composants ont un accès complet aux capacités natives de l'appareil grâce à la plateforme .NET.

Créons une application de démonstration pour mieux comprendre le fonctionnement des applications Blazor.

Créer une application serveur Blazor

Pour créer notre première application Blazor, nous devons créer un nouveau projet Visual Studio.

• Ouvrez Visual Studio.
• Cliquez sur le bouton Créer un nouveau projet.
• Sélectionnez Blazor Server App Template.
• Cliquez sur le bouton Suivant.
• Nommez votre demande.
• Cliquez sur le bouton Suivant.
• Sélectionnez un cadre cible.

• Cliquez sur le bouton Créer un projet.

  Un nouveau projet sera créé comme indiqué ci-dessous.

  

  Plusieurs fichiers ont été créés pour vous donner une application Blazor simple et prête à fonctionner.

• Program.cs est le point d'entrée de l'application qui démarre le serveur et où vous configurez les services de l'application et l'intergiciel.
• App.razor est le composant racine de l'application.
• Le répertoire Pages contient des exemples de pages web pour l'application.

• Le fichier launchSettings.json situé dans le répertoire Properties définit différents paramètres de profil pour l'environnement de développement local. Un numéro de port est automatiquement attribué lors de la création du projet et enregistré dans ce fichier.

  Exécutez ce modèle d'application.

Exécution de l'application Blazor

Trois composants Blazor sont automatiquement créés dans le modèle.

Composant domestique

Cliquez sur Compteur dans le menu latéral. Vous constaterez qu'en cliquant sur le bouton, le compteur s'incrémente sans que la page ne soit modifiée ou rechargée. L'incrémentation dynamique du compteur dans une application web nécessite normalement l'utilisation de JavaScript, mais avec Blazor, nous pouvons y parvenir en utilisant C#. C'est la raison pour laquelle les développeurs ASP.NET apprécient tant Blazor. Il aide les développeurs .NET à créer des applications web rapidement et facilement.

Composant de comptoir

Nous pouvons voir le code du composant Counter dans le fichier Counter.razor situé dans le dossier Pages de notre solution.

@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Friend page "/counter" (Of h1) Counter</h1> (Of p) Current count
	Inherits currentCount</p> <button class="btn btn-primary" onclick="IncrementCount"> Click [me]</button> code

	Private currentCount As Integer = 0

	Private Sub IncrementCount()
		currentCount += 1
	End Sub
End Class

Une requête pour /counter dans le navigateur, comme spécifié par la directive @page en haut, provoque le rendu du contenu du composant Counter.

Chaque fois que le bouton Click me est sélectionné :

• L'événement onclick est exécuté.
• La méthode IncrementCount est appelée.
• Le compte courant est incrémenté.

• Le composant est rendu pour afficher le nombre mis à jour.

  Chacun des fichiers .razor définit un composant de l'interface utilisateur qui peut être réutilisé.

  Ouvrez le fichier Index.razor dans Visual Studio. Le fichier Index.razor existe déjà car il a été créé lors de la création du projet. Il est situé dans le dossier Pages à l'intérieur du répertoire BlazorApp créé précédemment.

Composant Fetch

Il existe un autre composant appelé "Fetch Component". Ce composant injecte également un service utilisé pour le développement côté serveur. Remplaçons ce code pour générer un PDF à partir d'une URL afin de mieux comprendre la puissance du développement web Blazor.

Générer un PDF à partir d'une URL

Tout d'abord, nous devons installer une bibliothèque tierce pour générer des fichiers PDF. La bibliothèque que nous utiliserons estIronPDF - Génération de PDF pour .NET. Il est facile à utiliser, comprend de nombreuses fonctionnalités et est gratuit pour le développement. Vous pouvez en savoir plus sur l'utilisation d'IronPDF dans votre application Blazor en lisant la sectionDocumentation IronPDF Blazor.

Installer le paquet NuGet IronPDF

Nous pouvons également installer le package NuGet IronPDF dans l'app Blazor WebAssembly de manière similaire à l'application ASP.NET Core normale.

Ouvrez la console du gestionnaire de paquets NuGet et écrivez la commande suivante :

Install-Package IronPdf

La bibliothèque sera installée comme indiqué ci-dessous.

Supprimez tout le code existant du fichier FetchData.razor et ajoutez l'exemple de code suivant :

@page "/fetchdata"

@using myBlazorAPP.Data
@inject WeatherForecastService ForecastService

<h1>Generate PDF FROM URL</h1>
<p>This component demonstrates generating PDF from URL using IronPDF in Blazor Application</p>
<input type="text" @bind="URL" placeholder="URL HERE..."/>
<button @onclick="generatePDF" > Generate PDF </button>

@code {

    private string URL { get; set; }
    protected async Task generatePDF()
    {
        await ForecastService.GeneratePDFfromURL(URL);
    }
}

@page "/fetchdata"

@using myBlazorAPP.Data
@inject WeatherForecastService ForecastService

<h1>Generate PDF FROM URL</h1>
<p>This component demonstrates generating PDF from URL using IronPDF in Blazor Application</p>
<input type="text" @bind="URL" placeholder="URL HERE..."/>
<button @onclick="generatePDF" > Generate PDF </button>

@code {

    private string URL { get; set; }
    protected async Task generatePDF()
    {
        await ForecastService.GeneratePDFfromURL(URL);
    }
}

'INSTANT VB TODO TASK: The following line could not be converted:
page "/fetchdata" [using] myBlazorAPP.Data inject WeatherForecastService ForecastService (Of h1) Generate PDF FROM URL</h1> (Of p) This component demonstrates generating PDF from URL using IronPDF in Blazor Application</p> <input type="text" bind="URL" placeholder="URL HERE..."/> <button onclick="generatePDF" > Generate PDF </button> code
If True Then

	private String URL {get;set;}
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	protected async Task generatePDF()
'	{
'		await ForecastService.GeneratePDFfromURL(URL);
'	}
End If

Ci-dessus se trouve le code Blazor côté client pour générer des fichiers PDF. Il définit un bouton et une zone de saisie. Le champ de saisie est lié à la variable URL.

Maintenant, écrivons le code côté serveur de notre application.

Ouvrez le fichier WeatherForecastService.cs et remplacez tout le code existant par l'extrait de code suivant :

using System;
using System.Linq;
using System.Threading.Tasks;
using IronPdf;

namespace myBlazorAPP.Data
{
    public class WeatherForecastService
    {
        public async Task GeneratePDFfromURL (string URL)
        {
            ChromePdfRenderer renderer = new ChromePdfRenderer();
            var pdfDoc = await renderer.RenderUrlAsPdfAsync(URL);
            pdfDoc.SaveAs(@"myFile.pdf");
        }
    }
}

using System;
using System.Linq;
using System.Threading.Tasks;
using IronPdf;

namespace myBlazorAPP.Data
{
    public class WeatherForecastService
    {
        public async Task GeneratePDFfromURL (string URL)
        {
            ChromePdfRenderer renderer = new ChromePdfRenderer();
            var pdfDoc = await renderer.RenderUrlAsPdfAsync(URL);
            pdfDoc.SaveAs(@"myFile.pdf");
        }
    }
}

Imports System
Imports System.Linq
Imports System.Threading.Tasks
Imports IronPdf

Namespace myBlazorAPP.Data
	Public Class WeatherForecastService
		Public Async Function GeneratePDFfromURL(ByVal URL As String) As Task
			Dim renderer As New ChromePdfRenderer()
			Dim pdfDoc = Await renderer.RenderUrlAsPdfAsync(URL)
			pdfDoc.SaveAs("myFile.pdf")
		End Function
	End Class
End Namespace

Exécutons notre application pour voir le résultat.

Collez une URL dans le champ de saisie et cliquez sur Générer un PDF. Le fichier PDF sera généré et pourra être consulté dans le dossier de l'application.

Ouvrez le fichier PDF comme indiqué ci-dessous.

Nous avons généré un PDF à partir de l'URL avec seulement trois lignes de code. C'est là toute la puissance d'IronPDF.

IronPDF est fourni par Iron Software et fait partie deProduits de la Iron Suite d'Iron Software. Vous pouvez économiser de l'argent et acheter cinq produits pour le coût d'achat de deux d'entre eux enacquérir l'ensemble de l'Iron Suite.

Résumé

Blazor est un cadre de travail permettant de construire des interfaces utilisateur web interactives côté client avecLe .NET Framework de Microsoft.

• Créez des interfaces utilisateur interactives riches en utilisant C# au lieu de JavaScript.
• Partagez la logique des applications côté serveur et côté client écrites en .NET.
• Rendre l'interface utilisateur sous forme de HTML et CSS pour une prise en charge étendue des navigateurs, y compris les navigateurs mobiles.
• Intégrer les plateformes d'hébergement modernes, telles que Docker.

• Créez des applications mobiles et de bureau hybrides avec .NET et Blazor.

  L'utilisation de .NET pour le développement web côté client offre les avantages suivants :

• Écrire du code en C# plutôt qu'en JavaScript.
• Tirer parti de l'écosystème existant de bibliothèques .NET.
• Partager la logique de l'application entre le serveur et le client.
• Bénéficiez des performances, de la fiabilité et de la sécurité de .NET.
• Restez productif sous Windows, Linux ou macOS grâce à un environnement de développement tel que Visual Studio ou Visual Studio Code.
• S'appuyer sur un ensemble commun de langages, de cadres et d'outils stables, riches en fonctionnalités et faciles à utiliser.