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;
}
}
}