共用方式為


ASP.NET Web Forms 和Blazor的架構比較

小提示

本內容節錄自《Blazor for ASP NET Web Forms Developers for Azure》電子書,可以從 .NET Docs 取得,也可以免費下載 PDF 離線閱讀。

Blazor-for-ASP-NET-Web-Forms-Developers 電子書封面縮圖。

雖然 ASP.NET Web Forms 並 Blazor 有許多類似的概念,但它們的運作方式有差異。 本章將探討 ASP.NET Web Forms 和 Blazor 的內部運作及架構。

ASP.NET Web Forms

ASP.NET Web Forms 架構是以頁面為中心的架構為基礎。 在應用程式中,每一個位置的 HTTP 請求都是一個獨立的頁面,ASP.NET 對其回應。 當要求頁面時,瀏覽器的內容會更新為所要求的頁面結果。

頁面包含下列元件:

  • HTML 標記
  • C# 或 Visual Basic 程式代碼
  • 程序代碼後置類別,其中包含邏輯和事件處理功能
  • 控制項

控件是可重複使用的 Web UI 單位,可透過程式設計方式放置及與頁面上互動。 頁面是由以包含標記、控件和某些程式代碼 .aspx 結尾的檔案所組成。 程序代碼後置類別位於具有相同基底名稱和 .aspx.cs.aspx.vb 擴展名的檔案中,視所使用的程式設計語言而定。 有趣的是,網頁伺服器會解譯 .aspx 檔案的內容,並在變更時加以編譯。 即使網站伺服器已經在運行,此重新編譯仍然會發生。

控件可以使用標記來建置,並以使用者控件的形式傳遞。 使用者控件衍生自 類別, UserControl 而且具有與Page類似的結構。 使用者控件的標記會儲存在 .ascx 檔案中。 隨附的程式代碼後置類別位於 .ascx.cs.ascx.vb 檔案中。 您也可以使用程式代碼完全建置控件,方法是繼承自 WebControlCompositeControl 基類。

頁面也有廣泛的事件生命週期。 每個頁面在 ASP.NET 執行頁面代碼和處理每次請求時,會觸發初始化、載入、預渲染和卸除等事件。

頁面上的控件通常會回傳到顯示控件的相同頁面,並會攜帶一個隱藏表單欄位稱為ViewState的有效負載。 欄位 ViewState 包含了控件在頁面上呈現時的狀態信息,使 ASP.NET 執行階段能夠比較和識別提交到伺服器的內容變更。

Blazor

Blazor 是用戶端 Web UI 架構,本質上類似於 JavaScript 前端架構,例如 Angular 或 React。 Blazor 處理用戶互動,並轉譯必要的UI更新。 Blazor 不是 以請求-回應模型為基礎。 用戶互動會被視作獨立於任何特定 HTTP 請求內容的事件進行處理。

Blazor 應用程式包含一或多個在 HTML 頁面上轉譯的根元件。

Blazor HTML 中的元件

使用者如何指定元件呈現的位置,以及元件如何接著配置以供使用者互動,這些都依據 特定於裝載模型

Blazor 元件 是代表可重複使用UI片段的 .NET 類別。 每個元件都會維護自己的狀態,並指定自己的轉譯邏輯,其中包括轉譯其他元件。 元件會指定特定用戶互動的事件處理程式,以更新元件的狀態。

元件處理事件之後,Blazor 會渲染元件,並記錄渲染輸出中所發生的變更。 元件不會直接轉譯至文件物件模型 (DOM)。 相反地,它們會轉譯為稱為 RenderTree 的 DOM 的記憶體內部表示法,以便 Blazor 追蹤變更。 Blazor 比較新轉譯的輸出與先前的輸出,以計算UI差異,然後有效地套用至 DOM。

Blazor DOM 互動

元件也可以手動指示如果其狀態在一般 UI 事件之外發生變更,應該渲染它們。 Blazor使用SynchronizationContext來強制執行單一邏輯執行緒。 元件的生命週期方法,以及由 Blazor 引發的任何事件回呼,會在這個 SynchronizationContext 上執行。