Was ist das Blazor-Framework (Wie es für Entwickler funktioniert Tutorial)

Was ist WebAssembly?

Blazor WebAssembly ist ein Single-Page-App (SPA) Framework zum Erstellen interaktiver clientseitiger Web-Apps mit .NET. Blazor WebAssembly verwendet offene Webstandards, die eine Entwicklung ohne Plugins oder Neukompilierung von Code in andere Sprachen ermöglichen. Blazor WebAssembly funktioniert in allen modernen Webbrowsern.

Die Ausführung von .NET-Code innerhalb von Webbrowsern wird durch WebAssembly möglich gemacht. WebAssembly ist ein kompaktes Bytecode-Format, das für schnellen Download und maximale Ausführungsgeschwindigkeiten optimiert ist. WebAssembly ist ein offener Webstandard und wird in Webbrowsern ohne Plugins unterstützt.

WebAssembly-Code kann über JavaScript auf die vollständige Funktionalität des Browsers zugreifen. Bekannt als JavaScript-Interoperabilität, wird es oft verkürzt zu JavaScript interop oder JS interop. Über WebAssembly ausgeführter .NET-Code läuft in der JavaScript-Sandbox des Browsers mit dem Schutz, den die Sandbox vor böswilligen Aktionen auf der Client-Maschine bietet.

Native Anwendungen erstellen

Wir können native Client-Apps mit bestehenden Blazor-Web-UI-Komponenten mit Blazor Hybrid erstellen. Blazor-Komponenten können plattformübergreifend auf Mobilgeräten, Desktops und im Web verwendet werden, während sie den vollen Zugriff auf die nativen Client-Funktionen nutzen. Wir können Blazor Hybrid verwenden, um plattformübergreifende Apps mit .NET Multi-platform App UI (MAUI) zu erstellen oder um vorhandene Windows Presentation Foundation (WPF) und Windows Forms-Apps zu modernisieren.

In einer Blazor-Hybrid-App laufen Razor-Komponenten nativ auf dem Gerät. Komponenten rendern über einen eingebetteten Web View-Kontrollpunkt durch einen lokalen Interop-Kanal. Komponenten laufen nicht im Browser und WebAssembly ist nicht beteiligt. Razor-Komponenten laden und führen Code schnell aus, und Komponenten haben durch die .NET-Plattform vollen Zugriff auf die nativen Funktionen des Geräts.

Lassen Sie uns eine Demo-Anwendung erstellen, um besser zu verstehen, wie Blazor-Apps funktionieren.

Erstellen einer Blazor Server Anwendung

Um unsere erste Blazor-App zu erstellen, müssen wir ein neues Visual Studio-Projekt erstellen.

• Öffnen Sie Visual Studio.
• Klicken Sie auf den Button Neues Projekt erstellen.
• Wählen Sie Blazor Server App Template.
• Klicken Sie auf den Button Weiter.
• Benennen Sie Ihre Anwendung.
• Klicken Sie auf den Button Weiter.
• Wählen Sie ein Ziel-Framework aus.
• Klicken Sie auf den Button Projekt erstellen.

Ein neues Projekt wird wie unten gezeigt erstellt.

Es wurden mehrere Dateien erstellt, um Ihnen eine einfache Blazor-App bereitzustellen, die bereit zur Ausführung ist.

• Program.cs ist der Einstiegspunkt für die App, der den Server startet und in dem Sie die App-Dienste und Middleware konfigurieren.
• App.razor ist die Hauptkomponente der App.
• Das Verzeichnis Pages enthält einige Beispiel-Webseiten für die App.
• Die Datei launchSettings.json im Verzeichnis Properties definiert verschiedene Profileinstellungen für die lokale Entwicklungsumgebung. Eine Portnummer wird automatisch bei der Projekterstellung zugewiesen und in dieser Datei gespeichert.

Führen Sie diese Vorlage-App aus.

Ausführen der Blazor App

Drei Blazor-Komponenten werden automatisch in der Vorlage erstellt.

Home-Komponente

Klicken Sie im Seitenmenü auf Zähler. Sie werden sehen, dass das Klicken auf den Button den Zähler erhöht, ohne dass die Seite verändert oder neu geladen wird. Die dynamische Erhöhung des Zählers in einer Webanwendung erfordert normalerweise JavaScript, aber mit Blazor können wir dies mit C# erreichen. Dies ist der Grund, warum ASP.NET-Entwickler Blazor so sehr mögen. Es hilft .NET-Entwicklern, Web-Apps schnell und einfach zu erstellen.

Zähler-Komponente

Wir können den Code der Zählerkomponente in der Counter.razor Datei im Pages Ordner unserer Lösung sehen.

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

Eine Anfrage an /counter im Browser, wie durch die @page Direktive oben spezifiziert, veranlasst die Zählerkomponente, ihren Inhalt darzustellen.

Jedes Mal, wenn der Click me Button ausgewählt wird:

• Das onclick Ereignis wird ausgeführt.
• Die IncrementCount Methode wird aufgerufen.
• Der currentCount wird erhöht.
• Die Komponente wird gerendert, um den aktualisierten Zähler zu zeigen.

Jede der .razor Dateien definiert eine UI-Komponente, die wiederverwendet werden kann.

Öffnen Sie die Index.razor Datei in Visual Studio. Die Index.razor Datei existiert bereits, da sie bei der Erstellung des Projekts erstellt wurde. Sie befindet sich im Pages Ordner im BlazorApp Verzeichnis, das zuvor erstellt wurde.

PDF aus URL generieren

Zuerst müssen wir eine Drittanbieter-Bibliothek zur PDF-Dateigenerierung installieren. Die Bibliothek, die wir verwenden werden, ist IronPDF - PDF Generation for .NET. Es ist einfach zu verwenden, enthält viele Funktionen und ist kostenlos für die Entwicklung. Sie können mehr darüber erfahren, wie Sie IronPDF in Ihrer Blazor-App verwenden, indem Sie die IronPDF Blazor Dokumentation lesen.

IronPDF-NuGet-Paket installieren

Wir können das IronPDF NuGet-Paket in der Blazor-WebAssembly-App ähnlich wie in der normalen ASP.NET Core-Anwendung installieren.

Öffnen Sie die NuGet-Paket-Manager-Konsole und schreiben Sie den folgenden Befehl:

Install-Package IronPdf

Die Bibliothek wird wie unten gezeigt installiert.

Entfernen Sie den gesamten vorhandenen Code aus der FetchData.razor Datei und fügen Sie das folgende Codebeispiel hinzu:

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

Oben ist der Client-seitige Blazor-Code zum Generieren von PDF-Dateien. Es definiert einen Button und ein Eingabefeld. Das Eingabefeld ist an die URL Variable gebunden.

Jetzt schreiben wir den Servercode für unsere App.

Öffnen Sie die Datei WeatherForecastService.cs und ersetzen Sie den gesamten vorhandenen Code mit dem folgenden Code-Ausschnitt:

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

$vbLabelText   $csharpLabel

Lassen Sie unsere Anwendung ausführen, um die Ausgabe zu sehen.

Fügen Sie eine URL in das Eingabefeld ein und klicken Sie auf PDF generieren. Die PDF-Datei wird erstellt und kann im App-Ordner angezeigt werden.

Öffnen Sie die PDF-Datei wie unten gezeigt.

Wir haben ein PDF von der URL mit nur drei Codezeilen generiert. Dies ist die Kraft von IronPDF.

IronPDF wird von Iron Software bereitgestellt und ist Teil der Iron Suite Produkte von Iron Software. Sie können Geld sparen und fünf Produkte zum Preis von zwei von ihnen kaufen, indem Sie das vollständige Iron Suite erwerben.

Zusammenfassung

Blazor ist ein Framework zum Erstellen interaktiver clientseitiger Web-UIs mit Microsofts .NET Framework.

• Erstellen Sie reichhaltige interaktive UIs mit C# anstelle von JavaScript.
• Teilen Sie serverseitige und clientseitige Anwendungslogik, die in .NET geschrieben wurde.
• Rendern Sie die UI als HTML und CSS für breite Browserunterstützung, einschließlich mobiler Browser.
• Integrieren Sie mit modernen Hosting-Plattformen wie Docker.
• Erstellen Sie hybride Desktop- und mobile Apps mit .NET und Blazor.

Die Verwendung von .NET für die clientseitige Webentwicklung bietet folgende Vorteile:

• Schreiben Sie Code in C# anstelle von JavaScript.
• Nutzen Sie das bestehende .NET-Ökosystem von .NET-Bibliotheken.
• Teilen Sie Anwendungscode für Server und Client.
• Profitieren Sie von der Leistung, Zuverlässigkeit und Sicherheit von .NET.
• Bleiben Sie produktiv auf Windows, Linux oder macOS mit einer Entwicklungsumgebung wie Visual Studio oder Visual Studio Code.
• Bauen Sie auf einem gemeinsamen Satz von Sprachen, Frameworks und Tools, die stabil, funktionsreich und einfach zu verwenden sind.