Razor 元件：開發者如何使用它

什麼是 Razor Components

Razor Components 是 ASP.NET Core 中的 UI Framework，可讓開發人員結合 C# 與 HTML 來建立網頁，並能夠撰寫可在用戶端執行的伺服器端邏輯。Razor Components 是 Blazor 框架的一部分，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 ：對開發人員而言如何運作：圖 2 - 什麼是 Blazor，什麼是 Razor Components？

Razor元件的優點

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 Component 檔案，副檔名為 ".razor"。 此檔案將包含您的元件的 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
}

現在您可以在網頁應用程式的其他部分使用您的 Razor Component，只要使用該元件的標籤名稱將其包含在 HTML 標記中即可。 例如，您可以在主要的 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 元件。

Razor Components 的優點之一是能夠建立可重複使用的 UI 元件，並可在多個頁面或應用程式中使用。 若要建立可重複使用的元件，您可以在專案的"Shared"資料夾中建立新的".razor"檔案。

例如，假設我們想要建立一個顯示書籍清單的元件。 我們可以在"共用"資料夾中建立一個新的 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 檔案。 它建立在 Chrome 的基礎上，Chrome 是開放源碼瀏覽器，為 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");
    }
}

安裝 IronPDF。

要將 IronPDF 與 Razor Components 搭配使用，我們首先需要安裝 IronPDF NuGet 套件。 要做到這一點，請遵循以下步驟：

1.在 Visual Studio 中開啟您的專案。 2.在專案上按一下滑鼠右鍵，然後選擇"管理 NuGet 套件"。 3.搜尋"IronPDF"並選擇"IronPDF 套件"。 4.按一下"安裝"以安裝套件。

安裝 IronPDF NuGet 套件後，我們就可以在 Razor Components 應用程式中使用它。

安裝套件後，您可以使用 IronPdf.ChromePdfRenderer class 從 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");

在這個範例中，我們建立一個 ChromePdfRenderer 的新實例。 然後，我們建立一個 PdfDocument 類的新實體，並傳送一個字串給 RenderHtmlAsPdf 方法。 最後，我們使用 PdfDocument.SaveAs 方法將產生的 PDF 檔案儲存至磁碟。

在本範例中，我們修改了計數器元件。 我們修改了計數器按鈕的 onClick 功能，當按下時會建立一個包含計數器計數的 PDF。

結論

在本文中，我們探討了如何使用 Razor Components 搭配 IronPDF 從網頁應用程式中建立 PDF 檔案。 我們已涵蓋 Razor Components 的基本知識、如何安裝和使用 IronPDF，並提供程式碼範例以協助您入門。

Razor Components 和 IronPDF 是功能強大的工具，可用於建立穩健且功能豐富的 Web 應用程式。 透過結合這些技術，開發人員可以創造出兼具高度功能性與視覺吸引力的網路應用程式。

IronPDF 也可用於將 razor 頁面和 URL 轉換為 PDF，以及閱讀、建立和處理 PDF 文件。 IronPDF 甚至允許更精細的 PDF 控制，例如在現有或新產生的 PDF 文件中加入頁眉、頁腳、頁碼、數位簽署、密碼以及 進階 PDF 操作功能。 開發是免費的，但生產則需要 免費試用授權或 商業授權。