MAUI MVVM：如何将NoSQL返回数据填充至CollectionView

你的Student模型不能直接使用，存在几个关键问题：

1. 字段映射不匹配：后端JSON采用小驼峰命名（如firstName、photo），但你模型里的Id是大驼峰格式，直接序列化/反序列化会失败，需要用[JsonPropertyName]特性指定对应JSON字段名。
2. coursesTaken类型错误：后端返回的coursesTaken是单个对象而非数组，但你的模型里定义为List<Course>，会导致反序列化失败，应改为Course类型。
3. 语法错误：代码存在括号、逗号的语法问题（如get set)、{get, set},），需要修正。

修正后的完整模型如下（需配套Course和Teacher模型）：

using System.Text.Json.Serialization;

public class Student
{
    [JsonPropertyName("id")]
    public string Id { get; set; }

    [JsonPropertyName("firstName")]
    public string FirstName { get; set; }

    [JsonPropertyName("lastName")]
    public string LastName { get; set; }

    [JsonPropertyName("photo")]
    public string Photo { get; set; }

    [JsonPropertyName("graduated")]
    public bool Graduated { get; set; }

    [JsonPropertyName("coursesTaken")]
    public Course CoursesTaken { get; set; }
}

public class Course
{
    [JsonPropertyName("id")]
    public string Id { get; set; }

    [JsonPropertyName("name")]
    public string Name { get; set; }

    [JsonPropertyName("semester")]
    public string Semester { get; set; }

    [JsonPropertyName("teacher")]
    public Teacher Teacher { get; set; }
}

public class Teacher
{
    [JsonPropertyName("id")]
    public string Id { get; set; }

    [JsonPropertyName("firstName")]
    public string FirstName { get; set; }

    [JsonPropertyName("lastName")]
    public string LastName { get; set; }

    [JsonPropertyName("teacherImage")]
    public string TeacherImage { get; set; }
}

结合CommunityToolkit.MVVM用ObservableCollection实现响应式绑定，步骤如下：

1. 安装依赖包：确保项目已安装Microsoft.Toolkit.Mvvm NuGet包。

2. 构建ViewModel：继承ObservableObject，用[ObservableProperty]特性自动生成响应式属性，用ObservableCollection<Student>存储学生列表（它会自动通知UI集合的增删改变化）：

using Microsoft.Toolkit.Mvvm.ComponentModel;
using System.Collections.ObjectModel;

public class StudentViewModel : ObservableObject
{
    // 自动生成Students的getter、setter及属性变更通知
    [ObservableProperty]
    private ObservableCollection<Student> _students = new();

    // 示例：从后端加载数据的方法
    public void LoadStudents(string jsonData)
    {
        // 反序列化JSON到Student数组
        var studentArray = System.Text.Json.JsonSerializer.Deserialize<Student[]>(jsonData);
        
        // 更新集合（清空旧数据，添加新数据）
        Students.Clear();
        foreach (var student in studentArray)
        {
            Students.Add(student);
        }
    }
}

3. UI绑定（以XAML框架为例）：将ViewModel设置为页面/窗口的DataContext，然后绑定Students集合到列表控件：

<!-- 设置DataContext -->
<Window.DataContext>
    <local:StudentViewModel />
</Window.DataContext>

<!-- 绑定ObservableCollection到ListView -->
<ListView ItemsSource="{Binding Students}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Margin="5">
                <TextBlock Text="{Binding FirstName}" FontWeight="Bold"/>
                <TextBlock Text="{Binding LastName}"/>
                <Image Source="{Binding Photo}" Width="50" Height="50"/>
                <TextBlock Text="选修课程："/>
                <TextBlock Text="{Binding CoursesTaken.Name}"/>
                <TextBlock Text="授课教师：{Binding CoursesTaken.Teacher.FirstName} {Binding CoursesTaken.Teacher.LastName}"/>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

如果需要Student模型的属性变化也能实时通知UI，可让Student类继承ObservableObject并使用[ObservableProperty]特性：

using Microsoft.Toolkit.Mvvm.ComponentModel;
using System.Text.Json.Serialization;

public partial class Student : ObservableObject
{
    [JsonPropertyName("id")]
    [ObservableProperty]
    private string _id;

    [JsonPropertyName("firstName")]
    [ObservableProperty]
    private string _firstName;

    // 其他属性同理修改...
}

内容的提问来源于stack exchange，提问作者SJaka