1. 前言 距離上次發《MAUI初體驗：爽》一文已經過去2個月了，本計劃是下半年或者明年再研究MAUI的，現在計劃提前啦，因為我覺得MAUI Blazor挺有意思的：在Android、iOS、macOS、Windows之間共用UI，一處UI增加或者修改，就能得到一致的UI體驗。 看看這篇文章《Bla ...
數據綁定
Blazor支持在html元素中使用Razor語法進行綁定c#欄位 屬性或值
綁定語法
在html標簽中，添加@bind="xxxx"即可實現綁定
@page "/bind"
<p>
<input @bind="inputValue"/>
</p>
<p>
<input @bind="InputValue" @bind:event="oninput" />
</p>
<ul>
<li><code>用戶輸入的</code>:@inputValue</li>
<li><code>用戶輸入的</code>@InputValue</li>
</ul>
@code {
private string? inputValue;
public string? InputValue { get; set; }
}
上面的代碼 實現了當輸入完成後滑鼠離開input輸入框會觸發綁定事件
@bind:event 和@bind的區別
- @bind 綁定更新不是實時的只有滑鼠離開輸入框後才會觸發
- @bind:event 會實時更新數據
格式化數據
blazor目前只支持DateTime格式字元串 通過@bind:format="yyyy-MM-dd"
@page "/data-binding"
<code>年月日</code>
<input type="date" @bind="startDate" @bind:format="yyyy-MM-dd" />
<code>你選擇的年月日 @startDate</code>
@code {
private DateTime startDate = new(2020, 1, 1);
}
綁定子組件屬性
一個父界面往往由多個子組件組成 需要父組件參數綁定到子組件當中
- 子組件定義
<input @bind="Title"/>
@code {
[Parameter]
public string Title { get; set; }
[Parameter]
public EventCallback<string> TitleChanged { get; set; }
}
- 父組件調用
@page "/bind-theory"
<Test @bind-Title="InputValue"/>
@code {
public string InputValue { get; set; }
}
