原文鏈接：https://blazor-university.com/forms/editing-form-data/

編輯表單數據

源代碼^[1]

因為 EditForm 組件呈現標準的 <form> HTML 元素，實際上可以在我們的標記中使用標準的 HTML 表單元素，例如 <input> 和 <select>，但與 EditForm 組件一樣，我建議使用各種 Blazor 輸入控件，因為它們帶有附加功能，例如驗證。

Blazor 中有一個標準的輸入組件集合，所有這些都來自基類 InputBase<T>。

以下部分都將使用以下類進行綁定：

@code
{SomeModel?FormData?=?new?SomeModel();class?SomeModel{public?bool?SomeBooleanProperty?{?get;?set;?}public?DateTime??SomeDateTimeProperty?{?get;?set;?}public?int?SomeIntegerProperty?{?get;?set;?}public?decimal?SomeDecimalProperty?{?get;?set;?}public?string?SomeStringProperty?{?get;?set;?}public?string?SomeMultiLineStringProperty?{?get;?set;?}public?SomeStateEnum?SomeSelectProperty?{?get;?set;?}?=?SomeStateEnum.Active;}public?enum?SomeStateEnum{Pending,Active,Suspended}
}

注意： 可以為以下任何組件指定附加屬性。Blazor 未明確識別的任何內容都將直接呈現到目標 HTML 元素上。

InputCheckbox

InputCheckbox 組件將布爾屬性綁定到 type="checkbox" 的 HTML <input> 元素。此組件不允許綁定到可為空的屬性。

<InputCheckbox?@bind-Value=FormData.SomeBooleanProperty?/>

InputDate

InputDate 組件將 DateTime 屬性綁定到 type="date" 的 HTML <input> 元素。該組件將綁定到一個可為空的屬性，但是，并非所有瀏覽器都提供在這種類型的輸入元素上指定空值的能力。

<InputDate?@bind-Value=FormData.SomeDateTimeProperty?ParsingErrorMessage="Must?be?a?date"?/>

InputNumber

InputNumber 組件將任何類型的 C# 數字屬性綁定到 type="number" 的 HTML <input> 元素。

如果輸入的值無法解析為目標屬性類型，則輸入將被視為無效（請參閱表單驗證）并且不會使用該值更新模型。

當目標屬性可以為空時，無效的輸入將被視為空，輸入中的文本將被清除。

<InputNumber?@bind-Value=FormData.SomeIntegerProperty?ParsingErrorMessage="Must?be?an?integer?value"?/><InputNumber?@bind-Value=FormData.SomeDecimalProperty?ParsingErrorMessage="Must?be?a?decimal?value"?/>

InputText

InputText 組件將一個字符串屬性綁定到一個沒有指定類型的 HTML <input> 元素。這使我們能夠指定任何可用的輸入類型，例如密碼、顏色或 W3 標準^[2]中指定的其他選項之一。

<InputText?@bind-Value=FormData.SomeStringProperty?/>

InputTextArea

InputTextArea 組件將字符串屬性綁定到 HTML <textarea> 元素。

<InputTextArea?@bind-Value=FormData.SomeMultiLineStringProperty?/>

InputSelect

InputSelect 組件將任何類型的屬性綁定到 HTML <select> 元素。Blazor 將根據屬性的值自動選擇正確的 <option>。

<InputSelect?@bind-Value=FormData.SomeSelectProperty><option?value="Pending">Pending</option><option?value="Active">Active</option><option?value="Suspended">Suspended</option>
</InputSelect>

由于 razor 視圖將 FormData.SomeSelectProperty 設置為 SomeStateEnum.Active，因此 <select> HTML 元素會將其選擇默認為該值，即使它不是第一個指定的 <option>。

參考資料

[1]

源代碼: https://github.com/mrpmorris/blazor-university/tree/master/src/Forms/FormInputs

[2]

W3 標準: https://www.w3schools.com/tags/att_input_type.asp