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

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

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

屬性類：

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

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

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

    與

    @* User.razor *@
    <EditForm Model="user">
      @* ... *@
    </EditForm>
    

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

    // User.razor.cs
    private EditContext editContext;
    private UserViewModel user = new UserViewModel();
    
    protected override void OnInitialized()
    {
        editContext = new EditContext(user);
    }
    

    與

    @* User.razor *@
    <EditForm EditContext="@editContext">
      @* ... *@
    </EditForm>
    

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

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

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

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

    @* User.razor *@
    <EditForm EditContext="@editContext" OnSubmit="@HandleSubmit">
      @* ... *@
    </EditForm>
    

    與

    // 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 運算式來命名模型屬性。

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

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

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

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