Blazor 2 HTML Element 動態顯示或者隱藏的控制練習

建立測試專案

若已經將 Blazor 開發工具安裝與設定完成之後，現在可以開始建立第一個 Blazor 開發專案。

啟動 Visual Studio 2017
點選功能表的 [檔案] > [新增] > [專案] 功能表選項
在 [新增專案] 對話窗中左邊區域，選擇 [已安裝] > [Visual C#] > [Web] > [ASP.NET Core Web 應用程式]
在對話窗的下方的 [名稱] 欄位中，輸入這個練習專案的名稱 BlazorElementVisibility
在對話窗的下方的 [位置] 欄位中，選擇這個專案要儲存的檔案路徑
最後點選對話窗的右下方 [確定] 按鈕
在 [新增 ASP.NET Core Web 應用程式] 對話窗左上方區域，在第一個下拉選單，選擇 [.NET Core] 在第二個下拉選單，請選擇最新的 ASP.NET Core 版本，在現在這個時間點，可以選擇 [ASP.NET Core 2.1]
在對話窗中間區域，請點選 [Blazor] 這個項目
最後點選對話窗的右下方 [確定] 按鈕

練習步驟

接下來將要建立一個元件 Component，在這個元件中將會使用 div 標籤 (Tag) ，在裡面會有8個按鈕顯示在畫面上。在最後面會有一個切換顯示狀態按鈕，當點選這個按鈕之後，剛剛 div 標籤內的8個按鈕就會消失不見，若再度點選切換顯示狀態按鈕，則這8個按鈕就會再度出現。

建立一個名為 EleVisible 的 Razor 檢視檔案
- 在 [Pages] 資料夾使用滑鼠右擊，選擇 [加入] > [新增項目]
- 在 [新增項目] 對話窗中，點選 [已安裝] > [ASP.NET Core] > [Razor 頁面] 選項，接著，在下方名稱欄位，輸入 EleVisible.cshtml ，最後點選右下方的 [新增] 按鈕
將 EleVisible.cshtml 檔案使用底下 Razor 頁面的 HTML 宣告與 C# 成程式碼來替換

Pages > EleVisible.cshtml

@page "/ElementVisibility"

<h1>HTML Element 動態顯示或者隱藏的控制練習</h1>

<p>練習步驟</p>
<p>建立一個名為 EleVisible 的 Razor 檢視檔案</p>
<p>使用 ShowAction 字串變數來控制 style display 的值</p>
<p>綁定按鈕事件，動態的切換 ShowAction 字串內容，造成 HTML 項目可以動態的顯示或者隱藏</p>
<p>修正 NavMenu 元件 Component，使其可以顯示這個 Blazor 元件在網頁上</p>

<hr />

<div style="display: @ShowAction">
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>
</div>

<hr />

<button class="btn btn-primary" onclick="@ChangeStatus">切換顯示狀態</button>

<hr />

<div>ShowAction = @ShowAction</div>

@functions {
bool IsShow = true;
string ShowAction = "";
void ChangeStatus()
{
    IsShow = !IsShow;
    ChangeShowMode();
}

void ChangeShowMode()
{
    if (IsShow == true)
    {
        ShowAction = "";
    }
    else
    {
        ShowAction = "none";
    }
}
}

在 [Shared] 資料夾內，找到 [NavMenu.cshtml] Razor 檔案，接著將底下 HTML 標記宣告內容，加入到 <ul class="nav flex-column"> 內。

Pages > EleVisible.cshtml

@page "/ElementVisibility"

<h1>HTML Element 動態顯示或者隱藏的控制練習</h1>

<p>練習步驟</p>
<p>建立一個名為 EleVisible 的 Razor 檢視檔案</p>
<p>使用 ShowAction 字串變數來控制 style display 的值</p>
<p>綁定按鈕事件，動態的切換 ShowAction 字串內容，造成 HTML 項目可以動態的顯示或者隱藏</p>
<p>修正 NavMenu 元件 Component，使其可以顯示這個 Blazor 元件在網頁上</p>

<hr />

<div style="display: @ShowAction">
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>
</div>

<hr />

<button class="btn btn-primary" onclick="@IncrementCount">切換顯示狀態</button>

<hr />

<div>ShowAction = @ShowAction</div>

@functions {
bool IsShow = true;
string ShowAction = "";
void IncrementCount()
{
    IsShow = !IsShow;
    ChangeShowMode();
}

void ChangeShowMode()
{
    if (IsShow == true)
    {
        ShowAction = "";
    }
    else
    {
        ShowAction = "none";
    }
}
}

Shared > NavMenu.cshtml

<li class="nav-item px-3">
    <NavLink class="nav-link" href="ElementVisibility">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Element Visibility
    </NavLink>
</li>

EleVisible.cshtml 設計說明

在這個 EleVisible.cshtml Razor 檔案內，將會看到 <div style="display: @ShowAction"> 這樣的宣告，而對於 DOM 的 Style display 屬性值將會由 C# 中的 ShowAction 欄位值來提供；在 Blazor 中，當把一個變數宣告到 HTML 語言中來使用的時候，將會預設採用單向資料綁定機制來運作，也就是說，當 ShowAction 這個欄位值有變更的話，此時，在 DOM 的 Style display 屬性值也會跟著進行更新。

當使用者點選了切換顯示狀態按鈕，將會觸發 ChangeStatus 按鈕事件，這是因為在 HTML 中，使用了 <button class="btn btn-primary" onclick="@ChangeStatus"> 宣告。而在 ChangeStatus 按鈕事件內，將會判對當時的 ShowAction 是否為空字串，若為空字串，此時， div 標籤內的內容將會顯示出來，並且將該 ShowAction 欄位值為 "none"，這樣就會造成 div 標籤內的這些按鈕將會隱藏在網頁上；反之，若 ShowAction 的值為"none"，當按按鈕事件又被觸發的話，ShowAction 的值就會設定為空字串，這樣 div 標籤內的這些按鈕又會顯示出來了。

因為 WebAssembly 內的 C# 程式碼無法直接存取網頁內的 DOM，所以，將會透 Blazor 提供的 JavaScript Rendering 來幫助進行存取網頁 DOM 內容，因此，當 ShowAction 屬性值有變動的時候，將會透過 Blazor 建立的 Render Tree 呈現樹，透過 Render Tree Rendering 來將 C# 內最新的單向綁定的屬性值，透過 Blazor 提供的 JavaScript 更新到網頁上的 DOM，也就會更新 DOM 中的標籤內的 CSS 屬性值。

執行結果

現在，請執行這個專案，將會在網頁上看如下圖的畫面，此時可以看到有8個按鈕顯示在網頁上

當按下切換顯示狀態按鈕，將會看到這8個按鈕就會隱藏起來了

C# .NET Blazor MAUI Xamarin Research

2018年11月23日星期五