小提示
本內容節錄自《Blazor for ASP NET Web Forms Developers for Azure》電子書,可以從 .NET Docs 取得,也可以免費下載 PDF 離線閱讀。
雖然 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 檔案中。 您也可以使用程式代碼完全建置控件,方法是繼承自 WebControl 或 CompositeControl 基類。
頁面也有廣泛的事件生命週期。 每個頁面在 ASP.NET 執行頁面代碼和處理每次請求時,會觸發初始化、載入、預渲染和卸除等事件。
頁面上的控件通常會回傳到顯示控件的相同頁面,並會攜帶一個隱藏表單欄位稱為ViewState的有效負載。 欄位 ViewState 包含了控件在頁面上呈現時的狀態信息,使 ASP.NET 執行階段能夠比較和識別提交到伺服器的內容變更。
Blazor
Blazor 是用戶端 Web UI 架構,本質上類似於 JavaScript 前端架構,例如 Angular 或 React。 Blazor 處理用戶互動,並轉譯必要的UI更新。 Blazor 不是 以請求-回應模型為基礎。 用戶互動會被視作獨立於任何特定 HTTP 請求內容的事件進行處理。
Blazor 應用程式包含一或多個在 HTML 頁面上轉譯的根元件。
使用者如何指定元件呈現的位置,以及元件如何接著配置以供使用者互動,這些都依據 特定於裝載模型。
Blazor 元件 是代表可重複使用UI片段的 .NET 類別。 每個元件都會維護自己的狀態,並指定自己的轉譯邏輯,其中包括轉譯其他元件。 元件會指定特定用戶互動的事件處理程式,以更新元件的狀態。
元件處理事件之後,Blazor 會渲染元件,並記錄渲染輸出中所發生的變更。 元件不會直接轉譯至文件物件模型 (DOM)。 相反地,它們會轉譯為稱為 RenderTree 的 DOM 的記憶體內部表示法,以便 Blazor 追蹤變更。
Blazor 比較新轉譯的輸出與先前的輸出,以計算UI差異,然後有效地套用至 DOM。
元件也可以手動指示如果其狀態在一般 UI 事件之外發生變更,應該渲染它們。
Blazor使用SynchronizationContext來強制執行單一邏輯執行緒。 元件的生命週期方法,以及由 Blazor 引發的任何事件回呼,會在這個 SynchronizationContext 上執行。