视图如何使用视图模型和网络API获取数据_Delete视图和操作如何获取模型id？_如何在HTML表格中获取api数据和视图 - 腾讯云开发者社区

视图如何使用视图模型和网络API获取数据

视图模型（ViewModel）是一种设计模式，主要用于分离用户界面（UI）的数据表示逻辑与业务逻辑。它通常与MVVM（Model-View-ViewModel）架构模式一起使用，旨在提高应用程序的可测试性和可维护性。

基础概念

Model：代表应用程序的数据和业务逻辑。
View：负责显示数据并与用户交互。
ViewModel：作为View和Model之间的桥梁，处理View的数据绑定和命令。

使用视图模型和网络API获取数据

1. 定义数据模型

首先，定义一个数据模型来表示从网络API获取的数据。

public class Item
{
    public int Id { get; set; }
    public string Name { get; set; }
    // 其他属性...
}

2. 创建视图模型

创建一个视图模型来处理数据获取逻辑。

public class ItemViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Item> _items;
    public ObservableCollection<Item> Items
    {
        get { return _items; }
        set
        {
            _items = value;
            OnPropertyChanged(nameof(Items));
        }
    }

    public ICommand LoadItemsCommand { get; }

    public ItemViewModel()
    {
        LoadItemsCommand = new RelayCommand(LoadItems);
    }

    private async void LoadItems()
    {
        try
        {
            var items = await GetItemsFromApi();
            Items = new ObservableCollection<Item>(items);
        }
        catch (Exception ex)
        {
            // 处理异常
        }
    }

    private async Task<List<Item>> GetItemsFromApi()
    {
        using (var client = new HttpClient())
        {
            var response = await client.GetAsync("https://api.example.com/items");
            response.EnsureSuccessStatusCode();
            var json = await response.Content.ReadAsStringAsync();
            return JsonConvert.DeserializeObject<List<Item>>(json);
        }
    }

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

3. 在视图中使用视图模型

在XAML文件中，将视图模型绑定到视图。

<Window x:Class="YourNamespace.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="450" Width="800">
    <Window.DataContext>
        <vm:ItemViewModel />
    </Window.DataContext>
    <Grid>
        <ListView ItemsSource="{Binding Items}">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="ID" DisplayMemberBinding="{Binding Id}" />
                    <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" />
                </GridView>
            </ListView.View>
        </ListView>
        <Button Content="Load Items" Command="{Binding LoadItemsCommand}" />
    </Grid>
</Window>