.NET 幫助

Razor 元件：開發者如何運作

發佈 2023年4月19日

隨著現代框架和庫的出現，網頁開發在這些年來已經取得了長足的進步，開發人員可以使用強大的工具來構建動態和互動的網頁。近年來，獲得顯著人氣的其中一項技術是 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 元件提供一種基於元件的架構，用於構建現代網絡應用程式，其中用戶界面分解為較小的、自包含的元件，可以組合在一起創建完整的網頁。

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

Razor 組件：它如何為開發者工作：圖 2 - 什麼是 Blazor 和什麼是 Razor 組件？

Razor 元件的優勢

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

可重用性

Razor 組件是獨立的組件，可以輕鬆地在網路應用程式的多個地方或不同專案中重複使用。這促進了代碼的重用，減少了代碼重複，從而使得網絡應用程序更具可維護性和可擴展性。

模組化

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

與 C# 無縫整合

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

伺服器端和客戶端執行

Razor 元件可以根據託管模型在伺服器端或客戶端執行。這為開發人員提供了靈活性，讓他們可以根據性能、安全性和用戶體驗等因素，選擇最合適的應用程式執行模式。

即時通訊

Razor 元件可以使用 SignalR（一個即時通訊庫）來建立客戶端與伺服器之間的雙向通訊。這使網路應用程式能夠進行即時更新和通知，提供回應靈敏和互動的使用者體驗。

可擴展性

Razor 元件具有高度可擴展性，允許開發者創建自定義元件、函式庫和模板。這使開發人員能夠構建符合其網絡應用程序特定需求的定制解決方案。

開始使用 Razor 元件

要開始使用 Razor 元件，您需要在系統上安裝 .NET Core 3.0 或更新版本。在 Visual Studio 或 .NET Core CLI 中使用 Blazor 範本創建新的 ASP.NET Core 專案。

    dotnet new razorcomponent

Razor 元件：開發人員操作方法：圖 3

    @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

VB C#

在此範例中，我們有一個名為「Counter」的 Razor 元件，其中有一個按鈕，在點擊時會遞增 currentCount 變數。 @code 區塊用於定義元件的 C# 代碼。

Razor 元件：開發人員的運作原理：圖 4

創建自訂 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

VB C#

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

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

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

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

<Parameter>
Public Property Message() As String

VB C#

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

    @Message

    @Message

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

VB C#

像這樣從父元件將數據傳遞給元件：

Razor 元件也可以包含可以在客戶端執行的伺服器端邏輯。例如，您可以編寫處理邏輯、進行 HTTP 請求、處理用戶事件，並使用 C# 代碼直接從 Razor 元件執行其他伺服器端操作。這使您能夠創建動態和互動的網頁，而無需編寫任何 JavaScript 代碼。

建立可重複使用的 Razor 元件

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

例如，假設我們想要建立一個顯示書籍清單的元件。我們可以在「Shared」資料夾中創建一個新的 BookList.razor 文件，例如：

Razor 元件：對開發人員的運作方式：圖 5 - 生成的類別

我們可以這樣定義 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

VB C#

在這個範例中，我們有一個名為 BookList 的元件，該元件將一個「Book」物件列表作為 razor 參數。 @foreach 迴圈用於遍歷列表並顯示每本書的標題和作者。

在下一節中，我們將探討如何使用IronPDF和Razor元件從網路應用程式建立PDF檔案。

將 IronPDF 與 Razor 元件結合使用

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

VB C#

安裝 IronPDF

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

在 Visual Studio 中打開您的專案。
右鍵點擊該專案，然後選擇「管理 NuGet 套件」。
搜尋「IronPDF」並選擇「IronPDF 套件"."
點擊「安裝」以安裝軟體包。
在安裝 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")

VB C#

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

在此範例中，我們已經修改了計數器元件。我們修改了計數按鈕的 onClick 函數，當點擊時，將創建一個包含計數器數量的 PDF。

結論

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

Razor 元件和 IronPDF 是可用來建立強大且功能豐富的網頁應用程式的強大工具。通過結合這些技術，開發人員可以創建出既具高度功能性又美觀的 web 應用程式。

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

< 上一頁
C# PDF NuGet（適用於開發者的工作方式）

下一個 >
MAUI 與 Blazor