Razor vs Blazor

**Razor 和 Blazor 是在 Visual Studio 開發環境中創建網頁應用程式的兩大流行網頁 UI 框架。 這篇博客文章將根據語法、互動、優點和缺點來檢視這兩個 .NET 技術的相似之處和不同之處。 它還將展示一些使用案例和一些代碼示例。

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

剃刀

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 網頁應用程式時，我們使用 Razor 語法，因為它更接近於 ASP.NET Core 和 ASP.NET MVC。

Blazor 使用 Razor 語法撰寫的一個或多個元件構建靈活的互動式用戶界面。

在這個時候，我們必須對 Razor 在 Blazor 中的使用方式做出重要區分：它用於構建元件（按鈕、頁面元素等），而不是用於構建整個頁面。

此外，Blazor 中的 Razor 文件（具有 .chtml 擴展名的文件）在正式場合被稱為Razor 元件，而不是Blazor 元件（儘管這兩個詞在許多開發圈子中可以互換使用）。

Razor 頁面和 Blazor 服務器的工作原理

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 開發 Web 應用程式時需要考慮的一些優點和缺點。

Blazor 的優點

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

Blazor 的缺點

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

Razor 的優點

• Razor 允許在網頁中邏輯（條件）插入 C# 程式碼。
• Razor 非常靈活，可以用來創建各種應用程式。
• Razor 的結構組織良好。

Razor 的缺點

• JavaScript 是實現動態客戶端互動所需的。

• Razor 管理和維護多個自包含頁面可能會很困難。

  IronPDF 的突出功能是使用 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 是一個單頁應用程式框架，可以根據具體情況運行在 Blazor WebAssembly 或 Blazor Server 上。

探索 IronPDF，以最簡單的方式在Razor 應用程式和Blazor 應用程式中創建、閱讀、更新和操作 PDF 文件。 IronPDF 是Iron Software 的 Iron Suite的一部分，該套件包含五個有用的庫，有助於使用 Excel、PDF、條碼、QR 碼和圖像創建 Razor 或 Blazor 網頁應用程式。

Iron Suite 可供個人免費使用。 如需有關獲取商用許可的更多信息，請訪問Iron Suite 許可信息。