ASP.NET Blazor 怎麼處理狀態？（二）- 保存預設範本的 Count 值

4月 10, 2019

前言

上一次的文章【ASP.NET Blazor 怎麼處裡狀態？】中，筆者說明了幾種在 Blazor 上保存狀態的常見用法，但是當時筆者無法在 [YourProjectName].Client 的專案裡安裝『Microsoft.AspNetCore.Http』、『Microsoft.AspNetCore.Http.Abstractions』、『Microsoft.AspNetCore.Http.Feature』這三個套件均無法安裝成功，後來我發現，無法成功是正常的，這因為 [YourProjectName].Client 是執行在 browser 的沙箱(Sand box)裡面，試想，這三個套件都是相依於在沙箱裡，而這個沙箱內又以 Mono Runtime 來執行 .NET Standard，如果 .NET Standard 本身不支援那個 API 也無法執行對吧？更何況又在 browser 的沙箱環境中。這更不用說 Microsoft.AspNetCore.Http.Abstractions 裡還參照了在 Mono Runtime 裡不支援的 advapi32.dll & kernal32.dll 等

就算技術上可行，安全性其實也不允許你在沙箱內部存取外部 OS 資源。

也就是說，上次的那個作法是錯誤的，我們根本就不應該在 [YourProjectName].Client 裡面安裝那三個套件，應該回頭過來思考，我今天的需求是，要從 browser 將 COUNT 內容傳遞到 Server 上，並保存下來！也就是說，我們應該將 [YourProjectName].Client 這樣的專案當作是一個執行在前端browser 中包含 Front-End Framework 的 SPA 應用程式，這麼一來，是不是就清楚多了？因為 Client 是執行在 Browser 中，若不是 Blazor ，傳統 SPA 作法也是透過 JavaScript 執行 Ajax 的 Call Back 呼叫，將 Count 傳遞至 Web Server 上保存下來對吧？所以，Blazor 也會是相同的做法。

專案結構

正確做法是什麼？

(1). WebBlazorStateTest1.Client 的 Counter.cshtml

在 Counter.cshtml 裡，透過 view inject 注入 HttpClient 來撰寫呼叫 Web API 傳遞 currentCount 到後端並保存下來，由於程式碼非常簡單就不多做說明了。

(2). 啟用 MemoryCache

(3). 在 WebBlazorStateTest1.Server 的 SampleDataController 裡增加兩個 API 方法

接著，我們可以在 Counter 頁面得到保存 Count 數的效果如下圖：

但是，這時，如果開另外一個 browser 的話，別的使用者也會看見這個 Count 數，也就是說，它就像個 static 變數一樣，等於是共想於所有使用者，這似乎不是我們想要的，如果我們要每個人可以保存、並有自己的 Count 數值該怎麼做呢？

其實，最簡單的方式，就是用 Session，或者，在 Cache 的 Key 加上 By 登入的 User 的 userId 唯一值，像是（”_user_id_xxxx”+”_COUNT”）使不同使用者不會重複即可，並將 Session 的 Provider 導向 Redis，以便適用（Scale-Out／Load Balance ）環境中，達到狀態共享／高效能。

ASP.NET Blazor 系列文章導讀

（一）、ASP.NET Blazor 關鍵報告

（二）、Blazor 怎麼處裡狀態？

（三）、Blazor 怎麼處裡狀態？【保存預設範本的 Count 值】

（四）、Blazor 的 CRUD 應用程式 – Use Entity Framework Core

（五）、Blazor 如何使用自定義的 ApiHostBase？【接續 Clean Architecture 的 API 框架設計 (1)】

（六）、Blazor 如何使用自定義的 ApiHostBase？【接續 Clean Architecture 的 API 框架設計 (2)】

（七）、… 還在想 XDD

關於 Gelis：

資深 .NET 技術顧問

FB 社團 (軟體開發之路)：

https://www.facebook.com/groups/361804473860062/