原文鏈接:https://blazor-university.com/forms/
表單
源代碼[1]
EditForm
組件是 Blazor 管理用戶輸入的方法,這種方法可以輕松地對用戶輸入執行驗證。它還提供了檢查是否滿足所有驗證規則的能力,如果沒有滿足,則向用戶顯示驗證錯誤。
雖然可以使用標準的 <form>
HTML 元素創建表單,但我建議使用 EditForm
組件,因為它為我們提供了額外的功能。
注意: 如果您還沒有這樣做,我建議您閱讀雙向綁定指令[2]部分。
表單模型
EditForm
的關鍵特性是它的模型參數。該參數為組件提供了一個上下文,它可以使用它來啟用用戶界面綁定并確定用戶的輸入是否有效。
讓我們從創建一個可以與我們的 EditForm
一起使用的類開始。此時,一個簡單的空類就足夠了。
public?class?Person
{
}
編輯標準 index.razor
頁面如下:
@page?"/"<EditForm?Model=@Person><input?type="submit"?value="Submit"?class="btn?btn-primary"/>
</EditForm>@code
{Person?Person?=?new?Person();
}
第 9 行創建了一個 Person
實例,供我們的表單綁定。第 3 行創建一個 EditForm
并將其 Model
參數設置為我們的實例。前面的 rzaor 標記會生成以下 HTML。
<form><input?class="btn?btn-primary"?type="submit"?value="Submit">
</form>
檢測表單提交
當用戶單擊上例中的提交按鈕時,EditForm
將觸發其 OnSubmit
事件。我們可以在代碼中使用這個事件來處理任何業務邏輯。
@page?"/"<h1>Status:?@Status</h1>
<EditForm?Model=@Person?OnSubmit=@FormSubmitted><input?type="submit"?value="Submit"?class="btn?btn-primary"/>
</EditForm>@code
{string?Status?=?"Not?submitted";Person?Person?=?new?Person();void?FormSubmitted(){Status?=?"Form?submitted";//?Post?data?to?the?server,?etc}
}
表單提交將在處理表單提交[3]部分更深入地介紹。
參考資料
[1]
源代碼: https://github.com/mrpmorris/blazor-university/tree/master/src/Forms/BasicForm