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

前言

上一次的文章【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 到後端並保存下來，由於程式碼非常簡單就不多做說明了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@page "/counter"
@inject HttpClient _httpClient;
 
<h1>Counter</h1>
 
<p>Current count: @currentCount</p>
 
<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>
 
@functions {
    int currentCount = 0;
 
    async void IncrementCount()
    {
        currentCount++;
 
        await _httpClient.PostAsync($"api/SampleData/SetCountState/?count={currentCount}", null);
    }
 
    async Task<HttpResponseMessage> GetCountState()
    {
        HttpResponseMessage message = await _httpClient.GetAsync("api/SampleData/GetCountState");
 
        return message;
    }
 
    protected async override void OnInit()
    {
        string test = await _httpClient.GetStringAsync("api/SampleData/GetCountState");
 
        currentCount = Convert.ToInt32(test);
 
        base.OnInit();
 
        this.StateHasChanged();
    }
}


(2). 啟用 MemoryCache

1
2
3
4
5
6
public void ConfigureServices(IServiceCollection services)
{
    //..略
 
    services.AddDistributedMemoryCache();
}


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
protected IMemoryCache _memoryCache;
protected IHttpContextAccessor _httpContextAccessor;
 
public SampleDataController(IMemoryCache memoryCache)
{
    _memoryCache = memoryCache;
}
 
/// <summary>
/// 從 MemoryCache 中，取得 Counter 數值
/// </summary>
/// <returns></returns>
[HttpGet("[action]")]
public int GetCountState()
{
    int result = 0;
    var counter = _memoryCache.Get<int?>("_COUNTER");
     
    if (counter.HasValue)
    {
        result = counter.Value;
    }
     
    return result;
}
[HttpPost("[action]")]
public int SetCountState(int count)
{
    return _memoryCache.Set<int>("_COUNTER", count);
}


接著，我們可以在 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/

FB 粉絲團 (Gelis 的程式設計訓練營)：

https://www.facebook.com/gelis.dev.learning/

我講授過的課程 SlideShare：

https://www.slideshare.net/GelisWu


以下是我經營的項目與內容：

(1). 企業內訓課程

(2). 專業顧問


企業內訓課程：

1. .NET Core 3.1 從入門到進階

先前實體課程連結

2. 跨平台的 Web API Framework 框架設計

先前實體課程連結

3. 決戰 OOAD 系列課程 - 使用 UML

先前實體課程連結

4. 單元測試 UnitTest 與 Moq 物件實務課程

先前實體課程連結

5. 快速開發系列 - C# Project Templates 範本設計

留言

  1. Not2020年5月8日 清晨7:26

    期待這系列可以寫完！

    回覆刪除
    回覆
    1. Gelis 技術隨筆-部落格2020年6月4日 上午10:15

      Dear Not

      我會盡力抽空完成 XD 因為最近專案與顧問案兩頭燒 XDDD

      刪除

張貼留言

這個網誌中的熱門文章

什麼是 gRPC（二）- 來撰寫第一個 Hello World 吧！

圖片
前言 上一篇 什麼是 gRPC ，筆者大致介紹了 gRPC Service 的基本概念，這一次，我們就來小試一下身手，撰寫一個 Hello World （迷之音：嘗試新技術時，總是得先來一個 Hello World ～我不想違背這良好傳統阿阿阿阿） 使用環境 Visual Studio 2019 .NET Core 3.0.100-preview3-010431 開始進行 撰寫 gRPC 除了先準備好基礎環境、選定一種 作業系統／ 程式語言 Language 外、（Framework／SDK／Runtime）等環境備妥後，就可以開始撰寫， (1). 開始撰寫 gRPC 第一步就是先定義 .proto 協議了 上一篇筆者提到，gRPC 的 Server 與 Client 必須使用相同的協議才可進行溝通，一般來說，你應該使用 protoc.exe 編譯器先行編譯過 greet.proto 協議檔，並產出 C# 程式碼檔案後才可繼續，而在 Visual Studio 2019 裡，拜 MSBuild 之賜，已經有人預先寫好 .Target 檔案了 （什麼是 MSBuild ？什麼是附檔名 .Target 檔案可參考： MSBuild .targets 檔案 ） 筆者先撰寫一個 SayHelloWorld 方法如下： 在協議裡，除了在 service Class 撰寫要公開存取的方法外， 必須在提供『傳入訊息型態』、『回傳訊息型態』 ，這邊我先定義兩個 message，一個是『 HelloMyFirstgRPC 』、另一個是『 HelloMyReply 』 在撰寫 proto 協議檔時，建議先決定 message 回傳型態與傳入的型態，那麼 Visual Studio 2019 會有 InteillSense 的完整支援。不得不說 Visual Studio 2019 在 .proto 協議編輯上的支援已經算不錯了。 注意： 一般來說，Visual Studio 2019 會在背景裡自動編譯 .proto 協議檔案，但始有可能不會有任何提示，所以您也可以自行使用命令列工具進行手動編譯，如下圖，若編譯失敗會出現錯誤訊息，如下圖顯示 return 關鍵字錯誤： protoc.exe 編譯器 & 相關 MSBuild Tools 會隨著 NuGet 套件在 Vis...
閱讀完整內容

什麼是 gRPC ？

圖片
圖片取自： https://grpc.io/docs/guides/ gRPC 是什麼？能吃嗎？ 在安裝了 .NET Core 3.0 之後，眼尖的朋友應該會發現，在新增 ASP.NET Core 網頁類型專案裡，會看見一個 gRPC Service 類型的專案，其實它也不是什麼很新的東西，早在十多年前 Google 就使用這樣的 RPC 協定進行一些大量的可靠性微服務的存取，聽到這，難道現有的 Web API 不可靠嗎？其實不是的，它主要用在移動設備等提供高效簡單且跨平台的通訊與熱插拔的驗證機制。 gRPC 的運作原理 gRPC 顧名思義，是種基於 RPC 的通訊協定，不同於 Web API 走的傳統 HTTP 基礎協定，它有點像是 Socket ，但應該說是基於 Socket， 或精確地來說它是基於 HTTP/2 的協定 ，gRPC 是種協議緩衝協定，它必須事先定義 IDL (Interface Definition Language) 描述檔，看到 IDL 對於一些熟悉 COM／DCOM 的朋友一定非常的熟悉，對！沒錯！就是類似的東西！但，這邊的 IDL 是用一種副檔名為 .proto 檔案來是先定義在分散式環境中，要傳輸的序列化結構資訊，當然它也可以跟 JSON 一起使用。 也就是說，要使用 gRPC 您必須先定義 .proto 協議，然後透過 Compile 的支援，編譯成特定語言框架。而很高興的是，C# 也支援了，然而其實根據官方的資料顯示，C# 應該在 .NET Core 2.1 開始就支援了，只是到了 .NET Core 3.0 才有樣版的支援。 而使用 gRPC 的協議緩衝區的服務可以做到 Stub 的機制，也就是說，它就像是許多 RPC 一樣，Client 在呼叫 Server 端時，其實是對 Stub 進行叫用，Stub 在這就像個緩衝區一般，但更細部的說，應該是一個遠程服務的替身，這應該又讓許多熟悉 COM／RPC 通訊的朋友覺得熟悉了起來，是的！沒有錯。 在 .NET Core 3.0 裡使用 gRPC 目前支援 .proto 擴展為 gRPC 協議緩衝區的編譯器只有 .NET Core 了 ， 根據 Github 上的說明 .NET Framework 4.5+ 以上或 Mono 4+ 以上也可支援，而 gRPC 也完全的跨平台。要在 ....
閱讀完整內容

開啟Hyper-V的內部虛擬網路

圖片
撰文：吳俊毅 時間：2010/7/14 在操作使用Hyper-V的Guest OS時，如果您是使用操作VMWare的方式來思考Hyper-V的虛擬網路設定的話您可能會碰壁，為什麼呢？在VMWare中只要Network的Getwary服務有啟動的話預設的設定就會自動將Guest OS的虛擬網卡透過實體網卡將Guest OS對應成一台網路實體IP位置，所以對實體網路而言好像就是多了台電腦。 在Hyper-V中提供了3種虛擬網路類型： 1. 外部虛擬網路 使虛擬機器直接對應外部實體網卡，這種方式會讓虛擬機器直接存取實體外部網路，筆者實際測試發現會直接搶住實體網路卡。 2. 內部虛擬網路 所謂的內部虛擬網路是讓虛擬機器可以與外部機器溝通，簡單的說就是在您的本機中軟體虛擬一個如192.168.1.1~192.168.1.255的網段，通常用來測試一個虛擬網路環境，比如在當中架設Ap Server、Web Server，或甚至在虛擬網路中架設兩台DB Server來測試Cluster等等，不需使用實體網路來進行測試。 3. 私人虛擬網路 只是讓虛擬機器彼此間通訊，與外部網路隔絕。 如果您是VMWare的慣用者，第二種可能會比較適合您。筆者的測試環境是Windows Server 2008 Enterprise，使用的Hyper-V版本為6.0.6002.18005，要設定虛擬網路可從Hyper-V管理員的主畫面 點選後會進入如下虛擬網路管理員的畫面： 點選左邊的新增虛擬網路即可新增虛擬網路卡，讀者應該發現筆者已經新增了一張內部的網卡(筆者將其稱做Realtek RL8168 for External)。點選該內部網卡後，左半邊有可以設定的項目。筆者先說明想要幹什麼，筆者想讓Hyper-V內部網路同時具備內部虛擬網路的特性，同時又可以存取外部網路，同時外部實體機器也可以存取內部的虛擬機器，如同操作VMWare的習慣那樣。 當新增了Realtek RL8168 for External內部網卡之後在實體電腦的網路連線也會新增一個Realtek RL8168 for External的區域連線，如下圖所示： 接著將實體網卡與虛擬網卡均選起來，按右鍵選單的”新增到橋接器”，如下圖： 這麼可以使剛才我們在Hyper-V內部的Realtek RL8168 for External內部網卡存...
閱讀完整內容