Blazor入门笔记（5）-数据绑定

程序员文章站 2022-07-02 10:18:12

1.环境 VS2019 16.5.1 .NET Core SDK 3.1.200 Blazor WebAssembly Templates 3.2.0-preview2.20160.5 2.默认绑定 2.1.使用方法 Blazor中Razor组件通过一个名为@bind的HTML元素属性提供数据绑定功 ......

1.环境

vs2019 16.5.1

.net core sdk 3.1.200

blazor webassembly templates 3.2.0-preview2.20160.5

2.默认绑定

2.1.使用方法

blazor中razor组件通过一个名为@bind的html元素属性提供数据绑定功能，数据绑定的对象可以为字段、属性或表达式值。例如：

<input @bind="_bindvalue1" />
@code{
    private int _bindvalue1 { get; set; } = 1;
}

@bind默认绑定的是元素的onchange事件，通过在组件中添加一个元素p可以看出效果，每当input离开focus或者回车时，p中的值才会更新：

<p>@_bindvalue1</p>

Blazor入门笔记（5）-数据绑定

2.2.等价单向绑定

由于@bind绑定的数据是强类型，在从input的value到绑定的数据时，会做相关的数据转换，如果转换失败，则会保持上次的值不变。也就是说，默认绑定类似于以下代码：

<input value="@_bindvalue1" @onchange="(e) => { _bindvalue1 = int.tryparse(e.value.tostring(), out var val) ? val : _bindvalue1;}" />

之所以说是类似，是因为当无法转换时，例如输入的是小数123.1，当触发onchange事件时，通过@bind绑定数据时，input中value会变回上一次的整数；而这种单向绑定时，input的value显示的依然为123.1，不过通过c#获取_bindvalue1的值时，得到的与通过@bind绑定数据时的行为是一致的。在单向绑定时，即使使用statehaschanged()，由于渲染引擎未发现状态的变化，依然是不会改变显示的值。

3.字符串格化

@bind可以使用@bind:format指定字符串的格式化表达式，个人觉得此功能有些鸡肋，其支持的格式表达式较为有限，而且还具有一些其他的问题，不知道是bug还是本身就这样设计的，我目前已经在aspnetapidocs提交了相关的反馈。

4.修改默认绑定事件

在有些时候，我们可能需要实时响应input中的输入内容，例如搜索提示，这个时候需要相应input的oninput事件，@bind通过指定event参数来在指定绑定属性或字段响应的事件，其形式为@bind:event="eventname"，例如：

<input @bind="_bindvalue2" @bind:event="oninput" />

Blazor入门笔记（5）-数据绑定

5.组件间的事件绑定

5.1.父组件到子组件

通过使用@bind-{property}的形式，可以将属性值从父组件向下绑定到子组件，其中property必须为组件参数，例如在子组件中添加一个datetime参数，要想使用@bind为此子组件在父组件中绑定数据，按照约定还必须定义一个名为事件{property}changed的事件，这个事件用于响应当子组件中更改组件参数时，子组件对数据的回调。代码如下：

<input @bind="datetime" @bind:format="yyyy-mm-dd hh:mm:ss" />
<p>@datetime.tostring("o")</p>
[parameter]
public datetime datetime { get; set; } = datetime.now;
[parameter]
public eventcallback<datetime> datetimechanged { get; set; }

这样就可以在父组件中使用如下代码进行数据绑定了：

<component @bind-datetime="_datetime" />

这行代码实际上等价于以下代码：

<component @bind-datetime="_datetime" @bind- datetime:event=" datetime changed"/>

因此我们可以自定义上述约定中的默认事件{property}changed的名称，现在效果如下（请注意，此时如果子组件更新的参数，数据是无法流向父组件的）：

Blazor入门笔记（5）-数据绑定

5.2.子组件到父组件

通常，参数流是从上往下的，即从父组件流到子组件，这是与渲染流程是保持一致的。因此当父组件更新子组件的组件参数时，往往子组件会很容易的进行渲染，但是当子组件向父组件传递数据，则必须使用相应的回调事件。这种限制是组件设计必然结果。@bind在组件间进行数据的双向绑定正式通过在5.1.中的所介绍的{property}changed事件来向父组件进行数据的传递的。

首先，在之前组件间事件绑定的代码上为input的oninput事件添加响应函数changeparentvalue：

private async task changeparentvalue(changeeventargs e)
{
    var datestr = e.value.tostring();
    await datetimechanged.invokeasync(datetime.parse(datestr));
}

注意，在这里代码并没有直接更改本组件中的组件参数datetime，因为父组件中更改了状态后，会将该数据传递到子组件，子组件会重新渲染。按照微软官方的代码，这个是可以更改本组件中的组件参数datetime的。现在，效果如下：

Blazor入门笔记（5）-数据绑定