Blazor Hello world

同事分享了關於ASP.NET Blazor實作Web Assembly相關的文章,今天試著玩看看。嗯..新手入門,當然是Hello world了..。

如何安裝
在擴充功能搜尋Blazor,安裝ASP.NET Core Blazor Language Service,看到套件名字就知道了,要.Net Core才可以喔~~

選擇專案樣板
安裝後,在新增專案時會多出三個樣板

  1. 最基本的Client Side的專案,選擇這個,基本上就可以執行,但我們通常會切分Client及後端取資料的API,所以不會選這個。
  2. ServerAPI+Shared(共用專案)+Client Side,通常會選這個,這個是標準的Server API與Client架構。
    ps::第1,2的樣板會將dll載入前端,並透過blazor.webassembly.js Render Html。
  3. ServerAPI+Shared(共用專案)+Server Side,這個跟第2點很像,差在它不會下載dll到前端,而Html是逶過blazor.server.js跟Server的溝通取得,若Server此時無法回應,那當你在切換Url時會無法Render。

Hello World
本範例選擇第二個樣板,會建立三個專案如下所示:

  • Client : 前端View
  • Server :  後端Web API,此為主要執行的專案
  • Shared : 共用專案 例如:Model
測試網頁,只要執行Server就可看到網頁了,此專案會將Client的View載入來顯示。


關於後端API呼叫

預設Server專案會有一個SampleDataController,示範讓Client取得資料顯示
SampleDataController.cs

Client View叫用API

以上.....都是預設產生的,一行程式都沒寫XD

相關參考



這個網誌中的熱門文章

[TFS] 分支與合併

[.NET Core] 將專案發行至IIS