Razor vs Blazor

Razor 和 Blazor 是在 Visual Studio 開發環境中創建 web 應用程式的最流行的兩種 web UI 框架。本篇博客將根據它們的語法、交互、優點和缺點來檢視這兩種 .NET 技術的相似點和差異。它還會展示一些使用案例和一些代碼範例。

什麼是 ASP.NET Core 中的 Razor 和 Blazor？

Razor

Razor 是一種伺服器端標記語言，允許開發人員使用 HTML 和內嵌的 .NET 伺服器端代碼動態創建網頁。Razor 從 Razor 頁面 生成網頁，這些模板文件是使用 C# 或 VB 編寫的。使用 VB 代碼編寫的 Razor 頁面使用 .vbhtml 文件擴展名，而使用 C# 代碼編寫的 Razor 頁面使用 .cshtml 文件擴展名。

現代 ASP.NET 網絡應用程式支持 Razor，它可以用於代替傳統的 ASP.NET 標記來生成應用程視圖組件。

Blazor

Blazor 是一個網頁應用程式框架，允許開發者使用 .NET 程式語言構建互動的客戶端界面應用程式。使用 Blazor 構建的網頁應用程式是單頁應用程式。 (SPA) 在網路瀏覽器客戶端中執行 (不是在網路伺服器上). 瀏覽器端應用程式執行因 WebAssembly 而成為可能。WebAssembly 是現代網頁瀏覽器中的跨平台指令集庫，能夠執行 .NET 原始碼。

透過 Blazor，開發人員可以使用 C#、HTML 和 CSS 創建可重複使用的互動式客戶端網頁組件。 (無需整合 JavaScript)此外，由於這些元件是用 C# 編寫的，開發人員可以根據需要在客戶端和服務器之間靈活地移動實現細節，包括源代碼和庫。

Blazor 是否使用 Razor 組件？

Blazor 完全支援 Razor 語法。您可以使用 Razor 的完整標記功能集來構建 Blazor 應用程式：使用迴圈、條件語句等。請參考以下範例。

@page "/HelloWorld"

<h1>
   Example Component
</h1>

@foreach(var person in People){
    <h2>person.FirstName</h2>
}

@page "/HelloWorld"

<h1>
   Example Component
</h1>

@foreach(var person in People){
    <h2>person.FirstName</h2>
}

'INSTANT VB TODO TASK: The following line could not be converted:
page "/HelloWorld" (Of h1) Example Component </h1> foreach(var person in People)
If True Then
	(Of h2) person.FirstName</h2>
End If

Razor 與 Blazor 之間的連結

我們可以清楚地看到 Blazor 和 Razor 之間的關係。畢竟，Blazor 本身的名稱就是由「browser」和「razor」這兩個詞組合而成的。

Razor 和 Blazor 都是用來使用 HTML 和 C# 建立 Web 應用程式。由於它們是開源且免費的，開發人員可以立即且無限制地使用它們。在開發 ASP.NET Web 應用程式時，我們使用 Razor 語法，因為它更像是 ASP.NET Core 和 ASP.NET MVC。

Blazor 從一個或多個使用 Razor 語法撰寫的元件建立靈活的互動使用者介面。

在這裡我們必須做出一個重要的區分，即 Razor 在 Blazor 中的使用方式：它是用來建立元件的。 (按鈕、頁面元素等)，並且不要製作整個頁面。

此外，Razor 文件 (具有 .chtml 擴展名的文件) 在Blazor中的正式名稱是Razor 元件，而不是Blazor 元件 (儘管在許多開發圈中兩個詞經常被互換使用).

Razor Pages 和 Blazor Server 的運作方式

Razor 在 MVC 應用程式中工作，將整頁內容提供給瀏覽器。

Razor Pages 實戰

當使用者點擊按鈕或連結時，瀏覽器會向伺服器發送請求，伺服器會訪問資料庫，檢索.cshtml Razor 視圖。 (或 Razor 頁面)，將數據和標記混合在一起，然後將整個內容返回到瀏覽器 (重新渲染整個頁面)Blazor 另一方面，它允許您使用一系列以 Razor 語法編寫的較小組件來創建整個網頁。

Blazor 實踐

這說明了Blazor WebAssembly的操作 (Blazor WASM)第一次呼叫您的 Blazor WASM 應用程式會返回完整的程序，包括您定義的所有組件，類似於使用 JavaScript 創建的單頁應用程式。

現在，瀏覽器可存取這些元素，可以根據資訊和事件顯示、隱藏和更新它們。

這樣一來，Blazor 應用程式與您使用 "現代" JavaScript 函式庫/架構（如 Vue 或 Angular）開發的應用程式更加相似。Blazor 應用程式在瀏覽器運行時會向後端進行網路呼叫，以檢索和發送資料。

現在，讓我們討論一些 Blazor 應用程式和 Razor 視圖引擎的優缺點。

Blazor 和 Razor 的優缺點

在基於 .NET 框架建立互動式網路應用程式時，Blazor 和 Razor 都非常受歡迎。這些技術提供了一種新的轉變，將 C# 作為標準 JavaScript 專案的主要編程語言。

以下是使用 Razor 或 Blazor 創建網頁應用程式時需要考慮的一些優點和缺點。

Blazor 的優點

• 用戶端 Blazor 使用 WebAssembly 直接在瀏覽器中執行 .NET 程式碼 (使其更快且減少網絡頻寬的浪費=) 並提供動態網頁內容。
• 它使用與伺服器端語言相同的語法和邏輯，使其與所有 .NET 庫和工具相容。

Blazor的缺點

• 使用Blazor執行客戶端.NET應用程式時，可用的.NET工具和除錯支援有限。
• 客戶端Blazor的性能優勢在伺服器端實現中不存在。

Razor 的優點

• Razor 使邏輯能夠 (條件) 將 C# 代碼插入網頁中。

• Razor 非常靈活，可以用來創建各種各樣的應用程式。

• Razor 的結構非常有條理。

Razor 的缺點

• 需要 JavaScript 來實現動態的客戶端互動。
• 多個自組頁面可能難以使用 Razor 來管理和維護。

IronPDF 的突出功能是轉換 HTML轉PDF, 保留布局和樣式。此功能非常適合從基於網絡的內容生成PDF，例如報告、發票和文檔。HTML文件、網址和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

結論

Razor 可以處理 API 邏輯和伺服器端模板，但不能處理非 JavaScript 基礎的客戶端邏輯。Blazor 允許程式員僅使用 C# 來處理客戶端和伺服器端功能。Razor 是一種用於模板的標記語法。它將伺服器端代碼整合進 HTML 中。相反地，Blazor 是一種 SPA 框架，可以根據情況在 Blazor WebAssembly 或 Blazor Server 上運行。

IronPDF 提供了在兩者中創建、閱讀、更新和操作PDF文件的最簡單方法 剃刀 和 Blazor 應用程式。IronPDF 是 Iron Software 的 Iron Suite 由五個有用的庫組成，這些庫對於使用Excel、PDF、條碼、QR碼和圖像創建Razor或Blazor Web應用程式非常有幫助。

Iron Suite可免費供個人使用。如需有關獲得商業許可的更多信息，請點擊 這裡.