Blazor 4 Bootstrap 對話窗顯示與關閉練習

建立測試專案

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

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

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

為了要做到上面提到的效果，在這裡進行修正了 Counter 元件的原始碼，當使用者按下 Click me 按鈕，且 currentCount 變數值為偶數，則將會顯示出來這個對話窗。

該對話窗已經宣告在這個元件上，不過，預設因為變數 ShowDialog 為 false，所以，該對話窗的內容不會顯示在網頁上，因此，當 currentCount 變數值為偶數的時候，將會把 ShowDialog 變數值為 true，也因此<div class="modal " tabindex="-1" style="display:block" role="dialog">...</div> 這些 HTML 標記就會顯示在網頁上，也就是該對話窗內容。

在該對話窗上的兩個回應按鈕，也透過了 Blazor 的按鈕事件綁定方式，綁定到該元件內的特定方法，例如，對於是這個按鈕，將會使用 <button class="btn btn-danger" onclick="@CloseModalYes">是</button> 這樣的標籤來宣告，當按下了這個按鈕之後，將會執行該元件內的 CloseModalYes 委派事件方法，此時，該變數 DeleteResult 將會設定為是的，刪除這筆員工資料這個文字字串，而該變數也綁定在網頁之上，因此，在網頁上也會看到這個文字；而對於否按鈕，將會使用 <button class="btn btn-warning" onclick="@CloseModalNo">否</button> 這個 HTML 標籤來宣告，當 CloseModalNo 方法被觸發之後，因為變數 DeleteResult 將會設定為不，放棄刪除這筆員工資料這個文字字串，而該變數也綁定在網頁之上，因此，在網頁上也會看到這個文字。

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

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

Pages > Counter.cshtml

@page "/counter"

<h1>Counter</h1>

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

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

<p>刪除選擇：@DeleteResult</p>

<div class="modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>Contents go here...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@if (ShowDialog)
{
    <div class="modal " tabindex="-1" style="display:block" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">刪除員工資料</h3>
                </div>
                <div class="modal-body">
                    <h4>你確定要刪除這筆員工資料嗎 ??</h4>
                    <table class="table">
                        <tr>
                            <td>姓名</td>
                            <td>@emp.Name</td>
                        </tr>
                        <tr>
                            <td>性別</td>
                            <td>@emp.Gender</td>
                        </tr>
                        <tr>
                            <td>部門</td>
                            <td>@emp.Department</td>
                        </tr>
                        <tr>
                            <td>城市</td>
                            <td>@emp.City</td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-danger" onclick="@CloseModalYes">是</button>
                    <button class="btn btn-warning" onclick="@CloseModalNo">否</button>
                </div>
            </div>
        </div>
    </div>
}


@functions {
    int currentCount = 0;
    bool ShowDialog = false;
    string DeleteResult = "";

    public class Empolyee
    {
        public string Name { get; set; }
        public string Gender { get; set; }
        public string Department { get; set; }
        public string City { get; set; }
    }
    Empolyee emp = new Empolyee()
    {
        Name = "Vulcan Lee",
        Gender = "M",
        City = "Kaohsiung",
        Department = "IT"
    };

    void IncrementCount()
    {
        currentCount++;
        DeleteResult = "";

        if (currentCount % 2 == 1)
        {
            ShowDialog = true;
        }
    }

    void CloseModalYes()
    {
        ShowDialog = false;
        DeleteResult = "是的，刪除這筆員工資料";
    }

    void CloseModalNo()
    {
        ShowDialog = false;
        DeleteResult = "不，放棄刪除這筆員工資料";
    }
}

執行結果

現在，請執行這個專案，點選左邊側邊攔的 Counter 項目，接著在網頁中間來點選 Click me 這個按鈕，現在將會發現到，若 currentCount 這個變數為奇數的時候，網頁上將會出現了刪除員工資料這個對話窗

若在對話窗中點選是這個按鈕，則該對話窗將會消失，且網頁上會出現是的，刪除這筆員工資料文字內容

若在對話窗中點選否這個按鈕，則該對話窗將會消失，且網頁上會出現不，放棄刪除這筆員工資料文字內容

C# .NET Blazor MAUI Xamarin Research

2018年12月6日星期四