前置作業也差不多告一段落了，終於要邁向寫網頁最基本的需求了，也就是撰寫表單，畢竟如果沒有表單，也就不會有 CRUD 等的資料連動，沒有資料連動的網頁也就會只是靜態頁面，除非你的客戶都是自己去使用 Postman 之類的工具來打你的 API 或者手動去修改 DB，不然難逃有一個介面供他們操作。

要使用表單，首先我們要了解 EditForm 元件。

EditForm 元件定義了整個表單，並且所有的內建控制項元件都需要仰賴於此，如果單獨使用控制項元件，則會產生錯誤唷。

屬性類：

  • 表單模型，只能有一個且一定要有一個：

    • Model 屬性用於指定表單模型，並會自動創建 EdicContext。
      使用起來像：

      1
      2
      // User.razor.cs
      private UserViewModel user = new UserViewModel();

      與

      1
      2
      3
      4
      @* User.razor *@
      <EditForm Model="user">
        @* ... *@
      </EditForm>

    • EditContext 屬性用於明確指定 EditContext，表單模型將從其 Model 屬性提取。
      使用起來像：

      1
      2
      3
      4
      5
      6
      7
      8
      // User.razor.cs
      private EditContext editContext;
      private UserViewModel user = new UserViewModel();

      protected override void OnInitialized()
      {
          editContext = new EditContext(user);
      }

      與

      1
      2
      3
      4
      @* User.razor *@
      <EditForm EditContext="@editContext">
        @* ... *@
      </EditForm>

  • 事件處理，當表單發出 sumbit 事件時執行的 callback，並根據不同情況分為三種方法，使用時只能有一個但可以沒有：

    • OnValidSumbit 表單驗證成功時才會發出。

    • OnInvalidSumbit 表單驗證失敗時才會發出。

    • OnSubmit 最陽春的，但使用時建議還是自行驗證，若使用 EditContext 則可以使用 Validate 來做驗證。
      使用起來像：

      1
      2
      3
      4
      @* User.razor *@
      <EditForm EditContext="@editContext" OnSubmit="@HandleSubmit">
        @* ... *@
      </EditForm>

      與

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      // User.razor.cs
      private void HandleSubmit()
      {
        if (editContext.Validate())
        {
          Logger.LogInformation($"Success: {user.ToString()}");
        }
        else
        {
          Logger.LogInformation($"Fail: {editContext.GetValidationMessages().Aggregate((x, y) => $"{x}, {y}")}");
        }
      }

元件類：

  • DataAnnotationsValidator 將資料註解的驗證添加到 EditContext，若沒添加則永遠驗證成功。

  • ValidationSummary 顯示來自 EditContext 的驗證訊息列表，也就是將驗證錯誤的資料註解所標記的訊息總結並顯示。

  • ValidationMessage 顯示特定欄位的驗證訊息，需透過 For 屬性並使用 lambda 運算式來命名模型屬性。

    1
    <ValidationMessage For="@(()=>user.Name)" />

以上就是表單的初步內容啦，對了，如果想看我寫的完整範例，可以觀看範例程式碼 - Day9與範例程式碼2 - Day9唷。

感謝大家的閱讀，我們明天見。

參考資料
ASP.NET Core Blazor 表單和驗證