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

Blazor ist ein ASP.NET-Framework, das von Microsoft im Jahr 2018 eingeführt wurde. Die Einführung des Blazor-Frameworks war von Vorteil, da es Entwicklern ermöglichte, Single Page Web Applications mit C# statt JavaScript zu erstellen.

Mit Blazor können Sie interaktive Web-UIs in C# erstellen, die mit WebAssembly im Browser ausgeführt werden(abgekürzt als Wasm). Blazor-Anwendungen bestehen aus wiederverwendbaren Web-UI-Komponenten, die mit C#, HTML und CSS implementiert werden. Sowohl der Client- als auch der Servercode ist in C# geschrieben, so dass Sie Code und Bibliotheken gemeinsam nutzen können.

Blazor kann Ihren client-seitigen C#-Code mit WebAssembly direkt im Browser ausführen. Da es sich um .NET handelt, das auf WebAssembly läuft, können Sie Code und Bibliotheken aus serverseitigen Teilen Ihrer Anwendung wiederverwenden.

Alternativ dazu kann Blazor Ihre Client-Logik auf dem Server ausführen. UI-Ereignisse des Clients werden mit SignalR, einem Echtzeit-Messaging-Framework, an den Server zurückgesendet. Sobald die Ausführung abgeschlossen ist, werden die erforderlichen Änderungen an der Benutzeroberfläche an den Client gesendet und in das Document Object Model eingefügt(DOM).

Was ist WebAssembly?

Blazor WebAssembly ist eine Ein-Seiten-Anwendung(SPA) framework für die Erstellung interaktiver clientseitiger Webanwendungen 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 in Webbrowsern wird durch WebAssembly ermöglicht. WebAssembly ist ein kompaktes Bytecode-Format, das für schnelle Downloads und maximale Ausführungsgeschwindigkeiten optimiert ist. WebAssembly ist ein offener Webstandard und wird von Webbrowsern ohne Plugins unterstützt.

WebAssembly-Code kann über JavaScript auf die volle Funktionalität des Browsers zugreifen. Sie ist als JavaScript-Interoperabilität bekannt und wird oft mit JavaScript interop oder JS interop abgekürzt. .NET-Code, der über WebAssembly ausgeführt wird, wird in der JavaScript-Sandbox des Browsers mit dem Schutz ausgeführt, den die Sandbox vor bösartigen Aktionen auf dem Client-Computer bietet.

Native Apps erstellen

Mit Blazor Hybrid können wir native Client-Anwendungen unter Verwendung bestehender Blazor-Web-UI-Komponenten erstellen. Blazor-Komponenten können auf Mobilgeräten, Desktops und im Web gemeinsam genutzt werden, während sie gleichzeitig vollen Zugriff auf die nativen Client-Funktionen haben. Wir können Blazor Hybrid verwenden, um plattformübergreifende Anwendungen mit .NET Multiplattform App UI zu erstellen(MAUI)oder zur Modernisierung der bestehenden Windows Presentation Foundation(WPF) und Windows Forms-Anwendungen.

In einer Blazor-Hybrid-Anwendung werden die Razor-Komponenten nativ auf dem Gerät ausgeführt. Die Komponenten werden über einen lokalen Interop-Kanal in ein eingebettetes Web View-Steuerelement gerendert. Die Komponenten werden nicht im Browser ausgeführt, und WebAssembly ist nicht beteiligt. Razor-Komponenten laden und führen Code schnell aus, und die Komponenten haben über 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-Anwendungen funktionieren.

Erstellen einer Blazor Server Anwendung

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

• Öffnen Sie Visual Studio.
• Klicken Sie auf die Schaltfläche Neues Projekt erstellen.
• Wählen Sie Blazor Server App Template.
• Klicken Sie auf die Schaltfläche Weiter.
• Nennen Sie Ihre Anwendung.
• Klicken Sie auf die Schaltfläche Weiter.
• Wählen Sie ein Ziel-Framework.

• Klicken Sie auf die Schaltfläche Projekt erstellen.

  Ein neues Projekt wird wie unten gezeigt erstellt.

  

  Es wurden mehrere Dateien erstellt, um Ihnen eine einfache Blazor-Anwendung zur Verfügung zu stellen, die sofort einsatzbereit ist.

• Program.cs ist der Einstiegspunkt für die Anwendung, der den Server startet und in dem Sie die Anwendungsdienste und Middleware konfigurieren.
• App.razor ist die Stammkomponente der Anwendung.
• Das Verzeichnis Pages enthält einige Beispiel-Webseiten für die Anwendung.

• Die Datei launchSettings.json im Verzeichnis Properties definiert verschiedene Profileinstellungen für die lokale Entwicklungsumgebung. Bei der Projekterstellung wird automatisch eine Portnummer zugewiesen und in dieser Datei gespeichert.

  Führen Sie diese Musteranwendung aus.

Ausführen der Blazor App

In der Vorlage werden automatisch drei Blazor-Komponenten erstellt.

Heimkomponente

Klicken Sie im Seitenmenü auf Zähler. Wenn Sie auf die Schaltfläche klicken, wird der Zähler erhöht, ohne dass die Seite geändert oder neu geladen wird. Das dynamische Erhöhen 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, Webanwendungen schnell und einfach zu erstellen.

Zähler-Komponente

Der Code der Komponente Counter ist in der Datei Counter.razor zu sehen, die sich im Ordner Pages unserer Lösung befindet.

@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

Eine Anfrage für /counter im Browser, wie durch die @page-Direktive oben angegeben, veranlasst die Komponente Counter, ihren Inhalt zu rendern.

Jedes Mal, wenn die Schaltfläche Klick mich ausgewählt wird:

• Das Ereignis onclick wird ausgeführt.
• Die Methode IncrementCount wird aufgerufen.
• Der currentCount wird inkrementiert.

• Die Komponente wird gerendert, um die aktualisierte Anzahl anzuzeigen.

  Jede der .razor-Dateien definiert eine Oberflächenkomponente, die wiederverwendet werden kann.

  Öffnen Sie die Datei Index.razor in Visual Studio. Die Datei Index.razor ist bereits vorhanden, da sie beim Erstellen des Projekts erstellt wurde. Sie befindet sich im Ordner Pages innerhalb des zuvor erstellten BlazorApp-Verzeichnisses.

Komponente abrufen

Es gibt eine weitere Komponente mit dem Namen "Fetch Component". Diese Komponente injiziert auch einen Dienst, der für die serverseitige Backend-Entwicklung verwendet wird. Ersetzen wir diesen Code, um ein PDF aus einer URL zu generieren, um die Möglichkeiten der Blazor-Webentwicklung besser zu verstehen.

PDF aus URL generieren

Zunächst müssen wir eine Bibliothek eines Drittanbieters zur Erzeugung von PDF-Dateien installieren. Die Bibliothek, die wir verwenden werden, istIronPDF - PDF-Erzeugung für .NET. Es ist einfach zu benutzen, enthält viele Funktionen und ist für Entwickler kostenlos. Sie können mehr über die Verwendung von IronPDF in Ihrer Blazor App erfahren, indem Sie dieIronPDF Blazor Dokumentation.

IronPDF NuGet-Paket installieren

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

Öffnen Sie die NuGet Package Manager Console und geben Sie den folgenden Befehl ein:

Install-Package IronPdf

Die Bibliothek wird wie unten gezeigt installiert.

Entfernen Sie den gesamten vorhandenen Code aus der Datei FetchData.razor 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; }
    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

Oben sehen Sie den clientseitigen Blazor-Code zur Erzeugung von PDF-Dateien. Sie definiert eine Schaltfläche und ein Eingabefeld. Das Eingabefeld ist an die URL-Variable gebunden.

Lassen Sie uns nun den serverseitigen Code für unsere Anwendung schreiben.

Öffnen Sie die Datei WeatherForecastService.cs und ersetzen Sie den gesamten vorhandenen Code durch den folgenden Codeausschnitt:

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

Führen wir unsere Anwendung aus, um die Ausgabe zu sehen.

Fügen Sie eine URL in das Eingabefeld ein und klicken Sie auf PDF generieren. Die PDF-Datei wird generiert und kann im Ordner der Anwendung eingesehen werden.

Öffnen Sie die PDF-Datei wie unten gezeigt.

Mit nur drei Codezeilen haben wir aus der URL eine PDF-Datei erzeugt. Das ist die Stärke von IronPDF.

IronPDF wird von Iron Software bereitgestellt und ist Teil vonIron Software's Iron Suite Produkte. Sie können Geld sparen und fünf Produkte zum Preis von zwei Produkten kaufen, wenn Sieerwerb der kompletten Iron Suite.

Zusammenfassung

Blazor ist ein Framework für die Erstellung interaktiver clientseitiger Web-UI mitDas .NET Framework von Microsoft.

• Erstellen Sie reichhaltige interaktive Benutzeroberflächen mit C# anstelle von JavaScript.
• Gemeinsame Nutzung von in .NET geschriebener serverseitiger und clientseitiger Anwendungslogik.
• Rendering der UI als HTML und CSS für eine breite Browserunterstützung, einschließlich mobiler Browser.
• Integration mit modernen Hosting-Plattformen, wie z. B. Docker.

• Erstellen Sie hybride Desktop- und Mobilanwendungen mit .NET und Blazor.

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

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