Razor 組件：開發者的工作原理

什麼是 Razor Components

Razor Components 是 ASP.NET Core 中的 UI 框架，允許開發人員使用 C# 和 HTML 的組合來構建網頁，並能夠撰寫可以在客戶端執行的服務端邏輯。Razor Components 是 Blazor 框架的一部分，這是一個客戶端網頁 UI 框架，使用 WebAssembly (Wasm) 或 SignalR 在瀏覽器中運行 C# 代碼。 Razor Components 提供了一種基於組件的架構來構建現代網頁應用，其中 UI 被劃分為更小的、自包容的組件，這些組件可以組合在一起以創建完整的網頁。

Razor Components 使用一種稱為 Razor 語法的標記語言，這是一種 C# 與 HTML 的結合，允許無縫整合服務端和客戶端代碼。 Razor Components 類似於其他基於組件的 UI 框架，例如 React、Angular 和 Vue，但其關鍵區別在於它們使用 C# 編寫，並根據託管模型 (WebAssembly 或 SignalR) 運行在服務端或客戶端。

Razor Components 的優勢

Razor Components 為網頁開發人員提供了多項優勢，包括：

開始使用 Razor Component

要開始使用 Razor Components，你需要在系統上安裝 .NET Core 3.0 或更高版本。 使用 Visual Studio 或 .NET Core CLI 中的 Blazor 模板創建一個新的 ASP.NET Core 项目。

dotnet new blazorserver

@page "/counter"

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>
<button @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

在這個例子中，我們有一個名為“Counter”的 Razor 組件，其中包含一個按鈕，點擊時會增加 currentCount 變數。 @code 區塊用來定義此組件的 C# 代碼。

創建自定義 Razor 組件

在項目中創建一個名為“Components”的新文件夾來存儲你的 Razor Components。

在“Components”文件夾內，添加一個帶有“.razor”擴展名的新 Razor Component 文件。 此文件將包含你的組件的 C# 和 HTML 代碼。

打開 Razor Component 文件，使用 Razor 語法定義你的組件。 Razor 語法允許你在單個文件中結合 C# 和 HTML 代碼，從而易於創建動態網頁。 例如，你可以這樣定義一個簡單的 Razor Component：

<h1>Hello, World!</h1>
<p>This is a Razor Component.</p>

@code {
    // C# code for the component can be added here
}

你現在可以通過在 HTML 標記中包含組件的標籤名來在網頁應用的其他部分使用你的 Razor Component。 例如，你可以這樣在主 Razor 頁面中使用組件：

<MyComponent />

你還可以使用組件參數向 Razor Component 傳遞數據。 組件參數允許你從父組件向子組件傳遞數據，從而使組件之間能夠通信。 例如，你可以這樣在你的 Razor Component 中定義一個參數：

@code {
    [Parameter]
    public string Message { get; set; }
}

然後在 Razor Component 類中這樣使用這個組件參數：

<p>@Message</p>

並從父組件向組件傳遞數據，如下所示：

<MyComponent Message="Hello from parent component!" />

Razor Components 還可以包含可以在客戶端執行的服務端邏輯。例如，你可以使用 C# 代碼直接從 Razor Components 撰寫處理邏輯、發送 HTTP 請求、處理用戶事件及執行其他服務端操作。 這讓你無需編寫任何 JavaScript 代碼即可創建動態和互動的網頁。

創建可重用的 Razor Components

Razor Components 的一個好處是能創建可重用的 UI 組件，這些組件可以在多個頁面或應用中使用。 要創建一個可重用的組件，你可以在項目的“Shared”文件夾中創建一個新的“.razor”文件。

例如，假設我們想創建一個顯示書籍列表的組件。 我們可以在“Shared”文件夾中創建一個名為 BookList.razor 的新文件，如下所示：

我們可以這樣定義 Razor 組件：

@typeparam TItem

@foreach (var book in Books)
{
    <p>@book.Title by @book.Author</p>
}

@code {
    [Parameter]
    public List<TItem> Books { get; set; }
}

在這個例子中，我們有一個名為 BookList 的組件，該組件將一本“Book”對象列表作為 Razor 參數。 使用 @foreach 循環來遍歷列表並顯示每本書的標題和作者。

在下一部分中，我們將探討如何使用 IronPDF 與 Razor Components 從網頁應用中創建 PDF 文件。

使用 IronPDF 和 Razor Components

IronPDF 是一個 C# 庫，允許開發人員從 HTML、CSS 和 JavaScript 創建 PDF 文件。 它是基於 Chromium（支撐 Google Chrome 的開源瀏覽器）構建的。 使用 IronPDF，開發人員可以輕鬆地將 Razor Components 轉換為 HTML，並從中生成 PDF 文件。

IronPDF 精於將HTML 轉換為 PDF，確保版式和樣式保持不變。 這對於從基於網頁的內容（如報告、發票和文檔）生成 PDF 特別有用。 HTML 文件、URL 和 HTML 字符串可以輕鬆轉換為 PDF 文件。

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();

        // 1. Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");

        // 2. Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");

        // 3. Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();

        // 1. Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");

        // 2. Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");

        // 3. Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

Imports IronPdf

Friend Class Program
	Shared Sub Main(ByVal args() As String)
		Dim renderer = New ChromePdfRenderer()

		' 1. Convert HTML String to PDF
		Dim htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>"
		Dim pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent)
		pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf")

		' 2. Convert HTML File to PDF
		Dim htmlFilePath = "path_to_your_html_file.html" ' Specify the path to your HTML file
		Dim pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath)
		pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf")

		' 3. Convert URL to PDF
		Dim url = "http://ironpdf.com" ' Specify the URL
		Dim pdfFromUrl = renderer.RenderUrlAsPdf(url)
		pdfFromUrl.SaveAs("URLToPDF.pdf")
	End Sub
End Class

安裝 IronPDF

要使用 IronPDF 和 Razor Components，我們首先需要安裝 IronPDF NuGet 包。 要做到這一點，請按照以下步驟操作：

1. 在 Visual Studio 中打開項目。
2. 右鍵單擊項目並選擇“管理 NuGet 包”。
3. 搜尋“IronPDF”並選擇“IronPDF package”。
4. 點擊“安裝”來安裝包。

安裝 IronPDF NuGet 包後，我們可以在 Razor Components 中使用它。

安裝包後，你可以使用 IronPdf.ChromePdfRenderer 類從 Razor Component 創建新的 PDF 文件。

要在 ASP.NET Core Razor Components 中創建 PDF 文件，你可以將 HTML 語法字符串、HTML 文件或 URL 傳遞給 IronPdf.ChromePdfRenderer 方法。 例如，假設我們想創建一個包含計數器增量的 PDF 文件。

var renderer = new IronPdf.ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" + currentCount + "</h1>");
pdf.SaveAs("myPdf" + currentCount + ".pdf");

var renderer = new IronPdf.ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" + currentCount + "</h1>");
pdf.SaveAs("myPdf" + currentCount + ".pdf");

Dim renderer = New IronPdf.ChromePdfRenderer()
Dim pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" & currentCount & "</h1>")
pdf.SaveAs("myPdf" & currentCount & ".pdf")

在此例子中，我們創建了一個新的 ChromePdfRenderer 實例。 然後我們創建了一個新的 PdfDocument 實例，並將字符串傳遞給 RenderHtmlAsPdf 方法。 最後，我們使用 PdfDocument.SaveAs 方法將生成的 PDF 文件保存到磁盤。

在此示例中，我們修改了計數器組件。 我們修改了計數器按鈕的 onClick 函數，當它被點擊時，將創建包含計數器數量的 PDF。

結論

在本文中，我們探討了如何使用 Razor Components 和 IronPDF 從網頁應用創建 PDF 文件。 我們介紹了 Razor Components 的基礎知識，如何安裝和使用 IronPDF，並提供了代碼示例以幫助你入門。

Razor Components 和 IronPDF 是用於創建強大和功能豐富的網頁應用的有力工具。 通過結合這些技術，開發人員可以創建功能強大且視覺上吸引人的網頁應用。

IronPDF 也可以用來將 razor 頁面和 URL 轉換為 PDF，以及讀取、創建和操作 PDF 文檔。 IronPDF 甚至允許對 PDF 進行更細緻的控制，例如向現有或新生成的 PDF 文件中添加標題、頁腳、頁碼、數字簽名、密碼和高級 PDF 操作功能。 It is free for development but requires a free trial license or commercial license for production.