.NET 幫助

Razor vs Blazor

發佈 2022年12月18日

Razor 和 Blazor 是在 Visual Studio 開發環境中建立網頁應用程式的兩種最受歡迎的 Web 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

VB C#

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 中的使用方式做出重要區分：它用於構建組件。(按鈕、頁面元素等。)，且不建立整個頁面。

此外，Razor 文件(具有 .chtml 擴展名的文件)在Blazor中的正式名稱是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

VB C#

結論

Razor 可以處理 API 邏輯和伺服器端模板，但無法處理非 JavaScript 為基礎的客戶端邏輯。 Blazor 讓程式設計師只使用 C# 就能處理客戶端和伺服器端的功能。 Razor 是一種用於模板的標記語法。它將伺服器端代碼整合到 HTML 中。另一方面，Blazor 是一個單頁應用程式框架，可以根據具體情況運行在 Blazor WebAssembly 或 Blazor Server 上。

探索 IronPDF創建、閱讀、更新和處理 PDF 檔案的最簡單方法是這樣的Razor 應用程式和Blazor 應用程式. IronPDF 是 Iron Software 的 Iron Suite包含五個有用的庫，有助於使用 Excel、PDF、條形碼、QR 碼和圖像創建 Razor 或 Blazor 網頁應用程式。

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

< 上一頁
Blazor 框架是什麼（對開發人員的工作原理教程）

下一個 >
什麼是NuGet？