Blazor 3 使用事件聚合器來動態顯示或者隱藏控制練習

建立測試專案

現在可以開始建立第一個 Blazor 開發專案。

啟動 Visual Studio 2017
點選功能表的 [檔案] > [新增] > [專案] 功能表選項
在 [新增專案] 對話窗中左邊區域，選擇 [已安裝] > [Visual C#] > [Web] > [ASP.NET Core Web 應用程式]
在對話窗的下方的 [名稱] 欄位中，輸入這個練習專案的名稱 BlazorEventAggregator
在對話窗的下方的 [位置] 欄位中，選擇這個專案要儲存的檔案路徑
最後點選對話窗的右下方 [確定] 按鈕
在 [新增 ASP.NET Core Web 應用程式] 對話窗左上方區域，在第一個下拉選單，選擇 [.NET Core] 在第二個下拉選單，請選擇最新的 ASP.NET Core 版本，在現在這個時間點，可以選擇 [ASP.NET Core 2.1]
在對話窗中間區域，請點選 [Blazor] 這個項目
最後點選對話窗的右下方 [確定] 按鈕
使用滑鼠右擊在最上方的方案節點，選擇 [加入] > [新增專案]
在 [新增專案] 對話窗中，點選左方的 [已安裝] > [Visual C#]
接著，在對話窗的中間，點選 [類別庫 .NET Standard]
在對話窗下方的名稱欄位，輸入 EventAggreators ，最後點選 [確定] 按鈕，完成建立這個 .NET Standard 類別庫
請將 BlazorEventAggregator 這個 Github Repository 內專案名稱為 EventAggreators 下的 Events 目錄，複製到剛剛建立的 EventAggreators 專案下。
滑鼠右擊 BlazorEventAggregator 專案內的 [相依性] 節點，選擇 [加入參考]
當 [參考管理員] 對話窗出現之後，點選左方的 [專案] 節點，在勾選中間的 EventAggregators 組件名稱
點選 [確定] 按鈕
底下是完成後的專案架構

進行 Prism 事件聚合器的 DI 容器註冊

當使用事件聚合器的時候，在這個專案內需要有個全域的事件聚合器物件，這樣才能夠讓各個子元件來進行訂閱特定事件的需求；在 Blazor 專案內，將會使用 IoC 容器 Container 機制進行事件聚合器介面與具體實作類別的註冊，而在每個子元件若要透過事件聚合器進行特定事件的訂閱或者發布的時候，就可以注入 IEventAggregator 這個介面，便可以取得 Prism 事件聚合器的實作物件。

打開專案內的 [StartUp.cs] 檔案
找到 [ConfigureServices] 方法，使用 AddSingleton 方法來進行註冊，這裡可以使用 services.AddSingleton<IEventAggregator, EventAggregator>(); 這個方法。

Startup.cs

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddSingleton<IEventAggregator, EventAggregator>();
    }
    public void Configure(IBlazorApplicationBuilder app)
    {
        app.AddComponent<App>("app");
    }
}

建立事件聚合器會用到的事件資料模型

接下來要建立兩個事件聚合器的事件 ShowLoginEvent 與 ShowLogoutEvent 兩個類別，這兩個類別都需要繼承 PubSubEvent 這個類別，其中泛型型別的 T 為該特定事件發布與觸發的時候，所要傳送與接收的資料型別。

滑鼠右擊 BlazorEventAggregator 專案節點，選擇 [加入] > [新增資料夾]，並且輸入 [Models] 資料夾名稱
建立 ShowLoginEvent 事件類別
- 滑鼠右擊 [Models] 資料夾節點，選擇 [加入] > [類別]
- 在 [新增項目] 對話窗中，點選 [已安裝] > [ASP.NET Core] > [密碼] > [類別] 選項，接著，在下方名稱欄位，輸入 ShowLoginEvent.cs ，最後點選右下方的 [新增] 按鈕
將底下程式碼輸入到剛剛建立的 ShowLoginEvent 類別內

Models > ShowLoginEvent.cs

public class ShowLoginEvent : PubSubEvent<ShowLoginEventPayload>
{
}
public class ShowLoginEventPayload
{
    public bool IsShow { get; set; }
}

建立 ShowLogoutEvent 事件類別
- 滑鼠右擊 [Models] 資料夾節點，選擇 [加入] > [類別]
- 在 [新增項目] 對話窗中，點選 [已安裝] > [ASP.NET Core] > [密碼] > [類別] 選項，接著，在下方名稱欄位，輸入 ShowLogoutEvent.cs ，最後點選右下方的 [新增] 按鈕
將底下程式碼輸入到剛剛建立的 ShowLogoutEvent 類別內

Models > ShowLogoutEvent.cs

public class ShowLogoutEvent : PubSubEvent<ShowLogoutEventPayload>
{
}
public class ShowLogoutEventPayload
{
    public bool IsShow { get; set; }
}

修正網頁共用版型元件

在這裡將會要在網頁的最上方加入兩個按鈕： Login 與 Logout ，整個網頁在一啟動的時候，將只會顯示 Login 按鈕，而 Logout 按鈕將會收起隱藏起來，這裡將會透過單向資料綁定功能，在這裡兩個按鈕上分別使用 @ShowLogin 與 @ShowLogout 在 class 屬性上，進而來綁定 .NET C# 中的 ShowLogin / ShowLogout 這兩個變數。因此，當想要顯示某個 DOM 項目的時候，僅需要把特定變數的字串值設定為空字串，若要隱藏某個 DOM 項目 Element 的時候，便可以設定特定變數的字串值為 collapse。

那麼，要在哪個地方來進行變更特定 DOM 項目的顯示與隱藏的變數值設定呢？此時，先要宣告這個元件需要自動注入 IEventAggregator 這個事件聚合器物件，因此，在最上方使用 @inject IEventAggregator eventAggregator 陳述式，這樣，在這個元件內就可以使用 eventAggregator 這個變數來操作 Prism 的事件聚合器；而在接下來的設計過程，將會需要使用到剛剛建立的兩個事件類別，因此，使用 @using BlazorEventAggregator.Models 陳述式，宣告這個元件可以使用 BlazorEventAggregator.Models 命名空間內的型別。

最後，在這個元件內需要進行事件訂閱的設計，也就是當其他元件要把登入按鈕隱藏起來，並且顯示登出按鈕，在這個訂閱事件內便可以處理這些需求，那麼，該在哪裡設計這樣的需球，這個時候需要覆寫 override OnInit 這個方法，並且在這個方法內進行使用事件聚合器來訂閱特定事件的委派方法。

當要使用事件聚合器來訂閱特定事件，可以使用事件聚合器物件的 GetEvent 泛型方法，取得特定事件型別，接著就可以使用 Subscribe 這個方法來指定一個委派方法，例如，eventAggregator.GetEvent<ShowLoginEvent>().Subscribe 這個敘述，將會使用事件聚合器物件，來進行 ShowLoginEvent 事件的訂閱。

最後，就可以在委派的訂閱事件方法內，根據使用者使用 Publish 方法所傳送過來的狀態物件，進行設定 ShowLogin 或者 ShowLogout 變數值，不過，最後一定需要執行 base.StateHasChanged(); 方法，這樣 ShowLogin 或者 ShowLogout 變數值就會透單向資料綁定更新到網頁的 DOM 上了。關於更多關於 StateHasChanged 的說明，可以參考 Class BlazorComponent

現在，請依照底下說明來修正專案程式碼

請打開 [Shared] 資料夾內的 [MainLayout.cshtml] 檔案
使用底下程式碼替換掉 [MainLayout.cshtml] 檔案內容

Shared > MainLayout.cshtml

@inherits BlazorLayoutComponent
@using Prism.Events
@using BlazorEventAggregator.Models
@inject IEventAggregator eventAggregator

<div class="sidebar">
    <NavMenu />
</div>

<div class="main">
    <div class="top-row px-8">
        <button class="btn btn-primary @ShowLogin">Login</button>
        <button class="btn btn-warning @ShowLogout">Logout</button>
        <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
    </div>

    <div class="content px-4">
        @Body
    </div>
</div>

@functions
{
    string ShowLogin = "";
    string ShowLogout = "collapse";

    protected override void OnInit()
    {
        eventAggregator.GetEvent<ShowLoginEvent>().Subscribe(x =>
        {
            if (x.IsShow == true)
            {
                ShowLogin = "";
            }
            else
            {
                ShowLogin = "collapse";
            }
            base.StateHasChanged();
        });

        eventAggregator.GetEvent<ShowLogoutEvent>().Subscribe(x =>
        {
            if (x.IsShow == true)
            {
                ShowLogout = "";
            }
            else
            {
                ShowLogout = "collapse";
            }
        });
        base.StateHasChanged();
    }
}

修正 Counter 元件，發佈特定事件通知

現在將會要來修正 Counter 元件，當使用者在 Counter 元件中點選按鈕，且當時的計數器值為偶數的時候，Login 按鈕會隱藏起來，而 Logout 按鈕會顯示出來，反之若當時計數器值為奇數的時候，Login 按鈕便會顯示出來，Logout 按鈕就會隱藏起來；而在這裏的顯示與隱藏功能。現在，先在該元件的最上方加入 @inject IEventAggregator eventAggregator 表示要注入事件聚合器物件與 @using BlazorEventAggregator.Models表示要參考 BlazorEventAggregator.Models 命名空間。

在按鈕事件 IncrementCount 中，判斷 currentCount 這個整數變數值為單數或者是偶數，接著可以使用 eventAggregator.GetEvent<ShowLoginEvent>().Publish 與 eventAggregator.GetEvent<ShowLogoutEvent>().Publish 方法，分別對事件聚合器物件送出兩個事件通知，這樣，只要有透過該事件聚合器物件訂閱的方法，就會被觸發執行了。

現在，請依照底下說明來修正專案程式碼

請打開 [Pages] 資料夾內的 [Counter.cshtml] 檔案
使用底下程式碼替換掉 [Counter.cshtml] 檔案內容

Pages > Counter.cshtml

@page "/counter"
@using Prism.Events
@using BlazorEventAggregator.Models
@inject IEventAggregator eventAggregator

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>

@functions {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;

        if (currentCount % 2 == 0)
        {
            eventAggregator.GetEvent<ShowLoginEvent>().Publish(new ShowLoginEventPayload()
            {
                IsShow = true
            });
            eventAggregator.GetEvent<ShowLogoutEvent>().Publish(new ShowLogoutEventPayload()
            {
                IsShow = false
            });
        }
        else
        {
            eventAggregator.GetEvent<ShowLoginEvent>().Publish(new ShowLoginEventPayload()
            {
                IsShow = false
            });
            eventAggregator.GetEvent<ShowLogoutEvent>().Publish(new ShowLogoutEventPayload()
            {
                IsShow = true
            });
        }
    }
}

執行結果

現在，請執行這個專案，點選左邊側邊攔的 Counter 項目，接著在網頁中間來點選 Click me 這個按鈕，現在將會發現到，若 currentCount 這個變數為偶數的時候，上方的僅會出現 Login 按鈕

反之，若 currentCount 這個變數為奇數的時候，上方的僅會出現 Logout 按鈕

C# .NET Blazor MAUI Xamarin Research

2018年12月2日星期日