xamarin - 通过绑定显示 JSON 响应（Xamarin 表单）

Question

我现在显示了 json 响应，我希望它在编辑器部分中以正确的格式显示。下面是我的代码：（我从过去两天开始尝试这个，但我不知道如何以正确的格式显示它）

我传递 json 数据的第 1 页：

public partial class MainPage : ContentPage
{
    private static readonly HttpClient client = new HttpClient();
    public String test;

    public MainPage()
    {
        InitializeComponent();
        //     Task.Run(async () => await GetinfoAsync());
        GetinfoAsync();
    }

    public async Task GetinfoAsync()
    {
        var responseString = await client.GetStringAsync("https://reqres.in/api/users/2");

        UserResponse result = JsonConvert.DeserializeObject<UserResponse>(responseString);
        if (result != null)
        {
            Device.BeginInvokeOnMainThread(() =>
            {
                test = dis.Text = "Id:- " + result.Data.id + "\nEmail:- " + result.Data.email + "\nFirst Name:- " + result.Data.first_name + "\nLast Name:- " + result.Data.last_name + "\nImage:- " + result.Data.avatar; dis.Text = test;
            });
        }
    }

    private async void click_me(Object sender, EventArgs args)
    {
        await this.Navigation.PushAsync(new Data(test));
    }

第 2 页，我从第 1 页获取 json 数据

public partial class Data : ContentPage
{
    public MyUser obj;
    public String show;

    public Data(String test)
    {
        show = test;
        InitializeComponent();
        displaylabel.Text = test;
    }
}

第 2 页 Xaml

<StackLayout Padding="20">
    <Editor Text="{Binding obj.id}"   IsReadOnly="True"/>
    <Editor Text="{Binding obj.first_name}" IsReadOnly="True"/>
    <Editor Text="{Binding obj.last_name}" IsReadOnly="True"/>
    <Editor Text="{Binding obj.email}" IsReadOnly="True"/>
    <Editor Text="Image" IsReadOnly="True"/>
    <Image  HeightRequest="100" WidthRequest="100" Source="{Binding obj.avatar}"/>

    <Label Text="show json"
        x:Name="displaylabel"
    VerticalOptions="CenterAndExpand" 
    HorizontalOptions="CenterAndExpand" />

</StackLayout>

我的用户.cs

public class MyUser
{
    public int id { get; set; }
    public string email { get; set; }
    public string first_name { get; set; }
    public string last_name { get; set; }
    public string avatar { get; set; }
}

public class UserResponse
{
    public MyUser Data { get; set; }
}

score 1 · Accepted Answer

创建新页面从您的最后一页发送 json 数据，并通过 belo 代码在此处填充。

XAML 代码

<Grid Margin="20,50">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Editor Grid.Row="0" Grid.Column="0" Text="id" IsReadOnly="True"/>
    <Editor x:Name="txtId" Grid.Row="0" Grid.Column="1" IsReadOnly="True"/>

    <Editor Grid.Row="1" Grid.Column="0" Text="First name" IsReadOnly="True"/>
    <Editor x:Name="txtFirstname" Grid.Row="1" Grid.Column="1"  IsReadOnly="True"/>

    <Editor Grid.Row="2" Grid.Column="0" Text="Last name" IsReadOnly="True"/>
    <Editor x:Name="txtLastname"  Grid.Row="2" Grid.Column="1"  IsReadOnly="True"/>

    <Editor Grid.Row="3" Grid.Column="0" Text="Email" IsReadOnly="True"/>
    <Editor x:Name="txtEmail" Grid.Row="3" Grid.Column="1"  IsReadOnly="True"/>

    <Editor Grid.Row="4" Grid.Column="0" Text="Image" IsReadOnly="True"/>
    <Image x:Name="imgUser" Grid.Row="4" Grid.Column="1" HeightRequest="100" WidthRequest="100" />

</Grid>

背后的代码

public partial class Homepage : ContentPage
{
    private static readonly HttpClient client = new HttpClient();

    myuser _Data;
    public Homepage(myuser Data)
    {
        InitializeComponent();
        //this.BindingContext = new MainPageViewModel();
        _Data = Data;

    }

    protected override void OnAppearing()
    {
        base.OnAppearing();
        txtId.Text = _Data.id.ToString();
        txtFirstname.Text = _Data.first_name;
        txtLastname.Text = _Data.last_name;
        txtEmail.Text = _Data.email;
        imgUser.Source = _Data.avatar;
    }


}

希望对你有帮助

谢谢

score 0 · Accepted Answer

尝试将UserResponse直接传递给Data Page，并绑定到页面：</p>

public partial class MainPage : ContentPage
{
  private static readonly HttpClient client = new HttpClient();
  public UserResponse test;

  public MainPage()
  {
    InitializeComponent();
    //     Task.Run(async () => await GetinfoAsync());
    GetinfoAsync();
  }

  public async Task GetinfoAsync()
  {
    var responseString = await client.GetStringAsync("https://reqres.in/api/users/2");

    UserResponse result = JsonConvert.DeserializeObject<UserResponse>(responseString);
    if (result != null)
    {
        Device.BeginInvokeOnMainThread(() =>
        {
            test = result;
        });
    }
  }

  private async void click_me(Object sender, EventArgs args)
  {
    await this.Navigation.PushAsync(new Data(test));
  }
}

数据页面：

public partial class Data : ContentPage
{
  public UserResponse obj;
  public String show;

  public Data(UserResponse test)
  {
    obj= test;
    InitializeComponent();
    BindingContext = obj;
  }
}

xml：

<StackLayout Padding="20">
  <Editor Text="{Binding Data.id}"   IsReadOnly="True"/>
  <Editor Text="{Binding Data.first_name}" IsReadOnly="True"/>
  <Editor Text="{Binding Data.last_name}" IsReadOnly="True"/>
  <Editor Text="{Binding Data.email}" IsReadOnly="True"/>
  <Editor Text="Image" IsReadOnly="True"/>
  <Image  HeightRequest="100" WidthRequest="100" Source="{Binding Data.avatar}"/>

  <Label Text="show json"
    x:Name="displaylabel"
    VerticalOptions="CenterAndExpand" 
    HorizontalOptions="CenterAndExpand" />

</StackLayout>

score 0 · Accepted Answer

首先，从长远来看，您可以遵循 MVVM 模式使这更容易。但是，如果您想继续使用现有代码，则可以尝试以下操作：

首先，在您的 Page 2 xaml 中设置您的绑定上下文：

<ContentPage x:Name="MyPage" ... />

<StackLayout Padding="20">
    <Editor BindingContext="{x:Reference Name=MyPage}" Text="{Binding obj.id}"   IsReadOnly="True"/>
    <Editor BindingContext="{x:Reference Name=MyPage}" Text="{Binding obj.first_name}" IsReadOnly="True"/>
    <Editor BindingContext="{x:Reference Name=MyPage}" Text="{Binding obj.last_name}" IsReadOnly="True"/>
    <Editor BindingContext="{x:Reference Name=MyPage}" Text="{Binding obj.email}" IsReadOnly="True"/>
    <Editor BindingContext="{x:Reference Name=MyPage}" Text="Image" IsReadOnly="True"/>
    <Image x:Name="myImage" HeightRequest="100" WidthRequest="100"/>

    <Label Text="show json"
        x:Name="displaylabel"
    VerticalOptions="CenterAndExpand" 
    HorizontalOptions="CenterAndExpand" />

</StackLayout>

在您后面的代码中：

您可以声明一个 UserReponse 对象，而不是传递string test：

private static readonly HttpClient client = new HttpClient();
public String test; //instead of this
public UserReponse result; //do this

然后修改这个：

public async Task GetinfoAsync()
    {
        var responseString = await client.GetStringAsync("https://reqres.in/api/users/2");

        result = JsonConvert.DeserializeObject<UserResponse>(responseString); //modify to this

        if (result != null)
        {
            Device.BeginInvokeOnMainThread(() =>
            {
                test = dis.Text = "Id:- " + result.Data.id + "\nEmail:- " + result.Data.email + "\nFirst Name:- " + result.Data.first_name + "\nLast Name:- " + result.Data.last_name + "\nImage:- " + result.Data.avatar; dis.Text = test;
            });
        }
    }

然后通过它：

 await this.Navigation.PushAsync(new Data(result));

将您的第 2 页代码替换为：

public partial class Data : ContentPage
{

    private MyUser _obj;
    public MyUser obj
    {
       get{return _obj;}
       set
       {
          _obj = value;
          OnPropertyChanged();
       }
    }

    public String show;

    public Data(UserReponse result)
    {
        show = test;
        InitializeComponent();
        obj = result.Data;
        myImage.Source = ImageSource.FromUri(new Uri(obj.avatar));
        displaylabel.Text = test;
    }
}

xamarin - 通过绑定显示 JSON 响应（Xamarin 表单）

3 回答 3

Related

Reference