### 開啟視窗
如果是WebForm的話就要另外新增一個檔案，而在Blazor就不用，寫在同一個檔案裡就好
只要參數相對應到就可以。
**按鈕：**
程式碼：
`<RadzenButton Text="新增" Icon="add_circle_outline" Click='@(e => OpenModal("warehouseModal","","add"))' Style="padding:0;width:80px;" class="rz-border-radius-10 rz-shadow-20;" />`
解說：
1. 先給一個RadzenButton
2. 利用Click事件，@(): 這是Blazor中的語法
3. e => 是一個Lambda表達式，它指定了當點擊事件發生時要執行的操作。
4. OpenModal()三參數分別代表：第一個參數是模態視窗的ID或標識符，代表是要開啟哪一個視窗，第二個參數打開模態視窗時獲取或操作相關的數據。，第三個參數是一個操作類型，用來告訴模態視窗要執行的操作

**開啟視窗的方法**
OpenModal是個方法，三個參數也從這邊來

  protected async Task OpenModal(string modalId, string itemId, string mode)
  {
      if (mode.Equals("add"))
          EditMode = "新增模式";
      else if (mode.Equals("edit"))
          EditMode = "修改模式";
      else
          EditMode = "檢視模式";
      IsView = mode.Equals("view") ? true : false;

      try
      {
          if (itemId.Length == 0)
          {
              #region 新增
              masterModel = new HoldMasterView();
              reserveaddinList = new List<HoldDetailView>();
              IsDisabled = false;
              #endregion
          }
          else
          {
              #region 修改
              IsDisabled = true;
              masterModel = await HoldMasterService.GetHoldMasterById(itemId);
              reserveaddinList = await HoldDetailService.GetHoldDetailsByHoldNo(itemId);
              #endregion
          }
          await _jsRuntime.InvokeVoidAsync("global.openModal", modalId);
      }
      catch (Exception ex)
      {
          string sMsg = ex.Message;
          await _jsRuntime.InvokeAsync<object>("AlertMessage", sMsg);
      }
  }

**視窗設定(先只給開頭)：**
程式碼：

<div>
    <div class="modal fade" id="warehouseModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">

解說：
1.**id：warehouseModal，這個有跟按鈕的第一個參數對應到就可以順利開啟視窗**
2. 視窗的大小此範例是跟bootstrap有關，因此在這不會看到style。
3. 會看到`modal-dialog、modal-content、modal-header、modal-body`，是因為Bootstrap 對話方塊最多由三個垂直版面的DIV 區塊組成：頁首、正文和頁尾。
4. 其中Content 元件承擔了大部分工作。它定義整體HTML 佈局，並使用範本屬性匯入標記的詳細資訊（頁首、頁尾和正文標記），這些資訊可確保給定對話方塊是唯一的。依照範例來說：若把**modal-content改成content**，css樣式會跑掉。
5. data-backdrop 屬性用於控制模態視窗背景的行為。當設置為 "static" 時，它防止用戶通過點擊背景來關閉模態視窗。
6. 若將tabindex="2"或"3"，按下tab鍵可以看到跟"-1"，有鍵盤導航順序上的不同

---

### 三元運算符
1. 格式是固定的，即 condition ? true_value : false_value。
2. 舉例` sResult = data ? "成功" : "失敗";`，這data代表傳回的布林值，如果是true就顯示成功，反之。

---

### bind的雙向綁定寫法差異
有時候會看到兩種寫法：
1. `<input id="txQryHoldNo" type="text" class="form-control" style="width:150px;padding-right:5px;" placeholder="" @bind="SearchHoldNo" />`
2. `<select id="selQryPatron" class="form-control" @bind="@SearchPatronID" style="width:150px;">`

會看到`@bind="SearchHoldNo"`和`@bind="@SearchPatronID" `兩者差異在哪呢?
若只是單純綁定屬性名稱到 HTML 元素的話 => 就使用`@bind="SearchHoldNo"`，則可以省略 @ 符號。
若需要指定一個複雜的表達式，例如計算、條件判斷或函式呼叫，則需要在屬性名稱前加上@ =>`@bind="@SearchHoldNo"`

### C#語句是什麼?
在 C# 中，**語句（statements)** 是用於執行特定操作的程式碼片段
1. 條件語句（if-else）
2. 迴圈（for、while）
3. 其他如switch 語句、try-catch 語句等

### Razor 語法有關@的使用
1. 如上方提到bind的寫法
2. 在C#語句前加@的寫法，以指示該關鍵字是一個C#語句，如@if、@foreach等

---
### 存取登入狀態機制
在程式進入點可以看到以下這句

 FieldLogin fLogin = await sessionStorage.GetItemAsync<FieldLogin>(clsSession.sfLogin);

也可以在上方注入的地方看到

@inject Blazored.SessionStorage.ISessionStorageService sessionStorage

進而到NuGet套件中查看，發現安裝了「Blazored.SessionStorage」這套件
這SessionStorage套件的功能如下：
1. 用於在 Blazor 應用程式中存取瀏覽器的 sessionStorage，可以在用戶會話期間（即在同一個瀏覽器窗口或選項卡中）持久化存儲資料。
2. 存儲使用者相關的資訊，例如登入狀態、使用者設置等。
3. 在客戶端保留用戶的操作狀態，例如暫存表單資料或用戶的偏好設置。
4. 在不同頁面之間共享資訊，而無需使用額外的通信機制（例如服務端或本地存儲）。

**為何進入系統登入後還要再驗證一次登入呢?**
Q：因為 雖然在進入網站頁面時已經經過了登入過程，但在客戶端，特別是在 SPA（單頁應用程式）中，用戶可能會重新整理頁面、造訪其他網頁導致用戶的登入狀態丟失
因此用戶每次進入頁面時，就還要檢查登入狀態一次，確保用戶依然處於登入狀態，並且能夠正確地識別和驗證用戶。