Blazor介紹
- 單一頁面應用程式(SPA) 架構
- 使用C#代替JavaScript
- 基於.net6開發技術,並使用c#與razor語法
Blazor WebAssembly & Blazor Server
Blazor有2種運行模式 Blazor WebAssembly & Blazor Server
- Blazor WebAssembly 跑在瀏覽器
- Blazor Server 跑在伺服器端
項目 | Blazor WebAssembly | Blazor Server |
---|---|---|
載入速度 | √ | |
執行速度 | √ | |
是否需要Server | 不需要 | 需要 |
程式進入點 | Program.cs | Program.cs |
檔案結構:Blazor Server和Blazor WebAssembly分別有Program.cs, Startup.cs以及Program.cs,兩者的程式進入點都是Program.cs,不同之處在於Blazor Server會再呼叫UseStartup方法。Blazor WebAssembly則是直接在Program.cs呼叫Service。
.net6已將 和 Program.cs 整合 Startup.cs 成單 Program.cs 一檔案
Blazor資料夾結構
-
Programs.cs
Blazor Server會再呼叫UseStartup方法
Blazor WebAssembly則是直接在Program.cs呼叫Service- 程式的進入點
- 注入service的檔案
-
wwwroot
放靜態檔案,例:css、圖片、js。
Blazor WebAssembly的在wwwroot多了一個index.html,這個index.html指定了App元件要渲染的位置。
-
App.razor
- 接收、處理路由。
-
_Imports.razor
- 引用常用元件的namespace
這樣未來使用元件時,就不需要在每個地方都using一次。
- 引用常用元件的namespace
-
Shared
- 放非頁面元件
-
Page
注:program.cs有兩種結構形式,只可選一種寫法。若兩者都寫dotnet6語法會覆蓋舊有語法
- 放頁面的元件
將1個.razor,分成.razor & .razor.cs
Blazor官方文檔教學是將html&c#共同寫在.razor檔裡,但我們習慣將html&c#分開成.razor及.razor.cs兩個檔案。
注:
- 建立
.razor.cs
檔案 - 在
.razor.cs
中加入namespace
及class
,nampespace命名錯誤會導致兩個檔案無法互相參考 - 將原檔案
@code {}
中內容移至.razor.cs
的public partial class Class名稱{}中