初識 Blazor WebAssembly 1

Blazor介紹

1. 單一頁面應用程式(SPA) 架構
2. 使用C#代替JavaScript
3. 基於.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一次。

• Shared

  • 放非頁面元件

• Page

   注：program.cs有兩種結構形式，只可選一種寫法。若兩者都寫dotnet6語法會覆蓋舊有語法

  • 放頁面的元件

將1個.razor，分成.razor & .razor.cs 

Blazor官方文檔教學是將html&c#共同寫在.razor檔裡，但我們習慣將html&c#分開成.razor及.razor.cs兩個檔案。

注：

1. 建立.razor.cs檔案
2. 在.razor.cs中加入namespace及class，nampespace命名錯誤會導致兩個檔案無法互相參考
3. 將原檔案@code {}中內容移至.razor.cs的public partial class Class名稱{}中