c# - JSON到ObservableCollection以在ListView中使用

Question

我是UWP，Visual Studio和MVVM的新手。现在，我有一个相对简单的应用程序，我只想显示学生及其类(class)。我将所有数据存储在外部数据库中，并将Web Api与NewtonSoft JSON结合使用以反序列化信息。

我有两个类，“学生”和“类(class)”。每个学生都有一个包含类(class)的列表属性。

如何从API获取每个学生的类(class)列表，并正确显示它们？

学生类(模型):

public class Students {
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public virtual List<Courses> Courses {get; set;}
}

类(class)类(class)(模型):

public class Courses {
    public int Id { get; set; }
    public string CourseName { get; set; }
    public string CourseCode { get; set; }
    public virtual List<Students> Students { get; set; }
}

XAML(查看):

<Page.DataContext>
    <vm:NewStudentViewModel x:Name="viewModel" />
</Page.DataContext>

<RelativePanel>
    <ListView 
        RelativePanel.AlignLeftWithPanel="True"
        RelativePanel.AlignRightWithPanel="True"
        ItemsSource="{Binding StudentList}"
        Name="StudentList">
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding FirstName, Mode=OneWay}" Margin="5 0 0 0" />
                    <TextBlock Text="{Binding LastName, Mode=OneWay}"  Margin="5 0 0 0"/>
                    <TextBlock Text="{Binding CourseName, Mode=OneWay}"  Margin="5 0 0 0"/>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</RelativePanel>

我的ViewModel:

public class NewStudentViewModel : ViewModelBase, INotifyPropertyChanged {

    public  NewStudentViewModel() {
        InitaializeDataAsync();
    }

    ObservableCollection<Students> students;
    public ObservableCollection<Students> StudentList {
        get { 
            return students;
        }
        set {
            Set(ref students, value);
            RaisePropertyChanged(nameof(StudentList));
        }
    }

    public async Task<ObservableCollection<Students>> GetStudendts() {
        if (StudentList == null) {
            HttpClient Client = new HttpClient();
            HttpResponseMessage responseMessage = await Client.GetAsync("http://localhost:50491/api/students");

            if (responseMessage.IsSuccessStatusCode) {
                var Jsonresponse = await Client.GetStringAsync("http://localhost:50491/api/students");
                var StudentModel = JsonConvert.DeserializeObject<ObservableCollection<Students>>(Jsonresponse);
                return StudentModel;
            }
        }
        return StudentList;
    }

    private async Task InitaializeDataAsync() {
        StudentList = await GetStudendts();
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void RaisePropertyChanged(string propertyName) {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    private string _FirstName;
    public string FirstName {
        get {
            return _FirstName;
        }
        set {

            _FirstName = value;
            RaisePropertyChanged(nameof(FirstName));
        }
    }

    private string _LastName;
    public string LastName {
        get {
            return _LastName;
        }
        set {
            _LastName = value;
            RaisePropertyChanged(nameof(LastName));
        }
    }

    private string _CourseName;
    public string CourseName {
        get {
            return _CourseName;
        }
        set {
            _CourseName = value;
            RaisePropertyChanged(nameof(CourseName));
        }
    }
}

现在，我只能显示学生的名字和姓氏，但我不知道如何显示每个学生的类(class)列表。 (仅显示类(class)名称就足够了)

PS(奖励问题):我的/api/学生返回以下XML:

<ArrayOfStudents xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.datacontract.org/2004/07/Model">
    <Students>
        <Courses i:nil="true"/>
        <FirstName>Olaf</FirstName>
        <Id>1</Id>
        <LastName>Roglebang</LastName>
    </Students>
    <Students>
        <Courses i:nil="true"/>
        <FirstName>Winther</FirstName>
        <Id>2</Id>
        <LastName>Summers</LastName>
    </Students>
    <Students>
        <Courses i:nil="true"/>
        <FirstName>James</FirstName>
        <Id>3</Id>
        <LastName>Bond</LastName>
    </Students>
</ArrayOfStudents>

为什么不能正确显示类(class)？

编辑1:
这是我来自api/学生的Json格式的结果:

[
    {
        "Id": 1,
        "FirstName": "sample string 2",
        "LastName": "sample string 3",
        "Courses": [
            {
                "Id": 1,
                "CourseName": "sample string 2",
                "CourseCode": "sample string 3",
                "Students": []
            },
            {
                "Id": 1,
                "CourseName": "sample string 2",
                "CourseCode": "sample string 3",
                "Students": []
            }
        ]
    },
    {
        "Id": 1,
        "FirstName": "sample string 2",
        "LastName": "sample string 3",
        "Courses": [
            {
                "Id": 1,
                "CourseName": "sample string 2",
                "CourseCode": "sample string 3",
                "Students": []
            },
            {
                "Id": 1,
                "CourseName": "sample string 2",
                "CourseCode": "sample string 3",
                "Students": []
            }
        ]
    }
]

Answer 1

在检查了json样本值之后，我发现，如果使用此行var StudentModel = JsonConvert.DeserializeObject<ObservableCollection<Students>>(Jsonresponse);解析json值，则会得到一个Students集合，然后在每个Students对象中，它包含一个Coureses集合。因此，您的xaml需要进行如下更改:

<ListView 
    RelativePanel.AlignLeftWithPanel="True"
    RelativePanel.AlignRightWithPanel="True"
    ItemsSource="{Binding StudentList}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding FirstName, Mode=OneWay}" Margin="5 0 0 0" />
                    <TextBlock Text="{Binding LastName, Mode=OneWay}"  Margin="5 0 0 0"/>
                    <ListView ItemsSource="{Binding Courses}">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <StackPanel>
                                    <TextBlock Text="{Binding CourseName, Mode=OneWay}"  Margin="5 0 0 0"/>
                                </StackPanel>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
</ListView>