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;

}

}

}

相关推荐
freesheep7204 小时前
WPF使用PreviewTextInput事件限制用户输入
c#·wpf
春日轻轨@9 小时前
基于倍增的LCA + kruskal重构树 + 并查集
重构
zzywxc78714 小时前
在处理大数据列表渲染时,React 虚拟列表是提升性能的关键技术,但在实际实现中常遇到渲染抖动和滚动定位偏移等问题。
前端·javascript·人工智能·深度学习·react.js·重构·ecmascript
嵌入式仿真实验教学平台14 小时前
嵌入式系统教学范式演进:云端仿真平台如何重构温湿度监测实验教学
单片机·重构·proteus·产教融合·温湿度传感器·嵌入式仿真
科技资讯快报1 天前
法国声学智慧 ,音响品牌SK (SINGKING AUDIO) 重构专业音频边界
重构·音视频
Nuoyunjituan1 天前
告别物业思维:科技正重构产业园区的价值坐标系
人工智能·科技·重构
请叫我小蜜蜂同学2 天前
「源力觉醒 创作者计划」开源大模型重构数智文明新范式
重构·开源
c#上位机2 天前
wpf之ControlTemplate
wpf
智源研究院官方账号3 天前
智源研究院发布数据魔方,以智能化自定义方式重构模型训练数据供给范式
重构
time_space_time4 天前
《人性的弱点》重构【01】
重构