網頁開發經歷了多年來的長足發展，隨著現代框架和程式庫的出現，開發者可以使用功能強大的工具來構建動態和互動的網頁。 近年來獲得顯著人氣的技術之一是Razor Components，它是ASP.NET Core中Blazor框架的一部分。 Razor Components允許開發者使用C#和HTML構建豐富的客戶端網頁應用程式，而無需編寫JavaScript。 在本文中，我們將了解Razor Components及其如何用於建立模塊化、可重用和動態的網頁。

什麼是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 Components是獨立的元素，可以輕鬆在網頁應用程式內的多個地方或不同的項目中重用。 這促進了程式碼的可重用性，減少了程式碼重複，從而帶來更易於維護和可擴展的網頁應用程式。

模塊化

Razor Components遵循的是基於組件的架構，其中UI分解為較小的組件，這些組件可以組合在一起以建立複雜的網頁。 這促進了模塊化，使開發者可以將UI和邏輯封裝在單個組件中，從而更容易管理和維護程式碼庫。

Seamless Integration with C#

由於Razor Components使用C#編寫，開發者可以利用現有的C#技能和知識來構建網頁應用程式。 這消除了學習和編寫JavaScript的需要，對於已經熟悉C#的開發者來說是個顯著的優勢。

伺服器端和客戶端執行

Razor Components可以在伺服器端或客戶端執行，具體取決於託管模型。 這給了開發者選擇最合適的執行模型的靈活性，具體取決於性能、安全性和使用者體驗等因素。

即時通信

Razor Components可以使用SignalR，即時通信程式庫，在客戶端和伺服器之間建立雙向通信。 這使得網頁應用程式中的即時更新和通知成為可能，提供了一種響應式和互動的使用者體驗。

可擴展性

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++;
    }
}

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

在項目中，建立一個名為"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
}

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

<MyComponent />

您還可以使用組件參數將資料傳遞給您的Razor Component。 組件參數允許您將資料從父組件傳遞給子組件，從而實現組件之間的通信。 例如，可以這樣在Razor Component中定義一個參數：

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

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

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

<p>@Message</p>

<p>@Message</p>

並通過這樣的方式從父組件向組件傳遞資料：

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

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

Razor Components還可以包含可在客戶端執行的伺服器端邏輯。例如，您可以編寫處理邏輯、進行HTTP請求、處理使用者事件，並直接從Razor Components使用C#程式碼執行其他伺服器端操作。 這讓您可以在不編寫任何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; }
}

@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

Module Program
    Sub Main(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 Module

Imports IronPdf

Module Program
    Sub Main(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 Module

安裝IronPDF

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

1. 在Visual Studio中打開您的項目。
2. 右鍵點擊項目並選擇"管理NuGet套件"。
3. 搜索"IronPDF"並選擇"IronPDF套件"。
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")

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

在此範例中，我們建立ChromePdfRenderer的新實例。 然後，我們建立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操作功能。 它在開發時免費，但生產環境需要免費試用授權或商業授權。