【L?S】ASP.NET Core Blazor Webasse

无名

ASP.NET Core Blazor Webassembly 之 数据绑定
这次继续学习Blazor的数据绑定相关的知识。当代前端框架都离不开数据绑定技术。数据绑定技术以数据为主导来驱动UI界面，用户对数据的修改会实时提现在UI上，极大的提高了开发效率，让开发者从繁琐的dom操作中解脱出来。对于数据绑定.NET开发者并不会陌生，WPF里大量应用数据绑定技术，有过WPF开发经验的同学其实很容易理解前端的数据绑定。总之数据绑定技术及其概念、思维极其重要。下面让我们看看Blazor的数据绑定技术。

单向绑定
Blazor的数据绑定官方文档是直接从双向绑定开始的，但我觉得有必要说一下单向绑定。因为其他框架一般都会区分单向、双向，比如vue的v-bind单向，v-model就是双向。我们这里分开讲也有利于跟其他框架进行对比。下面我们实现一个计数器组件来演示下单向数据绑定。

使用@进行绑定
@page "/counter"

Current count: @currentCount

Click me

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

这个Counter组件默认的项目就自带。跟我们使用服务端Razor一样，使用@符号在需要替换值的地方插入对应的变量。这个值就会被渲染在相应的地方。当我们在前端修改变量的时候，对应的ui界面会同步进行修改。

使用@bind-{attribute}进行绑定
除了直接使用@进行绑定，我们还可以使用@bind-{attribute}来实现对html元素属性的绑定，比如对style，class内容进行绑定。下面演示下对class进行绑定。我们把p元素的class绑定到“currentClass”字段。

@page "/counter"

Counter

    current count: @currentCount

Click me

@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回发到服务器就可以实时渲染新的界面出来。