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個按鈕就會隱藏起來了
更多關於 Blazor 教學影片，可以參考 Blazor 教學影片播放清單 或者 Blazor 快速體驗教學影片撥放清單。也歡迎訂閱本 .NET / Blazor / Xamarin.Forms 影片頻道 。
Blazor 開發框架下有個非常好用的功能，那就是 資料綁定 Data Binding 機制，這個機制可以做到當在一個 Blazor 元件 Component 內宣告一個欄位變數，例如該欄位名稱為 MyField ，則可以在 HTML 標記 Markup 中使用@加上這個欄位名稱，便可以將這個欄位變數值與 HTML 標記整合再一起；而在這個練習中，想要設計一個元件，該元件上有個按鈕，當按下這個按鈕之後，該元件上的網頁部分內容將會隱藏起來，若再度點選一次這個按鈕，則剛剛隱藏的內容又會顯示出來。如同大家對於網頁設計的了解，在這裡將會透過 HTML DOM display 屬性來控制網頁上的 HTML Element 是否要顯示還是隱藏，不過，更為重要的是，這裡所說明的所有處理過程，都不會用到任何一行 JavaScript ，只需要透過 .NET C# 程式碼就可以做到，這就是 Blazor 好用的地方。本篇文章的範例原始碼，可以從 BlazorElementVisibility 取得。