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

什麼是Razor Components

Razor Components是ASP.NET Core中的一個UI框架，允許開發人員使用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的優勢

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

開始使用Razor Components

要開始使用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組件檔案。 該檔案將包含組件的C#和HTML代碼。

打開Razor組件檔案，使用Razor語法定義您的組件。 Razor語法允許您在單個檔案中結合C#和HTML代碼，使創建動態網頁變得容易。 例如，您可以這樣定義一個簡單的Razor組件：

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

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

您現在可以在網頁應用程式的其他部分中使用您的Razor Components，通過使用組件的標籤名稱將其包括在您的HTML標記中。 例如，您可以這樣在主Razor頁面中使用該組件：

<MyComponent />

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

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

然後像這樣在Razor Components類中使用該組件參數：

<p>@Message</p>

並像這樣從父組件傳遞數據給該組件：

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

Razor Components還可以包含可以在客戶端執行的伺服器端邏輯。例如，您可以直接在Razor Components中使用C#代碼撰寫處理邏輯、發出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");
    }
}

安裝IronPDF

要使用IronPDF與Razor Components，我們首先需要安裝IronPDF NuGet套件。 為此，請按照以下步驟操作：

1. 在Visual Studio中打開您的專案。
2. 右鍵單擊專案並選擇"管理NuGet套件"。
3. 搜索"IronPDF"並選擇"IronPDF套件"。
4. 單擊"安裝"以安裝套件。

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

一旦安裝了套件，您可以使用IronPdf.ChromePdfRenderer類從Razor組件創建一個新的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的新實例。 然後我們創建了RenderHtmlAsPdf方法。 最後，我們使用PdfDocument.SaveAs方法將生成的PDF文件儲存到磁碟。

在此範例中，我們已經修改了計數器組件。 我們修改了計數器按鈕的onClick功能，當按下時，將創建一個包含該Counter計數的PDF。

結論

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

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

IronPDF還可以用於將razor頁面和URL轉換為PDF，以及讀取、創建和操作PDF文件。 IronPDF甚至允許對PDF進行更細緻的控制，例如添加標題、頁腳、頁碼、數位簽名、密碼，以及進階PDF操作功能到現有或新生成的PDF檔案。 它對於開發是免費的，但需要免費試用授權或商業授權用於生產。