⒈ 單向綁定
在razor 模版中, 直接使用 @variable, 其中variable 為 C#屬性或類字段, 這樣的寫法是單向綁定, 即按照C#字段變化後, DOM上的内容也會更新.
2. 雙向綁定
(1) 對于輸入類html元件, 可以實作雙向綁定, 但需要加上 @bind 指令.
(2) 如果沒有指定關聯的事件名, 預設關聯的事件是失去焦點事件, 指定事件名的寫法是 @bind:event
(3) 在使用了 @bind 之後, 我們不應再實作綁定事件代碼, 因為 blazor 會自動生成該事件的代碼.
(4) @bind 其實是 @bind-value 的縮寫形式, 但如果綁定變量寫成了 @bind-value, 指定事件名也需要寫成 @bind-value:event, 也就是說指定事件名要和綁定變量的寫法完全一緻, 否則會在編譯期或運作時報錯.
3. 綁定變量的字元格式化
可以使用 @bind:format 指定格式化要求
4. Razor 模版中的 literal, expression 和 directive
(1) directive 一般是作為html元素 key-value 中的 key, 比如 @bind="aaaa" 中的 @bind, directive 比較好記, 就那麼幾個.
html元素 key-value 中的 value, 既可以是 literal , 也可以是 expression, 具體區分方法:
如果取值的雙引号帶有@字首, 即被認為是 expression
如果取值的雙引号内如果沒有@字首, 一般是 literal;
但也有例外, 比如 @bind="aaaa" 的aaa因為是雙向綁定, 肯定是變量, 不是literal; @onclick="bbb" , bbb肯定是事件, 是以也不是 literal. 也就是說, 這裡value中的@符号可以省略
(2) 複雜表達式需要加上括号, 即格式為: @(expression)
甚至函數調用也可以.
(3) blazor模版的表達式還可以是lambda 表達式.
參考:
Event Handling In Blazor (c-sharpcorner.com) https://www.c-sharpcorner.com/article/event-handling-in-blazor/