Razor ist eine serverseitige Auszeichnungssprache, die zur Erstellung dynamischer Webseiten mit .NET Core und .NET Framework verwendet wird. Es wird hauptsächlich in Verbindung mit ASP.NET Core verwendet. Razor Pages sind ein neuer Aspekt von ASP.NET Core, die eine saubere und einfache Möglichkeit bieten, Code innerhalb von Anwendungen zu organisieren und das Problem der Code-Duplizierung zu reduzieren. Razor kombiniert serverseitig C# oder VB (Visual Basic) mit HTML, um Webinhalte zu erstellen.

Dieses Tutorial führt Sie durch die Erstellung einer einfachen Anwendung mithilfe von Razor mit C# in Visual Studio. Lass uns beginnen!

Voraussetzungen

Bevor wir in die Welt von Razor eintauchen, stelle sicher, dass du Folgendes installiert hast:

1. .NET Core SDK
2. Visual Studio

Diese sind notwendig, da sie die Razor View Engine und die Projektvorlagen bereitstellen, die wir für dieses Tutorial verwenden werden. Außerdem können sie auf mehreren Betriebssystemen arbeiten, was bedeutet, dass du folgen kannst, egal ob du Windows, Linux oder macOS verwendest.

Schritt 1 Erstellen eines neuen Razor Pages-Projekts

Öffne Microsoft Visual Studio und folge diesen Schritten:

1. Klicke auf "Datei" > "Neu" > "Projekt".
2. Wähle im Bildschirm zur Projektvorlagenauswahl "Blazor Server App" aus.

3. Benenne dein Projekt "IronPDFExample" und klicke auf "Erstellen".

4. Wähle ".NET 7.0" oder höher aus den Dropdowns.

Du hast jetzt ein neues Razor Pages-Projekt.

Verständnis der Razor-Syntax und Dateien

Razor-Dateien verwenden die .cshtml Dateierweiterung, indem sie C# (daher das 'cs') mit HTML kombinieren. Wenn wir Visual Basic verwenden würden, würde sich die Dateierweiterung zu .vbhtml ändern.

In Ihrem Lösungs-Explorer finden und öffnen Sie die .cshtml Erweiterungsdatei namens "Index.cshtml". Hier siehst du eine Kombination aus HTML-Code und C#-Code. Diese Mischung wird durch den Razor Parser ermöglicht.

Razor-Syntax

Razor-Syntax in ASP.NET Core ist eine Kombination aus HTML und serverseitigem Code. Der Servercode ist entweder C#- oder VB-Code. Razor-Code wird durch das @ Symbol gekennzeichnet und wird auf dem Server ausgeführt, bevor das HTML an den Client gesendet wird.

Ein Beispiel für einfache Razor-Syntax:

<p>The current time is @DateTime.Now</p>

<p>The current time is @DateTime.Now</p>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<p> The current time is @DateTime.Now</p>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<p> The current time is @DateTime.Now</p>

In diesem Codebeispiel ist @DateTime.Now ein Razor-Code. Es wird auf dem Server ausgeführt und durch das aktuelle Datum und die aktuelle Uhrzeit ersetzt, bevor es an den Client gesendet wird.

Razor View

Der Begriff "View" in Razor bezieht sich auf jede Webseite, die dazu gedacht ist, dem Benutzer Informationen zu präsentieren. Die Razor View Engine ist dafür verantwortlich, die HTML-Seite an den Benutzer zu rendern.

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

page model ReadOnly Property () As IndexModel
	ViewData("Title") = "Home page"
End Property

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<div class="text-center"> <h1 class="display-4"> Welcome</h1> <p> Learn about <a href="https://docs.microsoft.com/aspnet/core"> building Web apps @with ASP.NET Core</a>.</p> </div>

page model ReadOnly Property () As IndexModel
	ViewData("Title") = "Home page"
End Property

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<div class="text-center"> <h1 class="display-4"> Welcome</h1> <p> Learn about <a href="https://docs.microsoft.com/aspnet/core"> building Web apps @with ASP.NET Core</a>.</p> </div>

Verwendung von Razor Markup für dynamische Inhalte

Razor-Markup erlaubt es uns, serverseitigen Code in unser HTML-Markup einzufügen. Wir können verschiedene Codekonstrukte wie Codeblöcke, Inline-Ausdrücke und HTML-kodierte Ausdrücke verwenden.

Inline-Ausdruck

Ein Inline-Ausdruck gibt das Ergebnis direkt an das HTML aus, indem folgender Code verwendet wird:

<p>Hello, my name is @Model.Name</p>

<p>Hello, my name is @Model.Name</p>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<p> Hello, my name is @Model.Name</p>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<p> Hello, my name is @Model.Name</p>

Hier ist @Model.Name ein Inline-Ausdruck, der den Wert der Eigenschaft Name aus dem an die Razor-Ansicht übergebenen Modell ausgibt.

Code-Block

Codeblöcke sind Codeabschnitte, die auf dem Server ausgeführt werden:

@{
    var name = "IronPDF";
}
<p>Hello, my name is @name</p>

@{
    var name = "IronPDF";
}
<p>Hello, my name is @name</p>

@
If True Then
	Dim name = "IronPDF"
End If
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<p> Hello, my name is @name</p>

@
If True Then
	Dim name = "IronPDF"
End If
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<p> Hello, my name is @name</p>

In diesem Codebeispiel ist der Razor-Code zwischen { } ein Codeblock.

Kontroll-Strukturen

Wir können auch Kontrollstrukturen wie If-Anweisungen und Schleifen in unseren Razor Pages verwenden:

@{
    var count = 5;
}

@if (count > 3)
{
    <p>The count is greater than 3.</p>
}

@{
    var count = 5;
}

@if (count > 3)
{
    <p>The count is greater than 3.</p>
}

@
If True Then
	Dim count = 5
End If

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'@if(count > 3)
'{
'	<p> The count is greater than 3.</p>
'}

@
If True Then
	Dim count = 5
End If

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'@if(count > 3)
'{
'	<p> The count is greater than 3.</p>
'}

Im obigen Codebeispiel ist die if Anweisung Teil des serverseitigen Codes, der auf dem Server läuft, und seine Ausgabe wird in die resultierende HTML-Seite eingefügt.

Switch-Erklärung

Switch-Anweisungen sind eine Art von bedingter Kontrollstruktur in der Programmiersprache C#. Sie können innerhalb von Codeblöcken verwendet werden.

@{
    var fileFormat = "PDF";
    var message = "";

    switch (fileFormat) 
    {
        case "PDF":
            message = "You selected PDF.";
            break;
        default:
            message = "Invalid selection.";
            break;
    }
}

<p>@message</p>

@{
    var fileFormat = "PDF";
    var message = "";

    switch (fileFormat) 
    {
        case "PDF":
            message = "You selected PDF.";
            break;
        default:
            message = "Invalid selection.";
            break;
    }
}

<p>@message</p>

@
If True Then
	Dim fileFormat = "PDF"
	Dim message = ""

	Select Case fileFormat
		Case "PDF"
			message = "You selected PDF."
		Case Else
			message = "Invalid selection."
	End Select
End If

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<p> @message</p>

@
If True Then
	Dim fileFormat = "PDF"
	Dim message = ""

	Select Case fileFormat
		Case "PDF"
			message = "You selected PDF."
		Case Else
			message = "Invalid selection."
	End Select
End If

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<p> @message</p>

Hallo Welt in Razor

Eines der einfachsten Programme in jeder Programmiersprache ist "Hello World". In Razor kannst du "Hello World" mit einem einfachen Inline-Ausdruck anzeigen, wie im untenstehenden Beispiel gezeigt:

<p>@("Hello World")</p>

<p>@("Hello World")</p>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<p> @("Hello World")</p>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<p> @("Hello World")</p>

Schleifen in Razor

Die Razor-Syntax ermöglicht es Ihnen, Schleifen zu schreiben, wie zum Beispiel die foreach Anweisung. Angenommen, du hast eine Liste von Namen, die du auf deiner Webseite anzeigen möchtest. Das können Sie mit der foreach Anweisung in der Razor-Syntax erreichen.

@{
    var names = new List<string> { "John", "Doe", "Smith" };
}

@foreach (var name in names)
{
    <p>@name</p>
}

@{
    var names = new List<string> { "John", "Doe", "Smith" };
}

@foreach (var name in names)
{
    <p>@name</p>
}

@
If True Then
	Dim names = New List(Of String) From {"John", "Doe", "Smith"}
End If

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'@foreach(var name in names)
'{
'	<p> @name</p>
'}

@
If True Then
	Dim names = New List(Of String) From {"John", "Doe", "Smith"}
End If

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'@foreach(var name in names)
'{
'	<p> @name</p>
'}

Diese foreach Anweisung läuft über jeden Namen in der Liste und gibt ihn auf der Webseite aus.

Verständnis von Tag-Helfern

Tag-Helper in ASP.NET MVC ermöglichen es serverseitigem Code, HTML-Elemente in Razor-Dateien zu erstellen und zu rendern. Sie ähneln HTML-Helpern, haben jedoch eine HTML-ähnlichere Syntax. Sie verwandeln HTML-ähnliche Elemente in deinen Razor Views in das HTML-Markup, das an den Client-Browser gesendet wird. Betrachte das folgende Codebeispiel eines Anker-Tag-Helpers:

<a asp-controller="Home" asp-action="Index">Home</a>

<a asp-controller="Home" asp-action="Index">Home</a>

Handhabung von Benutzerinteraktion

Razor Pages verwenden Handler-Methoden, um Benutzerinteraktionen zu verwalten. Zum Beispiel können wir zur Bearbeitung der Formularübermittlung eine Methode namens OnPostAsync in der entsprechenden Page Model-Datei unserer Razor-Seite erstellen.

public async Task<IActionResult> OnPostAsync()
{
    if (!ModelState.IsValid)
    {
        return Page();
    }

    // Perform some operation here

    return RedirectToPage("./Index");
}

public async Task<IActionResult> OnPostAsync()
{
    if (!ModelState.IsValid)
    {
        return Page();
    }

    // Perform some operation here

    return RedirectToPage("./Index");
}

Public Async Function OnPostAsync() As Task(Of IActionResult)
	If Not ModelState.IsValid Then
		Return Page()
	End If

	' Perform some operation here

	Return RedirectToPage("./Index")
End Function

Public Async Function OnPostAsync() As Task(Of IActionResult)
	If Not ModelState.IsValid Then
		Return Page()
	End If

	' Perform some operation here

	Return RedirectToPage("./Index")
End Function

Kommentare in Razor

Razor unterstützt auch C#-Stil-Kommentare. Denke daran, dass Razor-Kommentare serverseitig sind, das heißt, sie werden nicht an den Browser gesendet. Sie sehen so aus:

@* This is a Razor comment *@

@* This is a Razor comment *@

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@* This is a Razor comment *@

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@* This is a Razor comment *@

Und dies ist ein mehrzeiliger Kommentar:

@*
    This is a multi-line Razor comment.
    It's useful when you have a lot to say.
*@

@*
    This is a multi-line Razor comment.
    It's useful when you have a lot to say.
*@

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@* This is a multi-line Razor comment.It's useful @when you have a lot @to say. *@

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@* This is a multi-line Razor comment.It's useful @when you have a lot @to say. *@

Razor-Ansichten und -Seiten können HTML-Kommentare enthalten. Diese Kommentare sind in der an den Browser gesendeten HTML-Ausgabe sichtbar.

<!-- This is an HTML comment -->

<!-- This is an HTML comment -->

Modelle an eine Razor-Seite weitergeben

Razor erlaubt es dir, Modelle von dem Server an die Seite zu übergeben. Die @model Direktive wird verwendet, um den Typ des übergebenen Objekts zu spezifizieren. Diese Modelleigenschaft kann in der Razor-Seite aufgerufen werden, wie im folgenden Beispiel gezeigt:

@page
@model ExampleModel

<h2>@Model.Title</h2>
<p>@Model.Description</p>

@page
@model ExampleModel

<h2>@Model.Title</h2>
<p>@Model.Description</p>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@page @model ExampleModel <h2> @Model.Title</h2> <p> @Model.Description</p>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@page @model ExampleModel <h2> @Model.Title</h2> <p> @Model.Description</p>

Erzeugen von PDFs mit IronPDF in Razor

Entdecke IronPDF for .NET ist eine beliebte Bibliothek, die es Entwicklern ermöglicht, PDFs aus HTML, Bildern und sogar bestehenden Webseiten in .NET zu generieren. Es ist ein hervorragendes Werkzeug zum Erstellen von Berichten, Rechnungen und jeder anderen Art von Dokument, in dem ein Standard-Druckformat erforderlich ist. IronPDF funktioniert perfekt innerhalb des ASP.NET MVC und ASP.NET Razor Pages Frameworks.

Installation

Zuerst musst du das IronPDF-Paket installieren. Dies kannst du über die NuGet-Paket-Manager-Konsole in Visual Studio tun. Führen Sie den folgenden Befehl aus:

Install-Package IronPdf

Erstellen einer einfachen PDF-Datei

Lass uns nun ein einfaches PDF aus HTML-Code innerhalb deiner Razor-Seite erstellen. Importiere zunächst den IronPDF-Namespace oben in deiner Razor-Seite.

@using IronPdf;

@using IronPdf;

Dim IronPdf As [using]

Dim IronPdf As [using]

Dann kannst du IronPDF verwenden, um ein PDF zu erstellen. Angenommen, wir haben eine Schaltfläche auf unserer Razor-Seite, mit der ein einfaches PDF beim Klicken erstellt wird.

In dem entsprechenden Handler in unserer Page Model-Datei können wir den folgenden Code hinzufügen:

@page "/pdf"
@using IronPdf;
@inject IJSRuntime JS

<PageTitle>Create PDF</PageTitle>

<h1>Create PDF</h1>

<div class="form-outline">
    <button class="btn btn-primary mt-3" @onclick="CreatePDF">Create PDF</button>
</div>

@code {
    private string htmlString { get; set; }

    private async Task CreatePDF()
    {
        var Renderer = new IronPdf.ChromePdfRenderer();
        Renderer.RenderingOptions.PaperSize = IronPdf.Rendering.PdfPaperSize.A2;

        var doc = Renderer.RenderUrlAsPdf("https://ironpdf.com/");

        using var Content = new DotNetStreamReference(stream: doc.Stream);

        await JS.InvokeVoidAsync("SubmitHTML", "ironpdf.pdf", Content);
    }
}

@page "/pdf"
@using IronPdf;
@inject IJSRuntime JS

<PageTitle>Create PDF</PageTitle>

<h1>Create PDF</h1>

<div class="form-outline">
    <button class="btn btn-primary mt-3" @onclick="CreatePDF">Create PDF</button>
</div>

@code {
    private string htmlString { get; set; }

    private async Task CreatePDF()
    {
        var Renderer = new IronPdf.ChromePdfRenderer();
        Renderer.RenderingOptions.PaperSize = IronPdf.Rendering.PdfPaperSize.A2;

        var doc = Renderer.RenderUrlAsPdf("https://ironpdf.com/");

        using var Content = new DotNetStreamReference(stream: doc.Stream);

        await JS.InvokeVoidAsync("SubmitHTML", "ironpdf.pdf", Content);
    }
}

AUSGABE

Abschluss

Du hast erfolgreich die Grundlagen von Razor C# gelernt und entdeckt, wie man IronPDF integriert, um innerhalb deiner Anwendung PDF-Dateien zu erstellen. Du hast damit begonnen, ein neues Projekt in Visual Studio zu erstellen und dann gelernt, wie man die Razor-Syntax verwendet, um dynamische Webseiten zu erstellen. Du hast auch erkundet, wie IronPDF verwendet werden kann, um PDFs aus HTML-Code und sogar kompletten Razor Views zu generieren.

Nun, da du beginnst, anspruchsvollere Anwendungen zu entwickeln, kannst du die leistungsstarken Funktionen nutzen, die IronPDF bietet. Du kannst IronPDF kostenlos ausprobieren und wenn du es als wertvoll erachtest, kannst du eine Lizenz erwerben, die deinen Bedürfnissen entspricht.