JsonデータをMVVMで表示

Question

やりたいこと

サーバよりJsonでデータを取得してMVVMで画面に表示したい。

Jsonデータは以下の通りです。

• Code（データ取得状態コード） ※アプリ内共通
• Message（エラーメッセージ） ※アプリ内共通
• Data（詳細データ）※アプリ内各所個別

そのため、以下のようにクラスを作成

    public class JsonData<T>
    {
        public int Code
        {
            get; set;
        }
        public string Message
        {
            get; set;
        }
        public T Data
        {
            get; set;
        }
    }
    public class OrgData: BindableBase
    {
        int _ID;
        public int ID
        {
            get
            {
                return _ID;
            }
            set
            {
                SetProperty(ref _ID, value);
            }
        }
        string _Text;
        public string Text
        {
            get
            {
                return _Text;
            }
            set
            {
                SetProperty(ref _Text, value);
            }
        }
    }
    public abstract class BindableBase :INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName] String propertyName = null)
        {
            if(object.Equals(storage, value))
                return false;

            storage = value;
            this.OnPropertyChanged(propertyName);
            return true;
        }
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

作った環境

画面側は以下の通りです。
今回はテストのためEntryに入力したJson文字列をMVVMで画面するものを作成しています。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App1.Page1">
  <StackLayout x:Name="stackMain">
    <Entry x:Name="txtData" />
    <Label Text="{Binding ID}" />
    <Label Text="{Binding Text}" />
    <Button x:Name="btn1" 
            Text="GetData" />
  </StackLayout>
</ContentPage>

using System;
using Xamarin.Forms;
using Newtonsoft.Json;

namespace App1
{
    public partial class Page1 :ContentPage
    {
        public Page1()
        {
            InitializeComponent();
            var _vm = new JsonData<OrgData> { Data = new OrgData() };
            stackMain.BindingContext = _vm.Data;
            this.btn1.Clicked += (sender, e) =>
            {
                try
                {
                    var ret = txtData.Text;
                    _vm = JsonConvert.DeserializeObject<JsonData<OrgData>>(ret);
                }
                catch(Exception ex)
                {
                    DisplayAlert("error", ex.Message, "OK");
                }
            };
        }
    }
}

困っていること

_vm = JsonConvert.DeserializeObject<JsonData<OrgData>>(ret); の場所で、新しくオブジェクトが生成されるためか、PropertyChanged がnullとなり画面に反映されませんでした。
ちなみに、JsonConvertをせず、一つ一つプロパティをセットすると問題なく反映されました。

考えてみたこと

1. Type.GetPropertiesで回してコード上簡潔に１つずつプロパティをセットしようと考えましたが、Xamarin上？ではGetPropertiesはアクセスできず、できませんでした。

2. もう一つ上にViewModelを作成して反映させる

    public class BindingData:BindableBase
    {
        OrgData _data;
        public OrgData Data
        {
            get
            {
                return _data;
            }
            set
            {
                SetProperty(ref _data, value);
            }
        }
    }

こちらもPropertyChangedがnullになりだめでした。

ご回答いただきたいこと

そのままですが、サーバからデータを取得してMVVMで表示したいと思ったときに、皆様はどのような方法をとられていますか？
項目数が多い場合も考慮して、一つ一つプロパティをセットすることは避けたいです。

Comments

[P3PPP]

PCLの場合は `GetProperties` の代わりに `GetRuntimeProperties()` が支えます。

Answer 1

ちょっとプログラムを簡略化しましたが、以下で動作しました。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XFApp1.Page1">
  <StackLayout>
    <Label Text="{Binding Data.ID}" />
    <Label Text="{Binding Data.Text}" />
    <Button x:Name="btn1" Text="GetData" />    
  </StackLayout>
</ContentPage>

using System;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using Xamarin.Forms;

namespace XFApp1
{
    public partial class Page1 : ContentPage
    {
        private int _count;

        public Page1()
        {
            InitializeComponent();
            var _vm = new TestViewModel {Data = new DataModel()};
            BindingContext = _vm;
            btn1.Clicked += (sender, e) =>
            {
                try
                {
                    var data = new DataModel
                    {
                        ID = ++_count,
                        Text = $"{_count} 回目のクリック"
                    };
                    (BindingContext as TestViewModel).Data = data;
                }
                catch (Exception ex)
                {
                    DisplayAlert("error", ex.Message, "OK");
                }
            };
        }
    }

    public class TestViewModel : BindableBase
    {
        private DataModel _data;

        public DataModel Data
        {
            get { return _data; }
            set { SetProperty(ref _data, value); }
        }
    }

    public class DataModel
    {
        public int ID { get; set; }
        public string Text { get; set; }
    }

    public abstract class BindableBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
        {
            if (Equals(storage, value))
                return false;

            storage = value;
            OnPropertyChanged(propertyName);
            return true;
        }

        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

考えてみたこと2のもう一つ上にViewModelを作るパターンでプログラムを行っています。
そしてそのViewModel構造に対応するためにXamlのBindingのPathをID -> Data.IDというような形に変更しています。
このサンプルではDataModelはBindableBaseを継承していませんが、BidableBaseを継承してプロパティ変更を通知するようにすれば、ID、Textの個別の変更にも対応できると思います。

Answer 2

INotifyPropertyChangedは、インスタンスに対して変更を検知するので、新たなインスタンスを生成してしまうと、検知の対象にはならないです（のはず...）。

そのため、上述T-T-T-T-T-T-T-Tさんの記載のように、インスタンスのプロパティ（今回だと_vm.Data）にデータを渡さなければなりません。
（その際は、DataプロパティにもSetPropertyをつけます。）
もし、現状定義しているViewModelをそのまま（CodeやMessageプロパティも含め）データをバインドしたいのであれば、もう一こクラスをラップしてあげると実現できます（できなそうでしたら言っていただければサンプル書きます..）。

サンプルとして、Dataプロパティのみを渡すパターンで（プラスMVVMということでCommandも使ってみるとテスタビリティも上がってよいかと）を書いておきます。ボタンクリックでTextを渡して何かを処理する処理をCommandで実装しています。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloWorld.Views.Page1">

  <StackLayout x:Name="stackMain">
    <Entry x:Name="txtData" />
    <Label Text="{Binding Data.ID}" />
    <Label Text="{Binding Data.Text}" />
    <Button x:Name="btn1" Text="GetData" Command="{Binding SomethingCommand}" CommandParameter="{Binding Data.Text}" />
  </StackLayout>

</ContentPage>

public partial class Page1 : ContentPage
{
    public Page1()
    {
        InitializeComponent();
        //サンプルに適当なデータを初期化...
        var vm = new JsonData<OrgData> { Code = 1, Message = "init!", Data = new OrgData() { ID = 99, Text = "text!!!" } };

        stackMain.BindingContext = vm;
    }
}

    public class JsonData<T> : BindableBase 
    {
        private T _data;
        private int _count;

        public int Code { get; set; }

        public string Message { get; set; }


        public T Data
        {
            get { return _data; }
            set { SetProperty(ref _data, value); }
        }

        public JsonData()
        {
            SomethingCommand = new Command<string>(
                execute: (inputText) =>
                {
                    _count++; //サンプルとしてカウントをアップしています。
                    Data = GetData(_count, inputText);
                });
        }

        public ICommand SomethingCommand { get; }

        private static T GetData(int count, string text)
        {
            //この処理も動的に変更させたいのであれば、Page1クラスのViewModelをインスタンス化するタイミングでデリゲートを渡してあげればよいかと。

            //なんらかのデータ処理でjsonを取得したと仮定したとします(とりあえずjsonを取得したと仮定)
            var jsonStringFromPersistence = GetJsonString(count, text);

            //Deserialize
            return JsonConvert.DeserializeObject<T>(jsonStringFromPersistence);
        }

        private static string GetJsonString(int count, string text)
        {
            return JsonConvert.SerializeObject(new OrgData()
            {
                ID = count,
                Text = $"{text}**{count}"
            });
        }

Answer 3

try
{
    var ret = txtData.Text;
    _vm = JsonConvert.DeserializeObject<JsonData<OrgData>>(ret);
}
catch(Exception ex)
{
    DisplayAlert("error", ex.Message, "OK");
}

これを↓のように書き換えてみては？

try
{
    var ret = txtData.Text;
    var temp = JsonConvert.DeserializeObject<JsonData<OrgData>>(ret);
    _vm.Data = temp.Data;
}
catch(Exception ex)
{
    DisplayAlert("error", ex.Message, "OK");
}

ご自身でも言われているように _vm のインスタンスが再生成されてしまう事が原因です。
そのため、_vmインスタンスを生成しなおさず、dataだけを取ってしまえばいいかと。