Razor-Komponenten : Wie es für Entwickler funktioniert

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:

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

In diesem Beispiel haben wir eine Razor-Komponente namens "Counter" mit einem Button, der die Variable currentCount bei jedem Klick 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
}

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 />

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

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

<p>@Message</p>

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

<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 folgt:

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

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 die Liste zu durchlaufen 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");
    }
}

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 erstellen, indem Sie die IronPdf.ChromePdfRenderer-Klasse verwenden.

Um eine PDF-Datei in ASP.NET Core Razor Components zu erstellen, können Sie den HTML-Syntaxistring, die HTML-Datei oder 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");

In diesem Beispiel erstellen wir eine neue Instanz des 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 Counter-Buttons so modifiziert, dass beim Klicken eine PDF erstellt wird, die 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.