Razor C# (Wie es für Entwickler funktioniert)

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

Dieses Tutorial führt Sie durch die Erstellung einer einfachen Anwendung mit Razor und C# in Visual Studio. Fangen wir an!

Voraussetzungen

Bevor wir in die Welt von Razor eintauchen, sollten Sie sicherstellen, dass Sie die folgenden Komponenten installiert haben:

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 betrieben werden, d. h. Sie können mitmachen, egal ob Sie Windows, Linux oder macOS verwenden.

Schritt 1 Erstellen eines neuen Razor Pages-Projekts

Öffnen Sie Microsoft Visual Studio und führen Sie die folgenden Schritte aus:

1. Klicken Sie auf "Datei" > "Neu" > "Projekt".

2. Wählen Sie in der Projektvorlagenauswahl "Blazor Server App".

   

3. Nennen Sie Ihr Projekt "IronPDFExample" und klicken Sie auf "Erstellen".

   

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

   

   Sie haben jetzt ein neues Razor Pages-Projekt.

Verständnis der Razor-Syntax und Dateien

Razor-Dateien verwenden die Dateierweiterung .cshtml, die C# (daher das 'cs') mit HTML. Wenn wir Visual Basic verwenden würden, würde die Dateierweiterung in "vbhtml" geändert.

Suchen Sie in Ihrem Projektmappen-Explorer die Datei mit der Erweiterung .cshtml mit dem Namen "Index.cshtml" und öffnen Sie sie. Hier sehen Sie eine Kombination aus HTML-Code und C#-Code. Diese Mischung wird durch den Razor Parser ermöglicht.

Razor-Syntax

Rasiermesser-Syntax ist eine Kombination aus HTML und Server. Der Servercode ist entweder C#- oder VB-Code. Razor-Code wird durch das Symbol "@" gekennzeichnet und wird auf dem Server ausgeführt, bevor der HTML-Code an den Client gesendet wird. Daher keine C#

Ein Beispiel für eine 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>

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

Rasiermesser-Ansicht

Der Begriff "Ansicht" in Razor entspricht jeder Webseite, die Informationen für den Benutzer darstellen soll. Die Razor View Engine ist für das Rendering der HTML-Seite für den Benutzer verantwortlich.

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

Verwendung von Razor Markup für dynamische Inhalte

Mit Razor Markup können wir serverseitigen Code in unser HTML-Markup einfü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 mit folgendem Code direkt in HTML aus:

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

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 Codesegmente, 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>

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

Strukturen kontrollieren

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

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

Anweisung wechseln

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>

Hallo Welt in Razor

Eines der einfachsten Programme in jeder Programmiersprache ist "Hello World". In Razor können Sie "Hello World" mit einem einfachen Inline-Ausdruck anzeigen, wie im folgenden Beispiel gezeigt:

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

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

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

Schleifen in Razor

Mit der Razor-Syntax können Sie Schleifen schreiben, z. B. die Anweisung foreach. Angenommen, Sie haben eine Liste von Namen, die Sie auf Ihrer Webseite anzeigen möchten. Sie können dies 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>
'}

Diese "Foreach"-Anweisung durchläuft jeden Namen in der Liste und gibt ihn auf der Webseite aus.

Verstehen von Tag-Helfern

Tag-Helfer in ASP.NET MVC ermöglichen serverseitigen Code zum Erstellen und Rendern von HTML-Elementen in Razor-Dateien. Sie sind ein bisschen wie HTML-Helfer, haben aber eine HTML-ähnliche Syntax. Sie wandeln HTML-ähnliche Elemente in Ihren Razor-Ansichten in das HTML-Markup um, das an den Browser des Kunden gesendet wird. Betrachten Sie das folgende Codebeispiel für einen Anker-Tag-Helper:

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

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

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<a asp-controller="Home" asp-action="Index"> Home</a>

Umgang mit Benutzerinteraktion

Razor Pages verwenden Handler-Methoden, um Benutzerinteraktionen zu verwalten. Um zum Beispiel die Übermittlung von Formularen zu behandeln, können wir eine Methode namens "OnPostAsync" in der entsprechenden Seitenmodelldatei 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

Kommentare in Razor

Razor unterstützt auch Kommentare im C#-Stil. Denken Sie daran, dass Razor-Kommentare serverseitig sind, das heißt, sie werden nicht an den Browser gesendet. Sie sehen wie folgt 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 *@

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. *@

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

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<!-- This is an HTML comment -- >

Übergabe von Modellen an eine Razor-Seite

Razor ermöglicht es Ihnen, Modelle vom Server an die Seite zu übergeben. Die Richtlinie "@model" wird verwendet, um den Typ des übergebenen Objekts anzugeben. Auf diese Modelleigenschaft kann auf der Razor-Seite zugegriffen 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>

Erzeugen von PDFs mit IronPDF in Razor

IronPDF ist eine beliebte Bibliothek, die es Entwicklern ermöglicht, die PDFs aus HTML, Bilder und sogar bestehende Webseiten in .NET. Es ist ein hervorragendes Werkzeug für die Erstellung von Berichten, Rechnungen und allen anderen Dokumenten, für die ein Standarddruckformat erforderlich ist. IronPDF arbeitet perfekt mit dem ASP.NET MVC und ASP.NET Razor Pages Framework zusammen.

Einrichtung

Zunächst müssen Sie das IronPDF-Paket installieren. Sie können dies über die NuGet-Paketmanager-Konsole in Visual Studio tun. Führen Sie den folgenden Befehl aus:

:PackageInstall

Erstellen einer einfachen PDF-Datei

Lassen Sie uns nun ein einfaches PDF aus HTML-Code innerhalb Ihrer Razor-Seite erstellen. Zunächst importieren wir den IronPDF-Namensraum am Anfang Ihrer Razor-Seite.

@using IronPdf;

@using IronPdf;

Dim IronPdf As [using]

Dann können Sie IronPDF verwenden, um ein PDF zu erstellen. Nehmen wir an, wir haben eine Schaltfläche auf unserer Razor-Seite, die eine einfache PDF-Datei erstellt, wenn sie angeklickt wird.

Im entsprechenden Handler in unserer Seitenmodelldatei 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);
    }
}

Private page "/pdf" [using] IronPdf
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: 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
"btn btn-primary mt-3" onclick="CreatePDF"> Create PDF</button> </div> code
Private Friend IJSRuntime As inject
	Private Property htmlString() As String

	Private Async Function CreatePDF() As Task

		Dim Renderer = New IronPdf.ChromePdfRenderer()
		Renderer.RenderingOptions.PaperSize = IronPdf.Rendering.PdfPaperSize.A2

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

		Dim Content = New DotNetStreamReference(stream:= doc.Stream)

		Await JS.InvokeVoidAsync("SubmitHTML", "ironpdf.pdf", Content)
	End Function
End Class

AUSGABE

Schlussfolgerung

Sie haben erfolgreich die Grundlagen von Razor C# erlernt und entdeckt, wie man IronPDF um PDF-Dateien innerhalb Ihrer Anwendung zu erzeugen. Sie haben zunächst ein neues Projekt in Visual Studio erstellt und dann gelernt, wie man die Razor-Syntax zur Erstellung dynamischer Webseiten verwendet. Sie haben auch erkundet, wie IronPDF verwendet werden kann, um PDFs aus HTML-Code und sogar kompletten Razor Views zu erzeugen.

Wenn Sie nun fortfahren, fortschrittlichere Anwendungen zu entwickeln, können Sie die Vorteile der leistungsstarken Funktionen von IronPDF nutzen. Sie können IronPDF ausprobieren für kostenlos. Wenn Sie es nützlich finden, können Sie eine Lizenz ab $749 erwerben.