ASP.NET Core Blazor数据绑定

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

结果:

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值