跳過到頁腳內容
.NET幫助

Razor C#(開發者的工作原理)

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

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

準備工作

在進入 Razor 的世界之前,請確保您已安裝以下項目:

  1. .NET Core SDK
  2. Visual Studio

這些是必要的,因為它們提供了 Razor 視圖引擎和我們將在本教程中使用的專案範本。 此外,它們可以在多個操作系統上運行,這意味著無論您使用的是 Windows、Linux 還是 macOS,您都可以參與其中。

步驟 1 創建一個新的 Razor Pages 項目

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

  1. 點擊 "檔案" > "新建" > "項目"。
  2. 在專案範本選擇畫面中,選擇 "Blazor Server App"。

Razor C#(開發者如何使用)圖 1

  1. 將專案命名為 "IronPDFExample" 並點擊 "創建"。

Razor C#(開發者如何使用)圖 2

  1. 從下拉表單中選擇 ".NET 7.0" 或更高版本。

Razor C#(開發者如何使用)圖 3

您現在有了一個新的 Razor Pages 項目。

理解 Razor 語法和文件

Razor 文件使用 .cshtml 文件擴展名,結合使用 C#(因此得名 'cs')和 HTML。 如果使用 Visual Basic,文件擴展名將更改為 .vbhtml

在解決方案資源管理器中,找到並打開名為 "Index.cshtml" 的 .cshtml 擴展名文件。 在這裡,您將看到 HTML 代碼和 C# 代碼的組合。 這種混合是由 Razor 解析器實現的。

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

在此代碼示例中,@DateTime.Now 是一段 Razor 代碼。 它在伺服器上執行,在發送給客戶端之前替換為當前日期和時間。

Razor 視圖

Razor 中的 "視圖" 指的是任何旨在向用戶呈現信息的網頁。 Razor 視圖引擎負責向用戶呈現 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>
$vbLabelText   $csharpLabel

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

在此,@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>
$vbLabelText   $csharpLabel

在此代碼示例中,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>
'}
$vbLabelText   $csharpLabel

在上面的代碼示例中,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>
$vbLabelText   $csharpLabel

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

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

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

處理用戶交互

Razor Pages 使用處理方法來管理用戶交互。 例如,要處理表單提交,我們可以在 Razor Page 對應的 Page Model 文件中創建一個名為 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
$vbLabelText   $csharpLabel

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

這是一個多行註解:

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

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

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

使用 IronPDF 在 Razor 中生成 PDF

Discover IronPDF for .NET is a popular library that allows developers to generate PDF。 這是一款出色的工具,用於創建報告、發票和任何需要標準印刷格式的文檔。 IronPDF 在 ASP.NET MVC 和 ASP.NET Razor Pages 框架中運行良好。

安裝

首先,您需要安裝 IronPDF 包。 您可以在 Visual Studio 的 NuGet 包管理器控制台中執行此操作。 運行以下命令:

Install-Package IronPdf

創建簡單的 PDF

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

@using IronPdf;
@using IronPdf;
Dim IronPdf As [using]
$vbLabelText   $csharpLabel

然後,您可以使用 IronPDF 創建 PDF。 假設我們在 Razor 頁面上有一個按鈕,當點擊時將創建一個簡單的 PDF。

在我們 Page Model 文件的相應處理程序中,我們可以添加以下代碼:

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

輸出

Razor C#(開發者如何使用)圖 4

Razor C#(開發者如何使用)圖 5

結論

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

現在,在繼續構建更高級應用程式時,您可以利用 IronPDF 提供的強大功能。 您可以免費試用 IronPDF,如果您發現它有價值,可以購買適合您需求的許可證。

常見問題解答

如何在 C# 中使用 Razor 從 HTML 生成 PDF?

您可以通過使用 IronPDF 庫在 C# 中使用 Razor 從 HTML 生成 PDF。首先,安裝 IronPDF 套件,導入 IronPDF 命名空間,然後使用其 API 方法如 RenderHtmlAsPdf 將您的 HTML 內容轉換為 PDF 格式。

Razor 語法在網頁開發中起什麼作用?

Razor 語法在網頁開發中起著至關重要的作用,通過將 C# 或 VB 與 HTML 結合來創建動態網頁。它允許開發者編寫在將 HTML 發送到客戶端的瀏覽器之前執行的服務端代碼,促進無縫集成和功能性。

Razor 頁面如何提升網頁應用開發?

Razor 頁面透過提供一種結構化和有組織的方法來管理代碼,減少重複和複雜性,從而提升網頁應用開發。它們通過允許開發者專注於在基於頁面的格式內構建功能性來簡化開發過程。

什麼是標籤助手,它們如何在 Razor 頁面中提供幫助?

Razor 頁面中的標籤助手透過使服務端代碼能夠使用類似 HTML 的語法創建和渲染 HTML 元素來提供幫助。這有助於通過在將元素發送到客戶端的瀏覽器之前在服務器上轉換元素來生成乾淨且易於維護的 HTML 標記。

如何在 Razor 頁面中處理用戶交互?

Razor 頁面中的用戶交互是透過使用如 OnPostAsync 的處理程序方法來管理的。這些方法處理表單提交和其他用戶輸入,允許開發者根據從客戶端接收到的數據執行操作。

'@model' 指令在 Razor 中有什麼意義?

@model 指令在 Razor 中意義重大,因為它指定了傳遞給 Razor 頁面的對象的數據類型。這允許開發者直接在頁面內訪問和操作模型的屬性,促進數據綁定和交互。

在 Visual Studio 中使用 Razor 和 C# 有什麼好處?

在 Visual Studio 中使用 Razor 和 C# 提供了整合服務端邏輯與 HTML 的好處,通過 Razor 頁面精簡開發,以及輕鬆生成動態網絡內容的能力。此外,Visual Studio 提供健全的工具和模板來支持 Razor 開發。

我可以同時用於 C# 和 VB 使用 Razor 語法嗎?

是的,Razor 語法可以用於 C# 和 VB(Visual Basic),以將服務端邏輯與 HTML 結合。這種靈活性允許開發者在享受 Razor 在網頁開發中的能力的同時選擇他們偏好的語言。

Curtis Chau
技術作家

Curtis Chau 擁有卡爾頓大學計算機科學學士學位,專注於前端開發,擅長於 Node.js、TypeScript、JavaScript 和 React。Curtis 熱衷於創建直觀且美觀的用戶界面,喜歡使用現代框架並打造結構良好、視覺吸引人的手冊。

除了開發之外,Curtis 對物聯網 (IoT) 有著濃厚的興趣,探索將硬體和軟體結合的創新方式。在閒暇時間,他喜愛遊戲並構建 Discord 機器人,結合科技與創意的樂趣。