Razor-Komponenten : Wie es für Entwickler funktioniert

Die Webentwicklung hat sich im Laufe der Jahre stark weiterentwickelt, und mit dem Aufkommen moderner Frameworks und Bibliotheken haben Entwickler Zugang zu leistungsstarken Tools für die Erstellung dynamischer und interaktiver Webseiten. Eine solche Technologie, die in den letzten Jahren stark an Popularität gewonnen hat, sind Razor Components, die Teil des Blazor-Frameworks in ASP.NET Core sind. Razor Components ermöglicht es Entwicklern, mit C# und HTML umfangreiche clientseitige Webanwendungen zu erstellen, ohne JavaScript schreiben zu müssen. In diesem Artikel befassen wir uns mit Razor Components und wie sie zur Erstellung modularer, wiederverwendbarer und dynamischer Webseiten verwendet werden können.

Was sind Razor-Komponenten?

Razor-Komponenten sind ein UI-Framework in ASP.NET Core, das Entwicklern ermöglicht, Webseiten unter Verwendung einer Kombination aus C# und HTML zu erstellen, wobei die Möglichkeit besteht, serverseitige Logik zu schreiben, die auf der Client-Seite ausgeführt werden kann. Razor-Komponenten sind Teil des Blazor-Frameworks, welches ein clientseitiges Web-UI-Framework ist, das C#-Code im Browser unter Verwendung von WebAssembly (Wasm) oder SignalR ausführt. Razor Components bietet eine komponentenbasierte Architektur für die Erstellung moderner Webanwendungen, bei der die Benutzeroberfläche in kleinere, in sich geschlossene Komponenten aufgeteilt ist, die zu einer vollständigen Webseite zusammengesetzt werden können.

Razor-Komponenten verwenden eine Auszeichnungssprache namens Razor-Syntax, eine Kombination aus C# und HTML, die eine nahtlose Integration von serverseitigem und clientseitigem Code ermöglicht. Razor-Komponenten sind anderen komponentenbasierten UI-Frameworks wie React, Angular und Vue ähnlich, jedoch mit dem entscheidenden Unterschied, dass sie in C# geschrieben sind und je nach Hosting-Modell (WebAssembly oder SignalR) auf der Server- oder Clientseite laufen.

Vorteile der Razor-Komponenten

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

Wiederverwendbarkeit

Razor Components sind in sich geschlossene Komponenten, die leicht an mehreren Stellen innerhalb einer Webanwendung oder in verschiedenen Projekten wiederverwendet werden können. Dies fördert die Wiederverwendbarkeit des Codes und verringert die Duplizierung von Code, was zu besser wartbaren und skalierbaren Webanwendungen führt.

Modularität

Razor Components folgt einer komponentenbasierten Architektur, bei der die Benutzeroberfläche in kleinere Komponenten aufgeteilt ist, die zusammengesetzt werden können, um komplexe Webseiten zu erstellen. Dies fördert die Modularität und ermöglicht es den Entwicklern, UI und Logik in einzelnen Komponenten zu kapseln, was die Verwaltung und Wartung der Codebasis erleichtert.

Nahtlose Integration mit C#

Da Razor Components in C# geschrieben ist, können Entwickler ihre vorhandenen C#-Fähigkeiten und -Kenntnisse für die Erstellung von Webanwendungen nutzen. Dadurch entfällt die Notwendigkeit, JavaScript zu erlernen und zu schreiben, was für Entwickler, die bereits mit C# vertraut sind, ein großer Vorteil sein kann.

Serverseitige und clientseitige Ausführung

Razor-Komponenten können je nach Hosting-Modell entweder auf der Server- oder der Client-Seite ausgeführt werden. Dies gibt Entwicklern die Flexibilität, das am besten geeignete Ausführungsmodell für ihre Anwendung zu wählen, abhängig von Faktoren wie Leistung, Sicherheit und Benutzerfreundlichkeit.

Kommunikation in Echtzeit

Razor Components kann SignalR, eine Echtzeit-Kommunikationsbibliothek, verwenden, 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 in hohem Maße erweiterbar, so dass Entwickler ihre eigenen Komponenten, Bibliotheken und Vorlagen erstellen können. Dies ermöglicht es Entwicklern, maßgeschneiderte Lösungen zu erstellen, die den spezifischen Anforderungen ihrer Webanwendungen entsprechen.

Erste Schritte mit der Razor-Komponente

Um mit Razor Components zu arbeiten, 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 razorcomponent

    dotnet new razorcomponent

    @page "/counter"
    Counter
    Counter
    < role="status">Current count: @currentCount
    Click me
    @code {
        private int currentCount = 0;
        private void IncrementCount()
        {
        currentCount++;
    }
    }

    @page "/counter"
    Counter
    Counter
    < role="status">Current count: @currentCount
    Click me
    @code {
        private int currentCount = 0;
        private void IncrementCount()
        {
        currentCount++;
    }
    }

page "/counter" Counter Counter < role="status"> Current count: currentCount Click ReadOnly Property code() As [me]
		private Integer currentCount = 0
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'		private void IncrementCount()
'		{
'		currentCount++;
'	}
End Property

In diesem Beispiel haben wir eine Razor-Komponente namens „Counter“ mit einem Button, der die Variable currentCount erhöht, wenn er geklickt wird. 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 mit dem Namen "Components", um Ihre Razor-Komponenten zu speichern.

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

Öffnen Sie die Razor-Komponentendatei und definieren Sie Ihre Komponente mit der Razor-Syntax. Mit der Razor-Syntax können Sie C#- und HTML-Code in einer einzigen Datei kombinieren, was die Erstellung dynamischer Webseiten erleichtert. Sie können zum Beispiel eine einfache Razor-Komponente wie folgt definieren:

    Hello, World!
    This is a Razor Component.

    @code {
    // C# code for the component
    }

    Hello, World!
    This is a Razor Component.

    @code {
    // C# code for the component
    }

Hello, World(Not This is a) ReadOnly Property Component_code() As Razor Implements Component.code
	' C# code for the component
End Property

Sie können Ihre Razor-Komponente nun in anderen Teilen Ihrer Webanwendung verwenden, indem Sie sie in Ihr HTML-Markup einfügen und dabei den Tag-Namen der Komponente verwenden. Sie können den Tag zum Beispiel so in Ihrer Razor-Hauptseite verwenden:

Sie können auch Daten an Ihre Razor-Komponente übergeben, indem Sie Komponentenparameter verwenden. Mit Komponentenparametern können Sie Daten von einer übergeordneten Komponente an eine untergeordnete Komponente weitergeben und so die Kommunikation zwischen Komponenten ermöglichen. Sie können zum Beispiel einen Parameter in Ihrer Razor-Komponente wie folgt definieren:

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

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

<Parameter>
Public Property Message() As String

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

    @Message

    @Message

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@Message

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

Razor-Komponenten können auch serverseitige Logik enthalten, die auf der Client-Seite ausgeführt werden kann. Sie können zum Beispiel Verarbeitungslogik schreiben, HTTP-Anfragen stellen, Benutzerereignisse verarbeiten und andere serverseitige Operationen direkt von Ihren Razor-Komponenten aus mit C#-Code durchführen. Damit können Sie dynamische und interaktive Webseiten erstellen, ohne JavaScript-Code schreiben zu müssen.

Wiederverwendbare Razor-Komponenten erstellen

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

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

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

    @typeparam Book

        @foreach (var book in Books)
        {
            @book.Title by @book.Author
        }

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

    @typeparam Book

        @foreach (var book in Books)
        {
            @book.Title by @book.Author
        }

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

typeparam Function foreach(var book ByVal Books As in) As Book
			book.Title by book.Author
End Function

	code
	If True Then
		<Parameter>
		public List Books {get;set;}
	End If

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

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

Verwendung von IronPDF mit Razor-Komponenten

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

IronPDF ist hervorragend darin, HTML in PDF zu konvertieren und dabei sicherzustellen, dass das Layout und der Stil intakt bleiben. Dies ist besonders nützlich zum Erstellen von PDFs aus webbasierten Inhalten wie Berichten, Rechnungen und Dokumentationen. HTML-Dateien, URLs und HTML-Strings können einfach in PDF-Dateien konvertiert 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

Friend Class Program
	Shared Sub Main(ByVal 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 Class

Installation von IronPDF

Um IronPDF mit Razor Components 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. Suche nach "IronPDF" und wähle das "IronPDF-Paket".

4. Klicken Sie auf "Installieren", um das Paket zu installieren.

   Nachdem wir das IronPDF NuGet-Paket installiert haben, 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-Komponentendatei 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-Syntaxstring, die HTML-Datei oder die URL an die IronPdf.ChromePdfRenderer-Methode übergeben. Nehmen wir zum Beispiel an, wir wollen eine PDF-Datei mit der Erhöhung eines Zählers erstellen. Betrachten Sie den folgenden Code:

    var Renderer = new IronPdf.ChromePdfRenderer();
             PdfDocument pdf = Renderer.RenderHtmlAsPdf("MY PDF # "+currentCount);
             pdf.SaveAs("myPdf"+currentCount+".pdf");

    var Renderer = new IronPdf.ChromePdfRenderer();
             PdfDocument pdf = Renderer.RenderHtmlAsPdf("MY PDF # "+currentCount);
             pdf.SaveAs("myPdf"+currentCount+".pdf");

Dim Renderer = New IronPdf.ChromePdfRenderer()
			 Dim pdf As PdfDocument = Renderer.RenderHtmlAsPdf("MY PDF # " & currentCount)
			 pdf.SaveAs("myPdf" & currentCount & ".pdf")

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

In diesem Beispiel haben wir unsere Zählerkomponente geändert. Wir haben die onClick-Funktion einer Zähler-Schaltfläche geändert, die beim Anklicken eine PDF-Datei erstellt, die den Zählerstand des Zählers enthält.

Schlussfolgerung

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

Razor Components und IronPDF sind leistungsstarke Tools, mit denen sich robuste und funktionsreiche Webanwendungen erstellen lassen. Durch die Kombination dieser Technologien können Entwickler Webanwendungen erstellen, die sowohl hochfunktional als auch optisch ansprechend sind.

IronPDF kann auch verwendet werden, um Razor-Seiten und URLs in PDFs zu konvertieren, sowie um PDF-Dokumente zu lesen, zu erstellen und zu manipulieren. IronPDF ermöglicht sogar eine detailliertere PDF-Steuerung, wie das Hinzufügen von Kopfzeilen, Fußzeilen, Seitennummern, digitalen Signaturen, Passwörtern und erweiterten PDF-Bearbeitungsfunktionen zu bestehenden oder neu erstellten PDF-Dokumenten. Es ist kostenlos für die Entwicklung, aber benötigt eine kostenlose Testlizenz oder kommerziellen Lizenz für die Produktion.