2020-06-11-ASP.NET Core Blazor 子组件父组件数据同步的问题
2023-09-27 14:25:38 时间
上一篇写数据绑定的文章,写到最后留了一个坑。当子组件绑定父组件的一个字段,并且子组件修改它的时候父组件不能实时进行同步更新UI的问题,最近终于在Blazui作者的指导下搞定了。
UserInfo类要实现INotifyPropertyChanged接口
public class UserInfo: INotifyPropertyChanged
{
private string _userName;
public string UserName {
get
{
return _userName;
}
set
{
_userName = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(UserName)));
}
}
public string Sex { get; set; }
public DateTime BrithDay { get; set; }
public event PropertyChangedEventHandler PropertyChanged;
}
没想到微软blazor还是借用了WPF搞MVVM的模式,模型需要实现INotifyPropertyChanged类,在属性发生修改的时候可以发出通知。
父组件订阅PropertyChanged事件:
@page "/"
====================parent```==================
<p>
userName: @userInfo.UserName
</p>
<p>
sex: @userInfo.Sex
</p>
<p>
brithday: @userInfo.BrithDay
</p>
<p>
title: @title
</p>
<InfoEdit UserInfo="userInfo" UserInfoChanged="HandleUserInfoChanged"></InfoEdit>
@code {
private UserInfo userInfo;
private string title;
protected override void OnInitialized()
{
userInfo = new UserInfo
{
UserName = "abc",
Sex = "f",
BrithDay = DateTime.Now
};
this.userInfo.PropertyChanged += (o, e) => StateHasChanged();
base.OnInitialized();
}
private void HandleUserInfoChanged(UserInfo info)
{
this.userInfo = info;
Console.WriteLine("HandleUserInfoChanged");
}
}
父组件订阅子组件的PropertyChanged事件,当事件发生的时候调用组件的StateHasChanged方法。StateHasChanged方法会通知组件说状态发生变化了,也就是说组件会被重新渲染。这就是最关键的东西了。
子组件
====================child==================
<p>
userName: <input @bind="UserInfo.UserName" @bind:event="oninput" />
</p>
<p>
sex:
<select @bind="UserInfo.Sex">
<option value="m">男</option>
<option value="f">女</option>
</select>
</p>
<p>
BrithDay:<input @bind="UserInfo.BrithDay" />
</p>
<button class="btn btn-danger" @onclick="InvokeChanged">保存</button>
@code {
[Parameter]
public UserInfo UserInfo { get; set; }
[Parameter]
public EventCallback<UserInfo> UserInfoChanged { get; set; }
private void InvokeChanged()
{
UserInfoChanged.InvokeAsync(this.UserInfo);
Console.WriteLine("InvokeChanged");
}
}
运行
一些吐槽
虽然搞定了子父组件同步的问题,但是我不能理解的是,为什么微软要搞的这么复杂。使用@bind-UserInfo会强制用户在子组件实现一个 EventCallback
关注我的公众号一起玩转技术
相关文章
- ASP.NET Core MVC/WebAPi 模型绑定探索
- ASP.NET MVC之文件上传【一】(八)
- asp.net关闭页面ViewState
- 学习ASP.NET Core Razor 编程系列文章目录
- 学习ASP.NET Core Blazor编程系列八——数据校验
- 学习ASP.NET Core Blazor编程系列十七——文件上传(上)
- 学习ASP.NET Core Blazor编程系列十六——排序
- 学习ASP.NET Core Razor 编程系列一
- Learn asp.net core blazor project with ChatGPT
- Asp.Net Mvc jQuery Unobtrusive Validation input tag必须是在form里面
- C#调用接口注意要点 socket,模拟服务器、客户端通信 在ASP.NET Core中构建路由的5种方法
- C# -- HttpWebRequest 和 HttpWebResponse 的使用 C#编写扫雷游戏 使用IIS调试ASP.NET网站程序 WCF入门教程 ASP.Net Core开发(踩坑)指南 ASP.Net Core Razor+AdminLTE 小试牛刀 webservice创建、部署和调用 .net接收post请求并把数据转为字典格式
- ASP.NET CORE系列【四】基于Claim登录授权
- Asp.net 中ViewState,cookie,session,application,cache的比较
- Asp.NET Core 限流控制-AspNetCoreRateLimit
- Asp.net判断变量是Null值还是空值的几种方法!
- 前端使用AngularJS的$resource,后端ASP.NET Web API,实现增删改查
- 在ASP.NET MVC中使用Knockout实践07,自定义验证信息的位置与内容
- ASP.NET Core应用程序容器化、持续集成与Kubernetes集群部署(一)
- ASP.NET Core 导入导出Excel xlsx 文件
- 在Linux环境下使用Jexus部署ASP.NET Core
- [转发]ASP.NET Core2集成Office Online Server(OWAS)实现办公文档的在线预览与编辑(支持wordexcelpptpdf等格式)
- Asp.Net Core 获取配置系统Configuration
- 【历史上的今天】6 月 27 日:摩托罗拉创始人出生;微软发布 ASP.NET Core;靠计算机起家的美国大亨
- ASP.NET Core 折腾笔记二:自己写个完整的Cache缓存类来支持.NET Core
- HttpClientFactory in ASP.NET Core 2.1 Part 5: 日志