Blazor App 教育訓練

目標

• 讀碼

• 練習一、基本知識與基本操作

• 練習二、CRUD 開發

Agenda

• demo

  • SKB Earth: http://192.168.0.67:8000/

  • WFAHRS: http://192.168.0.67:1910/

先附上回家作業

回家作業第四版

1KB

Blazor 作業_基本操作.txt

Open

回家作業第四版

回家作業第3e版 --- 已過時暫保留

3KB

Blazor作業_更新3e.txt

Open

回家作業第3e版 --- 已過時暫保留

why? how? what?

• why?

  • 雲端技術是必然的趨勢

  • WebForm 已過時

• how?

• Blazor Server App --- SSR

• Blazor WASM App --- CSR

• what?

  • 技術面

  • 請模拜 Google 大神 --- 若知道明確的關鍵詞。

  • 請 Chat GPT 給予指引

HTTP/1.1 → HTTP/2

補充：到今天為止(2022/11/15) HTTP/2的普遍率仍過低，各大 Browser 仍只支援 HTTP/1.1 而已，實在令人失望。

HTTP/2 從零到一Medium

網站框架大分類：CSR vs SSR vs SSG

• CSR - Client Side Rendering (動態網站)

  • react, vue, angular

  • 第三世代網站

• SSR - Server Side Rendering (動態網站)

  • Perl, ASP, JSP, PHP, WebForm

  • Next.js (react)

  • 第二世代網站

• SSG - Static site generate (靜態網站)

  • html

  • 回到第一世代網站？

俱體上的差異

• 有些機制（語法）不能互通。

why? 回到第一世代網站？

• 議題：搜尋引擎最佳化(SEO)

執行平台：.NET Framework → One.NET

產品線	說明
.NET Framework 4.8	退役
.NET Standard 2.1	加入 One.NET
.NET Core 3.1	加入One.NET
One.NET .NET5	重新包裝 雲端運算

為何要合併成 One.NET？

A: .NET 實作支援(https://docs.microsoft.com/zh-tw/dotnet/standard/net-standard)

新的問題：.NET Framework 可以用的第三方資源到了.NET5 可能不能用。

比如，

用途：DB Access 請務必用 Microsoft.Data.SqlClient 類別取代 System.Data.SqlClient，其未來將不再更新。

用途：JSON Serializer 請務必用 System.Text.Json.JsonSerializer 類別 取代 Newtonsoft.Json。

Blazor NuGet套件/插件整理 | 取之於網路 用之於網路rely-ky.gitbook.io

網站框架：WebForm,MVC5 → MVC6,Blazor

ASP.NET MVC 5 / ASP.NET Web Forms

• WebForm, MVC5

• web.config (xml)

• global.asax

ASP.NET Core 5.0

• MVC6/Blazor

• appsetting.json

• startup.cs

• (OWIN + DI)

觀念疏理 MVC5 → MVC6 不是昇版而是世代轉換。 .NET Framework→(重構)→.NET Core →(統整)→ One.NET

總和起來：Blazor App

Blazor Server App

• .NET5

• MVC6/Blazor

• SignalR

• SSR

Blazor WASM App

• .NET5

• MVC6/Blazor

• HTTP/2 (有支援)

• CSR

Blazor Server vs. Blazor WebAssembly 裝載模型 | 取之於網路 用之於網路rely-ky.gitbook.io

主要模組

• 平台：.NET6

• 骨架：Blazor Server App

• CSS Framework: MudBlazor v6

• DB：Dapper

開始寫程式

• Visual Studio 2019 Visual Studio 2022

• .NET5 .NET6

• C# 9 C# 10

• CSS Framework

  • MudBlazor

• Dapper

  • 存取SQL Server

• @bind-

  • one way binding

  • two way binding

    • @bind-Value

    • ValueChanged

• EventCallback<TMessage>

• async/await

  • 非同步語法

  • 實現 Reactive UI

• CSS isolation

• Microsoft.Data.SqlClient 取代 System.Data.SqlClient。

• System.Text.Json.JsonSerializer 取代 Newtonsoft.Json。

伸延閱讀

Blazor tutorial for beginners - part 1 | 取之於網路 用之於網路rely-ky.gitbook.io

Blazor tutorial for beginners - part 2 | 取之於網路 用之於網路rely-ky.gitbook.io

Dapper Query 手札 | 取之於網路 用之於網路rely-ky.gitbook.io

必讀文章

ASP.NET Core Razor 元件生命週期MicrosoftLearn

https://learn.microsoft.com/zh-tw/aspnet/core/blazor/state-management?view=aspnetcore-6.0&pivots=serverlearn.microsoft.com

EOF