Die Webentwicklung hat im Laufe der Jahre einen weiten Weg zurückgelegt, und mit dem Aufkommen moderner Frameworks und Bibliotheken haben Entwickler Zugang zu leistungsstarken Werkzeugen für den Bau dynamischer und interaktiver Webseiten. Eine solche Technologie, die in den letzten Jahren erhebliche Beliebtheit erlangt hat, sind Razor Components, die Teil des Blazor-Frameworks in ASP.NET Core sind. Razor Components ermöglichen es Entwicklern, reichhaltige, clientseitige Webanwendungen mit C# und HTML zu erstellen, ohne JavaScript schreiben zu müssen. In diesem Artikel werden wir uns Razor Components ansehen und wie sie verwendet werden können, um modulare, wiederverwendbare und dynamische Webseiten zu erstellen.

Was sind Razor-Komponenten

Razor Components sind ein UI-Framework in ASP.NET Core, das es Entwicklern ermöglicht, Webseiten zu bauen, indem sie eine Kombination aus C# und HTML verwenden, mit der Möglichkeit, serverseitige Logik zu schreiben, die auf der Client-Seite ausgeführt werden kann. Razor Components sind Teil des Blazor-Frameworks, einem clientseitigen Web-UI-Framework, das C#-Code im Browser mittels WebAssembly (Wasm) oder SignalR ausführt. Razor Components bieten eine komponentenbasierte Architektur zum Bau moderner Webanwendungen, bei denen die UI in kleinere, eigenständige Komponenten unterteilt ist, die zusammengesetzt werden können, um eine vollständige Webseite zu erstellen.

Razor Components verwenden eine Markup-Sprache namens Razor-Syntax, die eine Kombination aus C# und HTML ermöglicht und eine nahtlose Integration von serverseitigem und clientseitigem Code erlaubt. Razor Components ähneln anderen komponentenbasierten UI-Frameworks wie React, Angular und Vue, mit dem wesentlichen Unterschied, dass sie in C# geschrieben werden und je nach Hosting-Modell (WebAssembly oder SignalR) auf der Server- oder Client-Seite laufen.

Vorteile von Razor Components

Razor Components bieten mehrere Vorteile für Webentwickler, darunter:

Wiederverwendbarkeit

Razor Components sind eigenständige Elemente, die leicht an mehreren Stellen innerhalb einer Webanwendung oder über verschiedene Projekte hinweg wiederverwendet werden können. Dies fördert die Wiederverwendbarkeit von Code und reduziert die Code-Duplizierung, was zu einer wartungsfähigeren und skalierbareren Webanwendung führt.

Modularität

Razor Components folgen einer komponentenbasierten Architektur, bei der die UI in kleinere Komponenten unterteilt ist, die zusammengesetzt werden können, um komplexe Webseiten zu erstellen. Dies fördert die Modularität, sodass Entwickler die UI und die Logik innerhalb einzelner Komponenten kapseln können, was die Verwaltung und Wartung des Code-Bestands erleichtert.

Seamless Integration with C#

Da Razor Components in C# geschrieben sind, können Entwickler ihre vorhandenen C#-Fähigkeiten und -Kenntnisse nutzen, um Webanwendungen zu erstellen. Dies eliminiert die Notwendigkeit, JavaScript zu lernen und zu schreiben, was für Entwickler, die bereits mit C# vertraut sind, einen erheblichen Vorteil darstellen kann.

Server-seitige und Client-seitige Ausführung

Razor Components können je nach Hosting-Modell entweder auf der Server- oder Client-Seite ausgeführt werden. Dies bietet Entwicklern Flexibilität bei der Wahl des am besten geeigneten Ausführungsmodells für ihre Anwendung, je nach Faktoren wie Leistung, Sicherheit und Benutzererfahrung.

Echtzeit-Kommunikation

Razor Components können SignalR, eine Echtzeitkommunikationsbibliothek, nutzen, um eine bidirektionale Kommunikation zwischen Client und Server herzustellen. Dies ermöglicht Echtzeit-Updates und Benachrichtigungen in Webanwendungen und bietet eine reaktionsschnelle und interaktive Benutzererfahrung.

Erweiterbarkeit

Razor Components sind hochgradig erweiterbar, sodass Entwickler ihre benutzerdefinierten Komponenten, Bibliotheken und Vorlagen erstellen können. Dies ermöglicht es Entwicklern, maßgeschneiderte Lösungen zu erstellen, die die spezifischen Anforderungen ihrer Webanwendungen erfüllen.

Einstieg in die Razor-Komponente

Um mit Razor Components zu beginnen, müssen Sie .NET Core 3.0 oder höher auf Ihrem System installiert haben. Erstellen Sie ein neues ASP.NET Core-Projekt mit der Blazor-Vorlage in Visual Studio oder der .NET Core-CLI.

dotnet new blazorserver

@page "/counter"

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>
<button @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

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

@page "/counter"

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>
<button @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

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

In diesem Beispiel haben wir eine Razor-Komponente namens "Counter" mit einem Button, der die currentCount-Variable beim Klicken erhöht. Der @code-Block wird verwendet, um den C#-Code für die Komponente zu definieren.

Erstellen einer benutzerdefinierten Razor-Komponente

Erstellen Sie im Projekt einen neuen Ordner namens "Components", um Ihre Razor Components zu speichern.

Fügen Sie im Ordner "Components" eine neue Razor-Komponenten-Datei mit der Endung ".razor" hinzu. Diese Datei enthält den C#- und HTML-Code für Ihre Komponente.

Öffnen Sie die Razor-Komponenten-Datei und definieren Sie Ihre Komponente mit Razor-Syntax. Razor-Syntax ermöglicht es Ihnen, C#- und HTML-Code in einer einzigen Datei zu kombinieren, was die Erstellung dynamischer Webseiten erleichtert. Zum Beispiel können Sie eine einfache Razor-Komponente wie folgt definieren:

<h1>Hello, World!</h1>
<p>This is a Razor Component.</p>

@code {
    // C# code for the component can be added here
}

<h1>Hello, World!</h1>
<p>This is a Razor Component.</p>

@code {
    // C# code for the component can be added here
}

Sie können Ihre Razor-Komponente nun in anderen Teilen Ihrer Webanwendung verwenden, indem Sie sie in Ihr HTML-Markup mit dem Tag-Namen der Komponente einfügen. Zum Beispiel können Sie die Komponente in Ihrer Haupt-Razor-Seite wie folgt verwenden:

<MyComponent />

<MyComponent />

Sie können Ihrer Razor-Komponente auch Daten über Komponentenparameter übergeben. Komponentenparameter ermöglichen es Ihnen, Daten von einer übergeordneten Komponente an eine untergeordnete Komponente zu übergeben, wodurch die Kommunikation zwischen Komponenten ermöglicht wird. Zum Beispiel können Sie einen Parameter in Ihrer Razor-Komponente wie folgt definieren:

@code {
    [Parameter]
    public string Message { get; set; }
}

@code {
    [Parameter]
    public string Message { get; set; }
}

Und dann den Komponentenparameter in Ihrer Razor-Komponentensklasse wie folgt verwenden:

<p>@Message</p>

<p>@Message</p>

Und von einer übergeordneten Komponente Daten an die Komponente wie folgt übergeben:

<MyComponent Message="Hello from parent component!" />

<MyComponent Message="Hello from parent component!" />

Razor Components können auch serverseitige Logik enthalten, die auf der Client-Seite ausgeführt werden kann. Zum Beispiel können Sie Verarbeitungslogik schreiben, HTTP-Anfragen stellen, Benutzerevents verarbeiten und andere serverseitige Operationen direkt aus Ihren Razor-Komponenten mit C#-Code ausführen. Dies erlaubt es Ihnen, dynamische und interaktive Webseiten zu erstellen, ohne JavaScript-Code zu schreiben.

Erstellen von wiederverwendbaren Razor-Komponenten

Einer der Vorteile von Razor Components ist die Möglichkeit, wiederverwendbare UI-Komponenten zu erstellen, die über mehrere Seiten oder Anwendungen verwendet werden können. Um eine wiederverwendbare Komponente zu erstellen, können Sie eine neue ".razor"-Datei im "Shared"-Ordner Ihres Projekts erstellen.

Zum Beispiel nehmen wir an, wir möchten eine Komponente erstellen, die eine Liste von Büchern anzeigt. Wir können eine neue BookList.razor-Datei im "Shared"-Ordner erstellen, wie zum Beispiel:

Wir können die Razor-Komponente wie folgt definieren:

@typeparam TItem

@foreach (var book in Books)
{
    <p>@book.Title by @book.Author</p>
}

@code {
    [Parameter]
    public List<TItem> Books { get; set; }
}

@typeparam TItem

@foreach (var book in Books)
{
    <p>@book.Title by @book.Author</p>
}

@code {
    [Parameter]
    public List<TItem> Books { get; set; }
}

In diesem Beispiel haben wir eine Komponente namens BookList, die eine Liste von "Book"-Objekten als Razor-Parameter übernimmt. Die @foreach-Schleife wird verwendet, um durch die Liste zu iterieren und jeden Buchtitel und Autor anzuzeigen.

Im nächsten Abschnitt werden wir erkunden, wie IronPDF mit Razor Components verwendet werden kann, um PDF-Dateien aus Webanwendungen zu erstellen.

Verwendung von IronPDF mit Razor Components

IronPDF ist eine C#-Bibliothek, die es Entwicklern ermöglicht, PDF-Dateien aus HTML, CSS und JavaScript zu erstellen. Es basiert auf Chromium, dem Open-Source-Browser, der Google Chrome antreibt. Mit IronPDF können Entwickler Razor-Komponenten leicht in HTML umwandeln und daraus PDF-Dateien erstellen.

IronPDF eignet sich hervorragend für die Konvertierung von HTML in PDF und stellt sicher, dass das Layout und der Stil intakt bleiben. Dies ist besonders nützlich für die Generierung von PDFs aus webbasiertem Inhalt wie Berichten, Rechnungen und Dokumentationen. HTML-Dateien, URLs und HTML-Strings können problemlos in PDF-Dateien umgewandelt werden.

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();
        
        // 1. 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");
        
        // 2. 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");
        
        // 3. 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();
        
        // 1. 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");
        
        // 2. 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");
        
        // 3. 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()
        
        ' 1. 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")
        
        ' 2. 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")
        
        ' 3. 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()
        
        ' 1. 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")
        
        ' 2. 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")
        
        ' 3. 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

Installation von IronPDF

Um IronPDF mit Razor-Komponenten zu verwenden, müssen wir zunächst das IronPDF NuGet-Paket installieren. Führen Sie dazu die folgenden Schritte aus:

1. Öffnen Sie Ihr Projekt in Visual Studio.
2. Klicken Sie mit der rechten Maustaste auf das Projekt und wählen Sie "NuGet-Pakete verwalten".
3. Suchen Sie nach "IronPDF" und wählen Sie das "IronPDF-Paket".
4. Klicken Sie auf "Installieren", um das Paket zu installieren.

Nach der Installation des IronPDF NuGet-Pakets können wir es in unserer Razor Components-Anwendung verwenden.

Sobald das Paket installiert ist, können Sie eine neue PDF-Datei aus einer Razor-Komponente mit der IronPdf.ChromePdfRenderer-Klasse erstellen.

Um eine PDF-Datei in ASP.NET Core Razor-Komponenten zu erstellen, können Sie den HTML-Syntax-String, die HTML-Datei oder die URL an die IronPdf.ChromePdfRenderer-Methode übergeben. Zum Beispiel nehmen wir an, wir möchten eine PDF-Datei mit der Erhöhung eines Zählers erstellen.

var renderer = new IronPdf.ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" + currentCount + "</h1>");
pdf.SaveAs("myPdf" + currentCount + ".pdf");

var renderer = new IronPdf.ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" + currentCount + "</h1>");
pdf.SaveAs("myPdf" + currentCount + ".pdf");

Dim renderer = New IronPdf.ChromePdfRenderer()
Dim pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" & currentCount & "</h1>")
pdf.SaveAs("myPdf" & currentCount & ".pdf")

Dim renderer = New IronPdf.ChromePdfRenderer()
Dim pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" & currentCount & "</h1>")
pdf.SaveAs("myPdf" & currentCount & ".pdf")

In diesem Beispiel erstellen wir eine neue Instanz der ChromePdfRenderer. Dann erstellen wir eine neue Instanz der PdfDocument-Klasse und übergeben einen String an die RenderHtmlAsPdf-Methode. Schließlich speichern wir die resultierende PDF-Datei auf der Festplatte mit der PdfDocument.SaveAs-Methode.

In diesem Beispiel haben wir unsere Counter-Komponente modifiziert. Wir haben die onClick-Funktion eines Zähler-Buttons modifiziert, die beim Klicken ein PDF erstellt, das die Zählung des Counters enthält.

Abschluss

In diesem Artikel haben wir untersucht, wie Razor Components mit IronPDF verwendet werden, um PDF-Dateien aus Webanwendungen zu erstellen. Wir haben die Grundlagen von Razor Components behandelt, wie man IronPDF installiert und verwendet und Codebeispiele bereitgestellt, um Ihnen den Einstieg zu erleichtern.

Razor Components und IronPDF sind leistungsstarke Werkzeuge, die verwendet werden können, um robuste und funktionsreiche Webanwendungen zu erstellen. Durch die Kombination dieser Technologien können Entwickler Webanwendungen erstellen, die sowohl hoch funktional als auch visuell ansprechend sind.

IronPDF kann auch verwendet werden, um Razor-Seiten und URLs in PDFs umzuwandeln sowie PDF-Dokumente zu lesen, zu erstellen und zu bearbeiten. IronPDF ermöglicht sogar eine granularere PDF-Kontrolle wie das Hinzufügen von Kopf- und Fußzeilen, Seitennummern, digitalen Signaturen, Passwörtern und erweiterte PDF-Bearbeitungsfunktionen zu bestehenden oder neu erstellten PDF-Dokumenten. Es ist kostenlos für die Entwicklung, erfordert aber eine kostenlose Testlizenz oder eine kommerzielle Lizenz für die Produktion.