Qu'est-ce que le Framework Blazor (Comment ça fonctionne pour les développeurs tutoriel)

Qu'est-ce que WebAssembly ?

Blazor WebAssembly est un framework d'application monopage (SPA) pour construire des applications web interactives côté client avec .NET. Blazor WebAssembly utilise des normes web ouvertes qui permettent le développement sans plugins ni compilation de code dans d'autres langages. Blazor WebAssembly fonctionne dans tous les navigateurs web modernes.

L'exécution de code .NET à l'intérieur des navigateurs web est rendue possible par WebAssembly. WebAssembly est un format bytecode compact optimisé pour un téléchargement rapide et des vitesses d'exécution maximales. WebAssembly est une norme web ouverte et est pris en charge dans les navigateurs web sans plugins.

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

Construire des applications natives

Nous pouvons construire des applications cliente natives en utilisant les composants d'interface utilisateur Web Blazor existants avec Blazor Hybrid. Les composants Blazor peuvent être partagés entre mobile, bureau et web tout en profitant d'un accès complet aux capacités natives du client. Nous pouvons utiliser Blazor Hybrid pour construire des applications multi-plateformes avec l'interface utilisateur d'application multi-plateforme .NET (MAUI), ou pour moderniser les applications existantes Windows Presentation Foundation (WPF) et Windows Forms.

Dans une application Blazor Hybrid, les composants Razor s'exécutent nativement sur l'appareil. Les composants s'affichent sur un contrôle Web View intégré via un canal d'interop local. Les composants ne s'exécutent pas dans le navigateur, et WebAssembly n'est pas impliqué. Les composants Razor chargent et exécutent du code rapidement, et les composants ont un accès complet aux capacités natives de l'appareil grâce à la plate-forme .NET.

Créons une application de démonstration pour mieux comprendre comment fonctionnent les 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 le modèle d'application serveur Blazor.
• Cliquez sur le bouton Suivant.
• Nommez votre application.
• 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.

class="content-img-align-center">

Plusieurs fichiers ont été créés pour vous donner une application Blazor simple 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 et le middleware de l'application.
• App.razor est le composant racine de l'application.
• Le répertoire Pages contient quelques exemples de pages web pour l'application.
• Le fichier launchSettings.json 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 cette application modèle.

Exécution de l'application Blazor

Il y a trois composants Blazor créés automatiquement dans le modèle.

Composant Accueil

class="content-img-align-center">

Cliquez sur Compteur dans le menu latéral. Vous verrez qu'en cliquant sur le bouton, le compteur est incrémenté sans changer ou recharger la page. Incrémenter dynamiquement le compteur dans une application web nécessite normalement 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 Compteur

class="content-img-align-center">

Nous pouvons voir le code du composant Compteur 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;

    // This method increments the counter value when the button is clicked
    private void IncrementCount()
    {
        currentCount++;
    }
}

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

Chaque fois que le bouton Cliquez-moi est sélectionné :

• L'événement onclick est exécuté.
• La méthode IncrementCount est appelée.
• Le currentCount est incrémenté.
• Le composant est rendu pour montrer le décompte 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éé lorsque vous avez créé le projet. Il est situé dans le dossier Pages à l'intérieur du répertoire BlazorApp créé précédemment.

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 allons utiliser est IronPDF - Génération de PDF pour .NET. Elle est facile à utiliser, inclut de nombreuses fonctionnalités et est gratuite pour le développement. Vous pouvez en savoir plus sur l'utilisation de IronPDF dans votre application Blazor en lisant la Documentation Blazor IronPDF.

Installer le package NuGet IronPDF

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

Ouvrez la Console du Gestionnaire de Packages NuGet, et écrivez la commande suivante :

Install-Package IronPdf

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

class="content-img-align-center">

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; }

    // This method calls the service to generate a PDF document from a given URL
    protected async Task GeneratePDF()
    {
        await ForecastService.GeneratePDFfromURL(URL);
    }
}

Ci-dessus, 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.

Écrivons maintenant le code côté serveur pour notre application.

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

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

namespace myBlazorAPP.Data
{
    public class WeatherForecastService
    {
        // This method generates a PDF file asynchronously from a provided URL
        public async Task GeneratePDFfromURL(string URL)
        {
            ChromePdfRenderer renderer = new ChromePdfRenderer();
            var pdfDoc = await renderer.RenderUrlAsPdfAsync(URL);
            pdfDoc.SaveAs(@"myFile.pdf");
        }
    }
}

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

namespace myBlazorAPP.Data
{
    public class WeatherForecastService
    {
        // This method generates a PDF file asynchronously from a provided URL
        public async Task GeneratePDFfromURL(string URL)
        {
            ChromePdfRenderer renderer = new ChromePdfRenderer();
            var pdfDoc = await renderer.RenderUrlAsPdfAsync(URL);
            pdfDoc.SaveAs(@"myFile.pdf");
        }
    }
}

Imports System
Imports System.Threading.Tasks
Imports IronPdf

Namespace myBlazorAPP.Data
	Public Class WeatherForecastService
		' This method generates a PDF file asynchronously from a provided URL
		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

$vbLabelText   $csharpLabel

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

class="content-img-align-center">

Collez une URL dans la zone de saisie et cliquez sur Générer le PDF. Le fichier PDF sera généré et le fichier peut être vu dans le dossier de l'application.

Ouvrez le fichier PDF comme indiqué ci-dessous.

class="content-img-align-center">

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

IronPDF est fourni par Iron Software et fait partie des produits Iron Suite d'Iron Software. Vous pouvez économiser de l'argent et acheter cinq produits pour le prix d'en acheter deux en acquérant l'intégralité de la Iron Suite.

Résumé

Blazor est un framework de création d'interfaces utilisateur web côté client interactives avec Microsoft's .NET Framework.

• Créez des interfaces utilisateur riches et interactives en utilisant C# au lieu de JavaScript.
• Partagez la logique de l'application côté serveur et côté client écrite en .NET.
• Rendez l'interface utilisateur en HTML et CSS pour une large compatibilité avec les navigateurs, y compris les navigateurs mobiles.
• Intégrez aux plateformes d'hébergement modernes, telles que Docker.
• Construisez des applications de bureau et mobiles hybrides avec .NET et Blazor.

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

• Écrivez du code en C# au lieu de JavaScript.
• Exploitez l'écosystème .NET existant des bibliothèques .NET.
• Partagez la logique de l'application entre le serveur et le client.
• Profitez des performances, de la fiabilité et de la sécurité de .NET.
• Restez productif sur Windows, Linux ou macOS avec un environnement de développement, tel que Visual Studio ou Visual Studio Code.
• Reposez-vous sur un ensemble commun de langages, frameworks et outils stables, riches en fonctionnalités et faciles à utiliser.