深入淺出Blazor webassembly之數(shù)據(jù)綁定寫法

⒈ 單向綁定

在razor 模版中, 直接使用 @variable, 其中variable 為 C#屬性或類字段, 這樣的寫法是單向綁定, 即按照C#字段變化后, DOM上的內容也會更新.

@page "/bind"
<p>class field @field </p>
<p> class property @MyProperty </p>
<button class="btn btn-primary" @onclick="ChangeValue">Change</button>
@code{
 private int field=100 ;
 public int MyProperty { get; set; }=1000;
 private void ChangeValue(){
     this.field=200 ;
     this.MyProperty=2000; 
 }
}

2. 雙向綁定

(1) 對于輸入類html組件, 可以實現(xiàn)雙向綁定, 但需要加上 @bind 指令.

(2) 如果沒有指定關聯(lián)的事件名, 默認關聯(lián)的事件是失去焦點事件, 指定事件名的寫法是 @bind:event

(3) 在使用了 @bind 之后, 我們不應再實現(xiàn)綁定事件代碼, 因為 blazor 會自動生成該事件的代碼.

(4) @bind 其實是 @bind-value 的縮寫形式, 但如果綁定變量寫成了 @bind-value, 指定事件名也需要寫成 @bind-value:event, 也就是說指定事件名要和綁定變量的寫法完全一致, 否則會在編譯期或運行時報錯.

@page "/bind"
<input type="text"  @bind="field">
<br/>
<input type="text"  @bind="MyProperty" @bind:event="oninput">
<input type="text"  @bind-value="MyProperty" @bind-value:event="oninput">
@code{
 private int field=100 ;
 public int MyProperty { get; set; }=1000;
}

3. 綁定變量的字符格式化

可以使用 @bind:format 指定格式化要求

@page "/bind"
<input type="text"  @bind="birthday" >
<br>
<input type="text"  @bind="birthday" @bind:format="yyyy-MM-dd">
 
@code{
 private DateTime birthday=DateTime.Today ; 
}

4. Razor 模版中的 literal, expression 和 directive

(1) directive 一般是作為html元素 key-value 中的 key, 比如 @bind="aaaa" 中的 @bind, directive 比較好記, 就那么幾個.

html元素 key-value 中的 value, 既可以是 literal , 也可以是 expression, 具體區(qū)分方法:

如果取值的雙引號帶有@前綴, 即被認為是 expression
如果取值的雙引號內如果沒有@前綴, 一般是 literal;
但也有例外, 比如 @bind="aaaa" 的aaa因為是雙向綁定, 肯定是變量, 不是literal; @onclick="bbb" , bbb肯定是事件, 所以也不是 literal. 也就是說, 這里value中的@符號可以省略

@page "/bind"

<h3>literal</h3>
<input type="text" name="" id="" value="text"> 
<br/>

<h3>expression</h3>
<input type="text" name="" id="" value="@MyProperty"> 
<input type="text" name="" id="" value="@Tuple.Item2"> 


@code{
    public int MyProperty { get; set; }=100 ;
    public ValueTuple<int, string> Tuple=(1,"aaaaaaa");
}

(2) 復雜表達式需要加上括號, 即格式為: @(expression)

甚至函數(shù)調用也可以.

@page "/bind"

<input type="text" name="" id="" value="@(MyProperty+100)"> 
<input type="text" name="" id="" value="@GetStr()"> 

@code{
    public int MyProperty { get; set; }=100 ;
    public ValueTuple<int, string> Tuple=(1,"aaaaaaa");

    public string GetStr(){
        return  Tuple.Item2+"bbbb";
    }
}

(3) blazor模版的表達式還可以是lambda 表達式.

@page "/bind" 

<p> MyProperty:@MyProperty </p>
<button class="btn btn-primary" 
@onclick="((e)=> {MyProperty+=1;} )"
> click </button>

@code{
    public int MyProperty { get; set; }=100 ;
}

(4) DOM 元素的事件處理寫法, 一般會看到有三種寫法:

(一) <button @onclick="methodCall">blazor 新的事件綁定寫法 </button>

event前加@, blazor 編譯器認為這是blazor指令, 要求后面的屬性值應該是 C# event handler

(二) <button onclick="@methodCall"> blazor 在 .net 3之前的事件綁定寫法</button>

屬性值以@開始, blazor 也會認為是blazor指令, 但這是老的寫法, 現(xiàn)在統(tǒng)一的寫法是@放到事件名前面, 而不是屬性值前面.

(三) <button onclick="alert('I am a JavaScript method')" > JS event handler </button>

如果事件名前和屬性值前都沒有@符號, 說明這是普通的 JS 事件, 事件取值也應該是JS 函數(shù).

參考:

Event Handling In Blazor (c-sharpcorner.com) https://www.c-sharpcorner.com/article/event-handling-in-blazor/

posted @ 2021-08-22 10:58 harrychinese 閱讀(647) 評論(0) 收藏舉報

刷新頁面返回頂部

harrychinese

深入淺出Blazor webassembly之數(shù)據(jù)綁定寫法

公告