上一次我们学习了Blazor组件相关的知识（Asp.net Core Blazor Webassembly - 组件）。这次继续学习Blazor的数据绑定相关的知识。当代前端框架都离不开数据绑定技术。数据绑定技术以数据为主导来驱动UI界面，用户对数据的修改会实时提现在UI上，极大的提高了开发效率，让开发者从繁琐的dom操作中解脱出来。对于数据绑定.NET开发者并不会陌生，WPF里大量应用数据绑定技术，有过WPF开发经验的同学其实很容易理解前端的数据绑定。总之数据绑定技术及其概念、思维极其重要。下面让我们看看Blazor的数据绑定技术。
单向绑定Blazor的数据绑定官方文档是直接从双向绑定开始的，但我觉得有必要说一下单向绑定。因为其他框架一般都会区分单向、双向，比如vue的v-bind单向，v-model就是双向。我们这里分开讲也有利于跟其他框架进行对比。下面我们实现一个计数器组件来演示下单向数据绑定。
使用@进行绑定 @page "/counter" <p>Current count: @currentCount</p> <button @onclick="IncrementCount">Click me</button> @code { private int currentCount = 0; private void IncrementCount() { currentCount++; } }这个Counter组件默认的项目就自带。跟我们使用服务端Razor一样，使用@符号在需要替换值的地方插入对应的变量。这个值就会被渲染在相应的地方。当我们在前端修改变量的时候，对应的ui界面会同步进行修改。
除了直接使用@进行绑定，我们还可以使用@bind-{attribute}来实现对html元素属性的绑定，比如对style，class内容进行绑定。下面演示下对class进行绑定。我们把p元素的class绑定到“currentClass”字段。
@page "/counter" <h1>Counter</h1> <p @bind-class="currentClass" @bind-class:event="onchange"> current count: @currentCount </p> <button @onclick="IncrementCount">Click me</button> @code { private string currentClass = "text-danger"; private int currentCount = 0; private void IncrementCount() { currentCount++; } }
使用@bind-{attribute}进行绑定有个比较奇怪的问题，当你使用@bind-{attribute}进行绑定的时候必须同时指定@bind-{attribute}:event。@bind-{attribute}:event是用来指定双向绑定的时候控件在发生某个事件的时候回写值到绑定的字段上。可是p，div这种元素根本不可能会激发onchange，oninput这种事件，也不可能去修改绑定的字段的值，这个用法感觉有点多此一举。
Blazor的单向数据绑定的用法跟ASP.NET Core MVC的Razor基本相似，不同点就是Blazor不需要Http回发到服务器就可以实时渲染新的界面出来。
双向绑定主要使用在一些输入控件上，比如input，select等。当我们对这些控件上的值进行修改后会回写绑定的字段。这种特性在表单场景中非常有用。我们定义一个用户信息编辑的组件来演示下：
@page "/infoedit" <p> userName: @userName </p> <p> sex: @sex </p> <p> userName: <input @bind="userName" /> </p> <p> sex: <select @bind="sex"> <option value="m">男</option> <option value="f">女</option> </select> </p> @code { private string userName="abc"; private string sex="f"; }
当我们运行这个组件，在文本框进行修改后，鼠标点击其他地方让文本框失去焦点值就会回写到绑定的字段上，上面的单向绑定信息会自动同步。但是如果你用过VUE或者Angularjs的双向绑定就会觉得失去焦点再回写字段数据太慢了，一点也不酷。要知道VUE的双向绑定可是实时同步的，那么Blazor如何做到在输入的同时就更新值呢，答案是使用@bind：event来指定回写的激发事件，我们改成“oninput”事件就可以实现：
<p> userName: <input @bind="userName" @bind:event="oninput"/> </p>
看到这里也许你也明白了，@bind真正的本质是由对value的绑定和对某个事件的绑定协同完成的。这点跟VUE非常相似。@bind其实是@bind-value的缩写，我们可以用@bind-value来实现双向绑定：
<p> userName: <input @bind-value="userName" @bind-value:event="oninput"/> </p>以上写法的效果跟@bind一模一样。再进一步，@bind-value也只是对@的包装，我们可以使用@来实现双向绑定：
@page "/infoedit" <p> userName: @userName </p> <p> sex: @sex </p> <p> userName: <input value="@userName" @oninput="oninput"/> </p> <p> sex: <select @bind="sex"> <option value="m">男</option> <option value="f">女</option> </select> </p> @code { private string userName="abc"; private string sex="f"; private void oninput(ChangeEventArgs e) { userName = e.Value.ToString(); } }以上代码的效果跟@bind一模一样。通过使用@对value直接进行绑定以及绑定一个oninput事件进行值的回写，同样实现了双向绑定。
格式化时间字符串使用@bind:format 可以对绑定时间类型字段的时候进行格式化：
出生日期：<input @bind="birthDay" @bind:format="yyyy-MM-dd" />
这个功能有点类似Angularjs的filter功能，但是目前只能对时间进行格式化，功能很弱。
父组件绑定数据到子组件