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; }    }}

效果如下所示:

public int ParentYear { get; set; } = 1978;}

无法预估的值

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

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

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