Razor to język znaczników po stronie serwera używany do tworzenia dynamicznych stron internetowych przy użyciu .NET Core i .NET Framework. Jest używany głównie w połączeniu z ASP.NET Core. Razor Pages to nowa funkcja .NET Core, która zapewnia przejrzysty i prosty sposób organizowania kodu w aplikacjach, ograniczając problem powielania kodu. Razor łączy programowanie po stronie serwera w języku C# lub VB (Visual Basic) z HTML w celu tworzenia treści internetowych.

Ten samouczek poprowadzi Cię przez proces tworzenia podstawowej aplikacji przy użyciu Razor z językiem C# w Visual Studio. Zaczynamy!

Wymagania wstępne

Zanim zagłębimy się w świat Razor, upewnij się, że masz zainstalowane następujące elementy:

1. .NET Core SDK
2. Visual Studio

Są one niezbędne, ponieważ zapewniają silnik widoków Razor oraz szablony projektów, których będziemy używać w tym samouczku. Ponadto mogą one działać na wielu systemach operacyjnych, co oznacza, że możesz z nich korzystać niezależnie od tego, czy używasz systemu Windows, Linux czy macOS.

Krok 1 Tworzenie nowego projektu Razor Pages

Otwórz program Microsoft Visual Studio i wykonaj następujące czynności:

1. Kliknij "Plik" > "Nowy" > "Projekt".

2. Na ekranie wyboru szablonu projektu wybierz "Blazor Server App".

   

3. Nazwij swój projekt "IronPDFExample" i kliknij "Utwórz".

   

4. Wybierz ".NET 7.0" lub nowszą wersję z listy rozwijanej.

   

Masz teraz nowy projekt Razor Pages.

Zrozumienie składni i plików Razor

Pliki Razor używają rozszerzenia .cshtml, łącząc C# (stąd 'cs') z HTML. Gdybyśmy używali Visual Basic, rozszerzenie pliku zmieniłoby się na .vbhtml.

W Eksploratorze Rozwiązań znajdź i otwórz plik z rozszerzeniem .cshtml o nazwie "Index.cshtml". W tym miejscu zobaczysz połączenie kodu HTML i kodu C#. Takie połączenie jest możliwe dzięki Razor Parser.

Składnia Razor

Składnia Razor w .NET Core stanowi połączenie kodu HTML i kodu po stronie serwera. Kod serwera jest napisany w języku C# lub VB. Kod Razor jest oznaczony symbolem @ i jest wykonywany na serwerze przed wysłaniem HTML do klienta.

Przykład prostej składni Razor:

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

W tym przykładzie kodu, @DateTime.Now jest kodem Razor. Jest wykonywany na serwerze, a przed wysłaniem do klienta zastępowany jest aktualną datą i godziną.

Widok Razor

Termin "widok" w Razorze odnosi się do dowolnej strony internetowej, której celem jest przedstawienie informacji użytkownikowi. Silnik Razor View Engine odpowiada za renderowanie strony HTML dla użytkownika.

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

Wykorzystanie znaczników Razor do tworzenia treści dynamicznych

Razor Markup pozwala nam wstawiać kod po stronie serwera do naszego znacznika HTML. Możemy używać różnych konstrukcji kodu, takich jak bloki kodu, wyrażenia wbudowane i wyrażenia zakodowane w HTML.

Wyrażenie w tekście

Wyrażenie wbudowane wysyła wynik bezpośrednio do kodu HTML przy użyciu następującego kodu:

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

Tutaj, @Model.Name jest wyrażeniem w linii, które zwraca wartość właściwości Name z modelu przekazanego do widoku Razor.

Blok kodu

Bloki kodu to fragmenty kodu wykonywane na serwerze:

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

W tym przykładzie kodu, kod Razor pomiędzy { } jest blokiem kodu.

Struktury kontrolne

W naszych stronach Razor możemy również używać struktur kontrolnych, takich jak instrukcje if i pętle:

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

W powyższym przykładzie kodu, instrukcja if jest częścią kodu po stronie serwera, który działa na serwerze, a jego wynik jest wstawiany do generowanej strony HTML.

Instrukcja switch

Instrukcje switch są rodzajem warunkowej struktury sterującej w języku programowania C#. Można je stosować w blokach kodu.

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

Hello World w Razor

Jednym z najprostszych programów w każdym języku programowania jest "Hello World". W Razorze można wyświetlić "Hello World" za pomocą prostego wyrażenia wbudowanego, jak pokazano w poniższym przykładzie:

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

Pętle w Razor

Składnia Razor pozwala pisać pętle, takie jak instrukcja foreach. Załóżmy, że masz listę nazw, które chcesz wyświetlić na swojej stronie internetowej. Można to osiągnąć za pomocą instrukcji foreach w składni Razor.

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

Ta instrukcja foreach iteruje przez każde imię na liście i wyświetla je na stronie internetowej.

Zrozumienie pomocników tagów

Pomocniki tagów w ASP.NET MVC umożliwiają kodowi po stronie serwera tworzenie i renderowanie elementów HTML w plikach Razor. Są one nieco podobne do pomocników HTML, ale mają składnię bardziej zbliżoną do HTML. Przekształcają one elementy podobne do HTML w widokach Razor w znaczniki HTML wysyłane do przeglądarki klienta. Rozważmy następujący przykład kodu pomocnika tagu anchor:

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

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

Obsługa interakcji z użytkownikiem

Razor Pages wykorzystuje metody obsługi do zarządzania interakcjami użytkownika. Na przykład, aby obsłużyć wysłanie formularza, możemy utworzyć metodę o nazwie OnPostAsync w odpowiadającym pliku Modelu Strony Razor.

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

Komentarze w Razor

Razor obsługuje również komentarze w stylu C#. Należy pamiętać, że komentarze Razor są po stronie serwera, co oznacza, że nie są wysyłane do przeglądarki. Wyglądają one następująco:

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

A to jest komentarz wielowierszowy:

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

Widoki i strony Razor mogą zawierać komentarze HTML. Komentarze te są widoczne w kodzie HTML wysyłanym do przeglądarki.

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

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

Przekazywanie modeli do strony Razor

Razor umożliwia przekazywanie modeli na stronę z serwera. Dyrektywa @model służy do określania rodzaju obiektu, który jest przekazywany. Dostęp do tej właściwości modelu można uzyskać na stronie Razor, jak pokazano w poniższym przykładzie:

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

Generowanie plików PDF za pomocą IronPDF w Razor

Discover IronPDF for .NET to popularna biblioteka, która pozwala programistom generować pliki PDF z HTML, obrazów, a nawet istniejących stron internetowych w środowisku .NET. Jest to doskonałe narzędzie do tworzenia raportów, faktur i wszelkich innych dokumentów, w których wymagany jest standardowy format wydruku. IronPDF działa idealnie w ramach frameworków ASP.NET MVC i ASP.NET Razor Pages.

Instalacja

Najpierw należy zainstalować pakiet IronPDF. Można to zrobić z poziomu konsoli menedżera pakietów NuGet w programie Visual Studio. Uruchom następujące polecenie:

Install-Package IronPdf

Tworzenie prostego pliku PDF

Teraz stwórzmy prosty plik PDF z kodu HTML w ramach strony Razor. Najpierw zaimportujmy przestrzeń nazw IronPDF na początku strony Razor.

@using IronPdf;

@using IronPdf;

Dim IronPdf As [using]

Dim IronPdf As [using]

Następnie można użyć IronPDF do utworzenia pliku PDF. Załóżmy, że na naszej stronie Razor mamy przycisk, który po kliknięciu tworzy prosty plik PDF.

W odpowiednim handlerze w naszym pliku Page Model możemy dodać następujący kod:

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

WYNIK

Wnioski

Pomyślnie opanowałeś podstawy Razor C# i dowiedziałeś się, jak zintegrować IronPDF w celu generowania plików PDF w ramach swojej aplikacji. Zacząłeś od utworzenia nowego projektu w Visual Studio, a następnie nauczyłeś się, jak używać składni Razor do tworzenia dynamicznych stron internetowych. Omówiono również, w jaki sposób IronPDF może być wykorzystywany do generowania plików PDF z kodu HTML, a nawet kompletnych widoków Razor.

Teraz, tworząc coraz bardziej zaawansowane aplikacje, możesz korzystać z potężnych funkcji oferowanych przez IronPDF. Możesz wypróbować IronPDF za darmo, a jeśli uznasz, że jest przydatny, możesz kupić licencję dostosowaną do swoich potrzeb.