.NET 幫助

Razor C#（開發者如何運作）

坎納帕特·烏頓潘

2023年5月30日

Razor 是一種伺服器端標記語言，用於使用 .NET Core 和 .NET Framework 創建動態網頁。主要用於搭配 ASP.NET Core。 Razor Pages 是 ASP.NET Core 的一個新功能，提供了一種簡潔明了的方法來組織應用程式中的代碼，減少代碼重複的問題。 Razor 結合伺服器端使用 C# 或 VB(Visual Basic)使用 HTML 創建網頁內容。

本教程將指導您使用C#在Visual Studio中使用Razor創建一個基本應用程式。讓我們開始!

先決條件

在進入Razor的世界之前，請確保您已安裝以下內容：

.NET Core SDK
Visual Studio
這些是必要的，因為它們提供我們在本教程中將要使用的 Razor 視圖引擎和專案模板。此外，它們可以在多個作業系統上運行，這意味著無論您使用的是 Windows、Linux 還是 macOS 都能夠使用。

第 1 步：建立一個新的 Razor Pages 專案

打開 Microsoft Visual Studio 並按照以下步驟操作：

點擊「檔案」>「新增」>「專案」。
在專案模板選擇畫面中，選擇「Blazor Server App」。
將您的專案命名為 "IronPDFExample" 並點擊 "Create"。
從下拉選單中選擇「.NET 7.0」或更高版本。
您現在有了一個新的 Razor Pages 項目。

了解 Razor 語法和檔案

Razor 文件使用 .cshtml 文件擴展名，結合 C#(因而『cs』)與 HTML。如果我們使用 Visual Basic，文件擴展名會變為 .vbhtml。

在您的方案總管中，找到並打開名為 "Index.cshtml" 的 .cshtml 擴展名文件。在這裡，您將看到 HTML 代碼和 C# 代碼的結合。這種混合是由 Razor Parser 實現的。

Razor 語法

探索 ASP.NET Core 中的 Razor 語法是 HTML 和伺服器的組合。伺服器程式碼是 C# 或 VB 程式碼。 Razor 代碼由 @ 符號表示，它在 HTML 發送到客戶端之前在伺服器上執行。

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

在這個代碼範例中，@DateTime.Now 是一段 Razor 程式碼。它在伺服器上執行，並在發送給客戶端之前被當前日期和時間替換。

Razor 視圖

在Razor中，“view”指的是任何旨在向使用者呈現資訊的網頁。 Razor View Engine 負責將 HTML 頁面呈現給使用者。

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

使用 Razor 標記進行動態內容創建

Razor 標記允許我們在 HTML 標記中插入伺服器端代碼。我們可以使用各種代碼結構，如代碼區塊、內聯表達式和 HTML 編碼表達式。

內聯表達式

內嵌表達式使用以下代碼將結果直接輸出到 HTML：

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

這裡，@Model.Name 是一個內聯表達式，從傳遞給 Razor 視圖的模型中輸出 Name 屬性的值。

程式碼區塊

代碼區塊是執行在伺服器上的程式碼片段：

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

在此代碼範例中，之間的 Razor 代碼{} 是一個程式碼區塊。

控制結構

我們也可以在 Razor Pages 中使用控制結構，例如 if 語句和循環：

@{
    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 語句是執行於伺服器的伺服器端代碼，並且其輸出會插入到結果的 HTML 頁面中。

Switch 語句

Switch 陳述式是 C# 程式語言中的一種條件控制結構。它們可以用於代碼塊中。

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

Razor 中的 Hello World

在任何程式語言中，最簡單的程式之一就是「Hello World」。在 Razor 中，您可以使用簡單的內聯表達式顯示「Hello World」，如下例所示：

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

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

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

Razor 中的迴圈

Razor 語法允許您編寫迴圈，例如 foreach 語句。假設您有一個名字列表想要顯示在您的網頁上。您可以使用 Razor 語法中的 foreach 語句來實現。

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

此 foreach 語句遍歷列表中的每個名稱並將其輸出到網頁上。

理解標籤輔助程式

ASP.NET MVC 中的標籤協助程式使伺服器端代碼能夠在 Razor 文件中創建和渲染 HTML 元素。它們有點像 HTML 助手，但具有更類似 HTML 的語法。它們將 Razor 視圖中的類 HTML 元素轉換為發送到客戶端瀏覽器的 HTML 標記。請考慮以下錨定標籤助手的程式碼範例：

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

處理使用者互動

Razor Pages 使用處理程序方法來管理使用者互動。例如，要處理表單提交，我們可以在 Razor 頁面的對應頁面模型文件中創建一個名為 OnPostAsync 方法的方法。

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

Razor 中的註解

Razor 也支持 C# 樣式的註解。請記住，Razor 註解是伺服器端的，這意味著它們不會發送到瀏覽器。它們看起來像這樣

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

這是一個多行註釋：

@*
    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 視圖和頁面可以包含 HTML 註解。這些註解會顯示在發送到瀏覽器的 HTML 輸出中。

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

將模型傳遞到 Razor 頁面

Razor 允許您從伺服器將模型傳遞到頁面。 @model 指令用於指定傳遞對象的類型。此模型屬性可以在 Razor 頁面中存取，如下例所示：

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

使用 IronPDF 在 Razor 中生成 PDF

探索 IronPDF for .NET是一個受歡迎的函式庫，允許開發者生成從 HTML 生成 PDF、圖像，甚至現有的網頁在 .NET 中。這是一個出色的工具，用於創建報告、發票及任何需要標準打印格式的文件。 IronPDF 在 ASP.NET MVC 和 ASP.NET Razor Pages 框架中運作完美。

安裝

首先，您需要安裝 IronPDF 套件。您可以在 Visual Studio 的 NuGet 套件管理器主控台中執行此操作。運行以下命令：

:PackageInstall

創建簡單的 PDF

現在，讓我們從您的 Razor 頁面內的 HTML 代碼創建一個簡單的 PDF。首先，讓我們在 Razor 頁面的頂部導入 IronPDF 命名空間。

@using IronPdf;

@using IronPdf;

Dim IronPdf As [using]

然後，你可以使用 IronPDF 來建立 PDF。假設我們有一個按鈕在我們的 Razor 頁面上，當被點擊時會創建一個簡單的 PDF。

在我們的頁面模型文件的對應處理程式中，我們可以添加以下代碼：

@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

輸出

Razor C#（它如何為開發人員運作）圖4

Razor C#（開發人員操作說明）圖 5

結論

您已成功學習了Razor C#的基礎知識，並發現如何整合IronPDF在您的應用程式中生成PDF檔案。您首先在 Visual Studio 中創建了一個新項目，然後學習了如何使用 Razor 語法創建動態網頁。您還探索了如何使用 IronPDF 從 HTML 代碼甚至完整的 Razor 視圖生成 PDF。

現在，隨著你繼續建立更先進的應用程式，你可以利用IronPDF提供的強大功能。您可以免費試用 IronPDF如果您覺得有價值，可以購買適合您需求的授權。

坎納帕特·烏頓潘

立即與工程團隊聊天

軟體工程師

在成為軟體工程師之前，Kannapat 在日本北海道大學完成了環境資源博士學位。在攻讀學位期間，Kannapat 也成為了車輛機器人實驗室的成員，該實驗室隸屬於生物生產工程學系。2022 年，他利用自己的 C# 技能，加入了 Iron Software 的工程團隊，專注於 IronPDF 的開發。Kannapat 珍視這份工作，因為他可以直接向負責撰寫大部分 IronPDF 程式碼的開發人員學習。除了同儕學習外，Kannapat 還享受在 Iron Software 工作的社交方面。當他不在撰寫程式碼或文件時，Kannapat 通常會在 PS5 上玩遊戲或重看《最後生還者》。

< 上一頁
適用 Windows 的 Vim (開發人員的操作方式)

下一個 >
C# 等待秒數（開發人員如何操作）