WPF【11_7】WPF实战-重构与美化(ViewModel的嵌套与分解、海量数据不要Join)

11-12 【重构】ViewModel的嵌套与分解

目前我们的代码中有一个不易发现的致命问题,如果工作中这样写代码大概率会被打回去重做。那么这个问题是什么呢?

--\ViewModels\MainViewModel.cs

视图模型中的 LoadCustomers() 方法,考虑一下在这里我们访问数据库的时候使用了 Include 语句,在访问数据库的时候会同时访问数据库的预约表和客户表,并且根据外键关系对这两张表做连表查询如果。

Customers = db.Customers.Include(c => c.Appointments).ToList();

翻译为 sql 语句那么我们将会得到:

Select * from Customers as c join Appointments as a on c.Id = a. CustomerId

Appointments 表将会根据外键关系 CustomerId 来进行连接,在数据量较少的时候可能看不出问题。不过一旦数据量增加,对于海量的数据进行多表连接的效率是非常可怕的,尤其是程序在刚启动的时候加载了太多暂时不需要的数据,将会严重的影响程序的性能。

我们需要的是程序刚启动的时候只需要加载客户列表,而通过用户对客户列表的选择来选择性加载后续的预约数据。

因此在 LoadCustomers 中我们需要删除这个 Include 语句不访问 Appointments table ,而预约数据将会在后续完成客户选择以后延迟加载。

所以接下来我们需要考虑的是把主页视图模型的加载过程分解为:两个独立的过程。根据分段加载数据"创建两个独立的子视图模型"。

那么这两个视图模型就是 CustomerViewModel 以及 AppointmentViewModel ,也就是说我们的主页视图模型将会嵌套两个子视图模型。

--\ViewModels\MainViewModel.cs

public class MainViewModel

{

public List<CustomerViewModel> Customers { get; set; } = new();

public List<AppointmentViewModel> Appointments { get; set; } = new();

......

}

实际上 CustomerViewModel 它的底层模型使用的依然是客户模型 Customer ,所以我们应该创建一个私有的客户成员变量对数据进行支撑。代码进行到这里也不难发现 MVVM 的架构从理论上来说就是:视图引用视图模型而视图模型则引用最终的模型。

那么模型的数据是如何加载到 CustomerViewModel 中呢?我们可以通过构造方法来完成数据的加载。构造方法传入一个 Customer 的数据,而 Customer 通过参数把数据传递给私有成员变量 _customer 。

--\ViewModels\CustomerViewModel.cs

public class CustomerViewModel

{

private Customer _customer;

public CustomerViewModel(Customer customer)

{

_customer = customer;

}

public int Id { get => _customer.Id; }

public string Name

{

get => _customer.Name; set

{

if (_customer.Name != value)

{

_customer.Name = value;

}

}

}

............

}

接下来我们将会在 UI 中使用 CustomerViewModel 来代替上一节课对 Customer 的绑定,所以我们需要对输出的数据做一定的映射。首先我们需要向 UI 输出的就是 Customer 的 Id ,因为它是一个只读属性所以映射的时候我们只需要处理 get 就好了。

而接下来我们还需要在 UI 中显示客户的名称,而对于客户的名称我们不仅需要显示还需要更改,所以同时需要 get 和 set 。

set 就要考虑一下了,如果用户在点击用客户资料更新按钮的时候没有对姓名进行更改,那么我们难道需要把相同的数据提交给数据库吗?显然不对。所以在 set 中我们需要做一个判断:尤其仅当用户的姓名输入发生改变的时候,才修改数据。

回到主页视图模型 MainViewModel 找到 LoadCustomers 方法,方法报错了报错的原因是因为数据类型不一致,我们从数据库中获得的数据类型是列表类型的 Customer ,这是数据模型 model 。而我们对外显示的 Customers 却是视图模型 CustomerViewModel 。

所以在进行数据加载的过程中我们需要把数据从 Customer 类型转化为 CustomerViewModel 类型,这个转化过程其实也非常简单我们使用一个 for 循环就可以完成。

--\ViewModels\MainViewModel.cs

public class MainViewModel

{

public List<CustomerViewModel> Customers { get; set; } = new();

public List<AppointmentViewModel> Appointments { get; set; } = new();

......

public void LoadCustomers()

{

using (var db = new AppDbContext())

{

// Select * from Customers as c join Appointments as a on c.Id = a. CustomerId

var customers = db.Customers

//.Include(c => c.Appointments)

.ToList();

foreach(var c in customers)

{

Customers.Add(new CustomerViewModel(c));

}

}

}

}

运行时,当我们选择客户的时候,报错了!

因为此时,我们已经把视图模型从 Customer 改为 CustomerViewModel 了,所以在客户列表选择的过程中所绑定的代码同样也是 CustomerViewModel 。

--\ViewModels\MainViewModel.cs

private CustomerViewModel _selectedCustomer;

public CustomerViewModel SelectedCustomer

{

get => _selectedCustomer; set

{

if (value != _selectedCustomer)

{

_selectedCustomer = value;

}

}

}

相关推荐
云雾J视界3 小时前
AI时代技术面试重构:谷歌如何用Vibe Coding与抗作弊革命重塑招聘
人工智能·google·面试·重构·谷歌·ai工具·技术面试
深蓝学院3 小时前
智源研究院新研究:突破物理世界智能边界的RoboBrain 2.0,将重构具身AI能力天花板
人工智能·重构
顾道长生'3 小时前
(Arxiv-2025)重构对齐提升了统一多模态模型的性能
重构
伊莲娜生活3 小时前
大健康时代下的平台电商:VTN平台以科研创新重构健康美丽消费生态
人工智能·物联网·重构
健康有益科技3 小时前
大模型食材识别技术革新:AI重构精准营养管理
大数据·人工智能·计算机视觉·重构
拾忆,想起7 小时前
Redisson 分布式锁的实现原理
java·开发语言·分布式·后端·性能优化·wpf
weixin_464078079 小时前
wpf依赖注入驱动的 MVVM实现(含免费源代码demo)
wpf
beyond谚语13 小时前
一、WPF入门介绍+Grid和StackPanel布局介绍+实战模拟Notepad++页面布局
wpf
CPU不够了13 小时前
WPF常见问题清单
wpf·自适应
beyond谚语14 小时前
二、WPF——Style样式玩法(通过资源字典将Style独立,全局调用)
wpf