ASP.NET Core Blazor数据绑定

前端与后端数据绑定：单向与双向示例

原创已于 2023-02-27 19:52:54 修改 · 545 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2023-02-25 20:59:14 首次发布

ASP.NET Core Blazor 专栏收录该内容

32 篇文章

订阅专栏

文章介绍了数据绑定的概念，通过C#和Razor语法展示了单向和双向数据绑定的例子。在单向绑定中，后端代码改变会更新前端显示，而前端输入不影响后端。双向绑定则允许前端输入直接改变后端数据。

数据绑定就是前端显示（页面元素的值）与后端数据（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 = "小明";
}

结果：