数据绑定就是前端显示(页面元素的值)与后端数据(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 = "小明";
}
}
}
结果:
![](https://i-blog.csdnimg.cn/blog_migrate/f9d686ed82da0b6ca23c34130089caf7.gif)
前端输入什么值,后端都不会发生变化。
后端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 = "小明";
}
结果:
![](https://i-blog.csdnimg.cn/blog_migrate/5d7de4c5f84d1bce9b3fdb5004a29eb0.gif)
可见,前端输入内容,后端直接发生变化了。