ASP.NET Core Blazor数据绑定

数据绑定就是前端显示（页面元素的值）与后端数据（C#代码）是联动的。

可以是单向的（后端影响前端）也可以是双向的（前后端相互影响）。

1、单向：

看代码：

@page "/"
<PageTitle>@UserName</PageTitle>
<div>
    文本：
     <input value=@UserName/>
</div>

<button class="btn btn-primary" @onclick="onclick">@UserName</button> 

@code{
    private string UserName = "小明";

    private void onclick()
    {
        if (UserName == "小明")
        {
            UserName = "小黄";
        }
        else 
        {
            UserName = "小明";
        }
    }
}

结果：

前端输入什么值，后端都不会发生变化。

后端code中改变了，前端就会受影响。

其中，@变量名 是引用后端变量，razor语法

2、双向：

@page "/"

<PageTitle>@UserName</PageTitle>

<div>
    文本：
    @*<input value=@UserName/>*@
    
     <input @bind=UserName/> 
</div>

 <button class="btn btn-primary">@UserName</button>

@code{
    private string UserName = "小明";
}

结果：

可见，前端输入内容，后端直接发生变化了。