Zum Fußzeileninhalt springen
.NET HILFE

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

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.

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

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

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

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

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

Du hast 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 kombiniert. Wenn wir Visual Basic verwenden würden, würde sich die Dateierweiterung in .vbhtml ändern.

Finde im Solution Explorer die Datei mit der .cshtml-Erweiterung namens "Index.cshtml" und öffne sie. 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 auf dem Server ausgeführt, bevor der HTML-Code 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>
$vbLabelText   $csharpLabel

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>
$vbLabelText   $csharpLabel

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>
$vbLabelText   $csharpLabel

Hierbei 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>
$vbLabelText   $csharpLabel

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>
'}
$vbLabelText   $csharpLabel

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.

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>
$vbLabelText   $csharpLabel

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>
$vbLabelText   $csharpLabel

Schleifen in Razor

Die Razor-Syntax erlaubt es dir, Schleifen zu schreiben, wie die foreach-Anweisung. Angenommen, du hast eine Liste von Namen, die du auf deiner Webseite anzeigen möchtest. Das kannst du 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>
'}
$vbLabelText   $csharpLabel

Diese foreach-Anweisung durchläuft 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>
HTML

Handhabung von Benutzerinteraktion

Razor Pages verwenden Handler-Methoden, um Benutzerinteraktionen zu verwalten. Zum Beispiel können wir zum Umgang mit der Formularübermittlung eine Methode namens OnPostAsync in der entsprechenden Page Model-Datei unserer Razor Page 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
$vbLabelText   $csharpLabel

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 *@
$vbLabelText   $csharpLabel

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. *@
$vbLabelText   $csharpLabel

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

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 festzulegen. 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>
$vbLabelText   $csharpLabel

Erzeugen von PDFs mit IronPDF in Razor

Entdecke IronPDF für .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]
$vbLabelText   $csharpLabel

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

AUSGABE

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

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

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.

Häufig gestellte Fragen

Wie kann ich mit Razor in C# PDFs aus HTML generieren?

Sie können mit Razor in C# PDFs aus HTML generieren, indem Sie die IronPDF-Bibliothek verwenden. Installieren Sie zuerst das IronPDF-Paket, importieren Sie den IronPDF-Namespace und verwenden Sie dann dessen API-Methoden wie RenderHtmlAsPdf, um Ihre HTML-Inhalte in das PDF-Format umzuwandeln.

Welche Rolle spielt die Razor-Syntax in der Webentwicklung?

Die Razor-Syntax spielt eine entscheidende Rolle in der Webentwicklung, indem sie C# oder VB mit HTML kombiniert, um dynamische Webseiten zu erstellen. Sie ermöglicht es Entwicklern, serverseitigen Code zu schreiben, der ausgeführt wird, bevor HTML an den Browser des Clients gesendet wird, was eine nahtlose Integration und Funktionalität erleichtert.

Wie verbessern Razor-Seiten die Entwicklung von Webanwendungen?

Razor-Seiten verbessern die Entwicklung von Webanwendungen, indem sie eine strukturierte und organisierte Möglichkeit bieten, den Code zu verwalten, wodurch Duplikationen und Komplexität reduziert werden. Sie vereinfachen den Entwicklungsprozess, indem sie es Entwicklern ermöglichen, sich auf den Aufbau von Funktionalitäten im Rahmen eines seitenbasierten Formats zu konzentrieren.

Was sind Tag Helpers und wie unterstützen sie Razor-Seiten?

Tag Helpers in Razor-Seiten unterstützen, indem sie serverseitigen Code ermöglichen, HTML-Elemente mit einer HTML-ähnlichen Syntax zu erstellen und zu rendern. Dies hilft dabei, sauberes und wartbares HTML-Markup zu erzeugen, indem Elemente auf dem Server transformiert werden, bevor sie an den Browser des Clients gesendet werden.

Wie kann ich Benutzerinteraktionen in Razor-Seiten behandeln?

Benutzerinteraktionen in Razor-Seiten werden mit Handler-Methoden wie OnPostAsync verwaltet. Diese Methoden verarbeiten Formularübermittlungen und andere Benutzereingaben, sodass Entwickler Vorgänge basierend auf den vom Client empfangenen Daten ausführen können.

Welche Bedeutung hat die '@model'-Direktive in Razor?

Die '@model'-Direktive in Razor ist von Bedeutung, weil sie den Datentyp des Objekts angibt, das an eine Razor-Seite übergeben wird. Dies ermöglicht es Entwicklern, auf die Eigenschaften des Modells direkt innerhalb der Seite zuzugreifen und sie zu manipulieren, was die Datenbindung und Interaktion erleichtert.

Welche Vorteile bietet die Verwendung von Razor mit C# in Visual Studio?

Die Verwendung von Razor mit C# in Visual Studio bietet Vorteile wie die Integration von serverseitiger Logik mit HTML, einen gestrafften Entwicklungsprozess durch Razor-Seiten und die Möglichkeit, dynamische Webinhalte einfach zu erstellen. Darüber hinaus bietet Visual Studio robuste Werkzeuge und Vorlagen zur Unterstützung der Razor-Entwicklung.

Kann ich Razor-Syntax für C# und VB verwenden?

Ja, die Razor-Syntax kann sowohl mit C# als auch mit VB (Visual Basic) verwendet werden, um serverseitige Logik mit HTML zu kombinieren. Diese Flexibilität ermöglicht es Entwicklern, ihre bevorzugte Sprache zu wählen und gleichzeitig von den Möglichkeiten der Razor-Syntax in der Webentwicklung zu profitieren.

Jacob Mellor, Chief Technology Officer @ Team Iron
Chief Technology Officer

Jacob Mellor ist Chief Technology Officer bei Iron Software und ein visionärer Ingenieur, der führend in der C# PDF-Technologie ist. Als ursprünglicher Entwickler der Iron Software-Kerncodebasis hat er die Produktarchitektur des Unternehmens seit seiner Gründung gestaltet und zusammen mit CEO Cameron Rimington in ein Unternehmen ...

Weiterlesen