Blazor数据绑定用法

blazor当中, 类似实现了wpf的基础绑定功能, 支持在html元素当中使用razor语法进行绑定c#字段、属性或 razor 表达式值。

绑定语法

在html标签中,使用razor的语法, 前缀使用@符号, 然后添加 @bind="xxxx" 即可实现最简单的绑定, 如下:

input @bind="name" />

@code {
    private string name{ get; set; }
}

通过上面的操作, input中的值与属性name则进行了一个双向绑定, 无论是name主动发生变更, 还是input的值发生变化, 两者都会同时更新。

通过@bind的声明与 value="@xxx"的区别:

@xxx/@bind区别

value="@xxx": 只能做到属性呈现到ui元素当中, 无法与ui元素建立关系, 即: 元素发生变化并不会影响到属性变更。

绑定对象

下面示例演示了一个如何在html元素中的值如何绑定到一个对象的属性上。

    <input @bind="stu.name"/>

@code{
    public student stu { get; set; } = new student()
    {
        name = "123"
    };

    public class student
    {
        public string name { get; set; }
    }
}

效果如下所示:

数据格式化

如果需要使用数据格式化显示, 可以通过razor中的语法: @bind:format , 如下所示,展示了一个日期元素格式化样例:

    <input @bind="startdate" @bind:format="yyyy-mm-dd" />

@code {
    [parameter]
    public datetime startdate { get; set; } = new datetime(2020, 1, 1);
}

绑定子组件属性

通常情况下, 对于父界面而言, 往往是由一个或者多个子组件组成 (用于提高程序的复用性)， 所以父组件而言, 往往需要将父组件的参数绑定到子组件当中。
下面的例子,演示了一个子组件当中的字符串, 如何绑定到父组件的属性上。

声明子组件参数与回调函数

声明了组件参数year, 还需要声明一个组件回调函数, 该回调函数主要用于子组件的数据发生变更。
回调函数的声明规则为, 参数类型与对应的属性一直, 名称以属性名开头

    <p>year: @year</p>

@code {
    [parameter]
    public int year { get; set; }

    [parameter]
    public eventcallback<int> yearchanged { get; set; }
}

父组件调用

<childcomponent @bind-year="parentyear" />

@code {
    [parameter]
    public int parentyear { get; set; } = 1978;

}

无法预估的值

当元素与属性建立了绑定关系, 但是受限于属性的类型, 如果ui元素中发生了类型不一致的变更,则在触发绑定事件时，无法分析的值会自动还原为以前的值。

例: 当绑定的属性为int类型时, ui元素将内容修改为string字符, 当ui元素发生事件变更时, 该值无法进行int类型的转换,则回自动还原。

到此这篇关于blazor数据绑定用法的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持。