發表文章

目前顯示的是 十月, 2018的文章

Blazor Hello world

圖片
同事分享了關於ASP.NET Blazor實作Web Assembly相關的文章,今天試著玩看看。嗯..新手入門,當然是Hello world了..。
如何安裝 在擴充功能搜尋Blazor,安裝ASP.NET Core Blazor Language Service,看到套件名字就知道了,要.Net Core才可以喔~~
選擇專案樣板 安裝後,在新增專案時會多出三個樣板
最基本的Client Side的專案,選擇這個,基本上就可以執行,但我們通常會切分Client及後端取資料的API,所以不會選這個。 ServerAPI+Shared(共用專案)+Client Side,通常會選這個,這個是標準的Server API與Client架構。 ps::第1,2的樣板會將dll載入前端,並透過blazor.webassembly.js Render Html。 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
相關參考
https://koukia.ca/blazor-spa-framework-on-net-via-webassembly-b7a0046e7f21
https://www.slideshare.net/WillHuangTW/writing-spa-using-aspnet-blazor
https://github.com/AdrienTorris/awesome-blazor