Razor 元件：開發者如何運作

多年來，網頁開發取得了長足的進步，隨著現代框架和庫的出現，開發者可以使用強大的工具來構建動態和互動的網頁。其中一項在近年來獲得顯著人氣的技術是Razor元件，它是ASP.NET Core中Blazor框架的一部分。Razor元件讓開發者可以使用C#和HTML來構建豐富的客戶端網頁應用程式，而不必編寫JavaScript。在本文中，我們將探討Razor元件以及如何使用它們來創建模組化、可重用且動態的網頁。

Razor 元件是什麼

Razor 元件 是在ASP.NET Core中允許開發人員使用C#和HTML組合建立網頁的UI框架，並具有編寫能夠在客戶端執行的伺服器端邏輯的能力。Razor元件是Blazor框架的一部分，該框架是一個在瀏覽器中使用WebAssembly執行C#代碼的客戶端網頁UI框架 (Wasm) 或SignalR。Razor Components提供了基於組件的架構，用於構建現代化的Web應用程式，其中UI被分解成更小的、獨立的組件，這些組件可以組合在一起創建完整的網頁。

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

Razor Components 的好處

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

可重用性

Razor 组件是独立的组件，可以轻松在 web 应用程序的多个位置或不同项目中重复使用。这促进了代码的重用性并减少了代码重复，从而使 web 应用程序更易维护和扩展。

模組化

Razor 元件遵循基於元件的架構，UI 被分解為較小的元件，可以一起組合以創建複雜的網頁。這促進了模組化，使開發人員能夠將 UI 和邏輯封裝在各個元件內，從而更容易管理和維護代碼庫。

無縫整合 C#

由於 Razor 元件是用 C# 編寫的，開發者可以利用他們現有的 C# 技能和知識來構建網絡應用程式。這消除了學習和編寫 JavaScript 的需要，這對於已經熟悉 C# 的開發者來說是一個重大優勢。

伺服端和客戶端執行

Razor 元件可以根據主機模型在伺服端或客戶端執行。這使開發人員能夠根據效能、安全性和使用者體驗等因素，靈活選擇最適合其應用程式的執行模型。

即時通訊

Razor 元件可以使用 SignalR，即時通訊程式庫，在客戶端和伺服器之間建立雙向通訊。這使得 Web 應用程式能夠實現即時更新和通知，提供響應迅速且具互動性的使用者體驗。

可擴充性

Razor 元件具高度可擴充性，允許開發人員創建自定義元件、庫和模板。這使得開發人員能夠構建量身定制的解決方案，以滿足其網頁應用程式的特定需求。

入門 Razor Component

要開始使用 Razor Component，您需要在系統上安裝 .NET Core 3.0 或更高版本。使用 Visual Studio 或 .NET Core CLI 中的 Blazor 模板建立一個新的 ASP.NET Core 專案。

    dotnet new razorcomponent

    @page "/counter"
    Counter
    Counter
    < role="status">Current count: @currentCount
    Click me
    @code {
        private int currentCount = 0;
        private void IncrementCount()
        {
        currentCount++;
    }
    }

    @page "/counter"
    Counter
    Counter
    < role="status">Current count: @currentCount
    Click me
    @code {
        private int currentCount = 0;
        private void IncrementCount()
        {
        currentCount++;
    }
    }

page "/counter" Counter Counter < role="status"> Current count: currentCount Click ReadOnly Property code() As [me]
		private Integer currentCount = 0
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'		private void IncrementCount()
'		{
'		currentCount++;
'	}
End Property

在此範例中，我們有一個名為 "Counter" 的 Razor 元件，具有一個按鈕，當按下時將會增加 currentCount 變數。@code 區塊用來定義該元件的 C# 代碼。

建立自定義的 Razor 元件

在專案中，建立一個名為 "Components" 的新資料夾來存儲你的 Razor 元件。

在 "Components" 資料夾內，新增一個具有 ".razor" 副檔名的 Razor 元件檔案。這個檔案將包含你的元件的 C# 和 HTML 代碼。

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

    Hello, World!
    This is a Razor Component.

    @code {
    // C# code for the component
    }

    Hello, World!
    This is a Razor Component.

    @code {
    // C# code for the component
    }

Hello, World(Not This is a) ReadOnly Property Component_code() As Razor Implements Component.code
	' C# code for the component
End Property

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

<MyComponent />

<MyComponent />

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

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

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

<Parameter>
Public Property Message() As String

然後在你的Razor Component類中這樣使用component參數：

    @Message

    @Message

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@Message

並將數據從父組件傳遞到子組件，如下所示：

Razor 組件還可以包含可在客戶端執行的伺服器端邏輯。例如，您可以撰寫處理邏輯、發送 HTTP 請求、處理使用者事件，並直接從您的 Razor 組件中使用 C# 代碼執行其他伺服器端操作。這使您能夠在不撰寫任何 JavaScript 代碼的情況下創建動態和交互式的網頁。

建立可重複使用的 Razor 元件

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

例如，假設我們想要建立一個顯示書籍列表的元件。我們可以在 "Shared" 文件夾中建立一個新的 BookList.razor 文件，如下所示：

我們可以這樣定義razor元件：

    @typeparam Book

        @foreach (var book in Books)
        {
            @book.Title by @book.Author
        }

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

    @typeparam Book

        @foreach (var book in Books)
        {
            @book.Title by @book.Author
        }

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

typeparam Function foreach(var book ByVal Books As in) As Book
			book.Title by book.Author
End Function

	code
	If True Then
		<Parameter>
		public List Books {get;set;}
	End If

在這個範例中，我們有一個名叫 BookList 的元件，它接受一個 "Book" 對象的列表作為 razor 參數。使用 @foreach 迴圈來遍歷列表並顯示每本書的標題和作者。

接下來的部分，我們將探討如何使用 IronPDF 和 Razor 元件從 Web 應用程式中創建 PDF 文件。

使用 IronPDF 與 Razor Components

IronPDF 是一個C#庫，允許開發人員從HTML、CSS和JavaScript創建PDF文件。它建立在Chromium之上，Chromium是支援Google Chrome的開源瀏覽器。使用IronPDF，開發人員可以輕鬆地將Razor組件轉換為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

要在 Razor 組件中使用 IronPDF，我們首先需要安裝 IronPDF NuGet 套件。請按照以下步驟操作：

1. 在 Visual Studio 中打開你的專案。

2. 右鍵點擊專案，選擇「管理 NuGet 套件」。

3. 搜索「IronPDF」，並選擇「IronPDF" 安裝套件。

4. 點擊"安裝"來安裝套件。

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

一旦安裝了該套件，您可以使用 IronPdf.ChromePDFRenderer 類別從 Razor 元件文件創建新的 PDF 文件：

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

    var Renderer = new IronPdf.ChromePdfRenderer();
             PdfDocument pdf = Renderer.RenderHtmlAsPdf("MY PDF # "+currentCount);
             pdf.SaveAs("myPdf"+currentCount+".pdf");

    var Renderer = new IronPdf.ChromePdfRenderer();
             PdfDocument pdf = Renderer.RenderHtmlAsPdf("MY PDF # "+currentCount);
             pdf.SaveAs("myPdf"+currentCount+".pdf");

Dim Renderer = New IronPdf.ChromePdfRenderer()
			 Dim pdf As PdfDocument = Renderer.RenderHtmlAsPdf("MY PDF # " & currentCount)
			 pdf.SaveAs("myPdf" & currentCount & ".pdf")

在這個範例中，我們創建了一個新的 "ChromPDFRenderer" 實例。然後我們創建了一個新的 PDFDocument 類別實例並將字符串傳遞給 RenderHtmlAsPdf 方法。最後，我們使用 PdfDocument.SaveAs 方法將生成的 PDF 檔案保存到磁碟中。

在這個範例中，我們修改了計數器元件。我們修改了計數器按鈕的 onClick 函數，點擊時會創建包含計數器計數的 PDF。

結論

在本文中，我們探討了如何使用 使用 IronPDF 的 Razor 元件 從網頁應用程式中生成 PDF 文件。我們已經涵蓋了 Razor 元件的基本知識、如何安裝和使用 IronPDF，並提供了代碼範例來幫助你入門。

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

IronPDF 也可以用來將 razor 頁面和 URL 轉換為 PDF，以及讀取、創建和操作 PDF 文件。IronPDF 甚至允許更細緻的 PDF 控制，例如添加頁眉、頁腳、頁碼、數位簽名、密碼等。 更多 到現有或新生成的 PDF 文件中。開發免費，但需要 免費 試用或 商業授權 供生產使用。