C#で読み込んだJsonファイルを編集したい

Question

前提・実現したいこと

WPFのアプリケーションで、読み込んだJsonファイルを編集しその変更を元のJsonファイルにも適用させたい

お世話になります。

現在WPFのアプリケーションを作成しており、

画面上の「開く」ボタンを押すことでエクスプローラーからjsonファイルを呼び出し
デシリアライズを行って画面上に必要なデータを表示する

部分までの機能を実装しています。

今後このデータを画面上で編集する機能を作成したいと思っているのですが、どのように実現するのがよいかわからず詰まってしまっている状況です。

jsonデータを編集する機能についてご教授いただけますと幸いです。

コードに基づく具体的な実現したいこと

• subname欄に表示される項目押下時、その項目をsubnameから排除(取り除く)する機能
• subname欄に表示される項目押下時、その項目を別のnameに移動またはコピーさせる機能
• subnameを追加する機能

該当のソースコード

<Window x:Class="ManagerEditor.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ManagerEditor"
        mc:Ignorable="d"
        Title="MainWindow" Height="800" Width="1100">
    <Grid>
        <Grid x:Name="LeftRoot" Margin="10,10,-10,-10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="10*"/>
                <ColumnDefinition Width="27*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="OpenButton" Width="120" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0" Content="開く" FontSize="18" Click="OpenButton_Click" />
            <TextBlock HorizontalAlignment="Left" Margin="10,60,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="31" Width="101" FontSize="18"><Run Language="ja-jp" Text="name"/><LineBreak/><Run Language="ja-jp"/></TextBlock>
            <ListBox x:Name="UnitnameListBox" SelectionChanged="UnitNameListBox_SelectionChanged" Margin="0,100,0,12" ScrollViewer.HorizontalScrollBarVisibility="Disabled" DisplayMemberPath="name" IsSynchronizedWithCurrentItem="True" ItemsSource="{Binding}" HorizontalAlignment="Center" Width="275" />

            <TextBlock x:Name="Display" Grid.Column="2" HorizontalAlignment="Left" Margin="10,41,0,0" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="18"><Run Language="ja-jp" Text="name"/><LineBreak/><Run Language="ja-jp"/></TextBlock>
            <TextBlock x:Name="DisplayBox" Grid.Column="1" HorizontalAlignment="Left" Margin="10,78,0,0" TextWrapping="Wrap"  VerticalAlignment="Top" Width="326" Height="46"/>

            <TextBlock Grid.Column="1" HorizontalAlignment="Left" Margin="10,122,0,0" TextWrapping="Wrap" Text="URL" VerticalAlignment="Top" FontSize="18"/>
            <TextBlock x:Name="URLBox" Grid.Column="1" HorizontalAlignment="Left" Margin="10,151,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="39" Width="595"/>

            <TextBlock HorizontalAlignment="Left" Margin="10,194,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="31" Width="116" FontSize="18" Grid.Column="1"><Run Language="ja-jp" Text="subname"/></TextBlock>
            <ListBox x:Name="SubnameListBox" Margin="10,230,27,12" ScrollViewer.HorizontalScrollBarVisibility="Disabled" DisplayMemberPath="subname" ItemsSource="{Binding / manager_list}" Grid.Column="1" />

        </Grid>

    </Grid>
</Window>

// Copyright © 2022 Tsubasa co., Ltd. All rights reserved.
using Microsoft.Win32;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Windows;
using System.Windows.Controls;

namespace ManagerEditor
{
    /// <summary>
    /// メイン画面
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {

        }

        PersonalData[] _data;


        //Jsonデータのデシリアライズ、格納
        private void OpenButton_Click(object sender, RoutedEventArgs e)
        {
            var dialog = new OpenFileDialog();
            dialog.Filter = "json|*.json";
            if (dialog.ShowDialog().Value)
            {
                var file = dialog.FileName;

                try
                {
                    var reader = new StreamReader(file);
                    var data = reader.ReadToEnd();
                    reader.Close();
                    _data = JsonConvert.DeserializeObject<PersonalData[]>(data);

                }
                catch (Exception error)
                {
                    if (error.Message != null)
                        Debug.WriteLine(error.Message);
                }

                if (_data != null)
                {
                    DataContext = _data;
                }

                URLBox.Text = "";
                DisplayBox.Text = "";
            }
        }

        //グループ押下時の挙動設定
        private void UnitNameListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (UnitnameListBox.SelectedItem == null) return;

            PersonalData item = (PersonalData)UnitnameListBox.SelectedItem;
            DisplayBox.Text = item.name;
            URLBox.Text = item.url;
        }

    }
    public class Manager
    {
        public string subname { get; set; }
        public string address { get; set; }
    }

    public class PersonalData
    {
        public string name { get; set; }
        public string url { get; set; }
        public List<Manager> manager_list { get; set; }
    }

}

[
  {
    "name": "tora",
    "url": "https:tora.com",
    "manager_list": [
      {
        "subname": "tiger",
        "address": "chiba"
      },
      {
        "subname": "tiger2",
        "address": "tokyo"
      }
      
    ]
  },
  {
    "name": "cat",
    "url": "https:cat.com",
    "manager_list": [
      {
        "subname": "neko",
        "address": "kanagawa"
      },
      {
        "subname": "neko2",
        "address": "yokohama"
      }
    ]
  }
]

Comments

[SurferOnWww]

テキストファイルを編集する場合、一旦全部メモリに読み込んで編集し、編集したメモリの内容を丸ごとファイルに上書きするのが普通ですが（メモ帳でやるように）、JSON ファイルもテキストファイルなので同じことになる・・・なんてことは言われなくても分かってます？　その方向で考えて実装してはいかがでしょう？

[tranokado]

アドバイスありがとうございます！
その方向で実装してみます。他の方の実装方針やアドバイスもお聞きしたいのでこの質問版はこのままにしておきます。自分の方でも進捗ありましたら共有させていただけたらと思います！

[SurferOnWww]

メモ帳でやることを提案しているわけではなくて、もっとスマートにできる方法を検討してアプリを作ることを考えてはいかがと提案したつもりなのですが。（例えば、C# のオブジェクトにデシリアライズし、それを WPF の UI に表示してユーザーに編集してもらい、結果を JSON にシリアライズしてファイルに上書きするとか。インデントされた短い JSON 文字列ならメモ帳の方が簡単かもしれませんが）

[tranokado]

> メモ帳でやることを提案しているわけではなくて
すみません自分の伝え方も悪かったですね。
メモ帳でやるようなことをWPFに落とし込んで実装しようと考えていました。

>C# のオブジェクトにデシリアライズし、それを WPF の UI に表示してユーザーに編集してもらい、結果を JSON にシリアライズしてファイルに上書きする
まさにこの方針ですね。この方針で実装に励んでみます。

Answer 1

まず読み込み（DeserializeObject）と保存（SerializeObject）は、最初からセットで作っておきましょう（どうせ後で必要になる）

今後このデータを画面上で編集する機能を作成したいと思っているのですが、どのように実現するのがよいかわからず詰まってしまっている状況です。

「開く」ボタンはありますが、それ以外にButtonやTextBoxが見当たりません。
そもそもどういうＵＩにするかも決まっていない（思いついていない？）ということでしょうか？

subname欄に表示される項目押下時、その項目をsubnameから排除(取り除く)する機能
subnameを追加する機能

この２つはRemoveやAddするだけですが、ただのListではViewに反映させません。

WPFでアイテムの増減がある場合は、ObservableCollectionを使用します。
Listの代わりにObservableCollectionにするだけで、アイテムの増減をViewに通知して即時に反映されます。
ObservableCollection<T> クラス (System.Collections.ObjectModel) | Microsoft Docs

移動やコピーは上２つの応用になりますが、問題はどういうＵＩにするかですね。
理想はsubnameをnameに、ドラッグ＆ドロップできることでしょうか。

ドラッグ＆ドロップはまともにやるとかなり大変ですのでライブラリを使用しました。
使い方を調べる手間はかかりますが、実装は非常に楽になります。
NuGet Gallery | gong-wpf-dragdrop 3.1.1

punker76/gong-wpf-dragdrop: The GongSolutions.WPF.DragDrop library is a drag'n'drop framework for WPF

文字数ギリギリなので説明が少なめですが、不明な点があればコメントしてください。

<Window
  x:Class="Qogxgft0o3rrwcj.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:dd="urn:gong-wpf-dragdrop"
  xmlns:local="clr-namespace:Qogxgft0o3rrwcj"
  Width="800"
  Height="450">
  <Window.Resources>
    <local:ManagerDropHandler x:Key="ManagerDropHandler" />
    <Style TargetType="Button">
      <Setter Property="Margin" Value="10,5" />
      <Setter Property="MinWidth" Value="80" />
    </Style>
    <Style TargetType="GroupBox">
      <Setter Property="BorderThickness" Value="0" />
    </Style>
  </Window.Resources>

  <Grid Margin="10">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="10*" />
      <ColumnDefinition Width="27*" />
    </Grid.ColumnDefinitions>

    <DockPanel>
      <Button
        Click="OpenButton_Click"
        Content="開く"
        DockPanel.Dock="Top" />
      <Button
        Click="SaveAsButton_Click"
        Content="保存"
        DockPanel.Dock="Top" />

      <GroupBox Header="name">
        <ListBox
          x:Name="nameListBox"
          dd:DragDrop.DropHandler="{StaticResource ManagerDropHandler}"
          dd:DragDrop.IsDragSource="True"
          dd:DragDrop.IsDropTarget="True"
          DisplayMemberPath="name"
          IsSynchronizedWithCurrentItem="True"
          ItemsSource="{Binding}" />
      </GroupBox>
    </DockPanel>

    <Grid Grid.Column="1">
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>

      <DockPanel>
        <StackPanel DockPanel.Dock="Right">
          <Button Click="Name_NewButton_Click" Content="新規" />
          <Button Click="Name_DelButton_Click" Content="削除" />
        </StackPanel>
        <StackPanel>
          <GroupBox DockPanel.Dock="Top" Header="name">
            <TextBox Text="{Binding /name, UpdateSourceTrigger=PropertyChanged}" />
          </GroupBox>
          <GroupBox DockPanel.Dock="Top" Header="URL">
            <TextBox Text="{Binding /url, UpdateSourceTrigger=PropertyChanged}" />
          </GroupBox>
        </StackPanel>
      </DockPanel>

      <GroupBox Grid.Row="1" Header="subname">
        <ListBox
          x:Name="subNameListBox"
          dd:DragDrop.IsDragSource="True"
          dd:DragDrop.IsDropTarget="True"
          DisplayMemberPath="subname"
          IsSynchronizedWithCurrentItem="True"
          ItemsSource="{Binding /manager_list}" />
      </GroupBox>

      <DockPanel Grid.Row="2">
        <StackPanel DockPanel.Dock="Right">
          <Button Click="SubName_NewButton_Click" Content="新規" />
          <Button Click="SubName_DelButton_Click" Content="削除" />
        </StackPanel>

        <StackPanel>
          <GroupBox Header="subname">
            <TextBox Text="{Binding /manager_list/subname, UpdateSourceTrigger=PropertyChanged}" />
          </GroupBox>
          <GroupBox Header="address">
            <TextBox Text="{Binding /manager_list/address, UpdateSourceTrigger=PropertyChanged}" />
          </GroupBox>
        </StackPanel>
      </DockPanel>
    </Grid>
  </Grid>
</Window>

using System.Collections.ObjectModel;
using System.IO;
using System.Windows;
using GongSolutions.Wpf.DragDrop;
using GongSolutions.Wpf.DragDrop.Utilities;
using Microsoft.Win32;
using Newtonsoft.Json;

namespace Qogxgft0o3rrwcj
{
	public class Manager
	{
		public string subname { get; set; }
		public string address { get; set; }
	}

	public class PersonalData
	{
		public string name { get; set; }
		public string url { get; set; }
		public ObservableCollection<Manager> manager_list { get; set; }
	}

	public partial class MainWindow : Window
	{
		private ObservableCollection<PersonalData> _data = new ObservableCollection<PersonalData>();

		public MainWindow()
		{
			InitializeComponent();
			DataContext = _data;

			Dummy();
		}

		private void OpenButton_Click(object sender, RoutedEventArgs e)
		{
			var dialog = new OpenFileDialog { Filter = "json|*.json", };
			if (dialog.ShowDialog() == true)
			{
				var json = File.ReadAllText(dialog.FileName);
				_data = JsonConvert.DeserializeObject<ObservableCollection<PersonalData>>(json);
				DataContext = _data;
			}
		}
		private void SaveAsButton_Click(object sender, RoutedEventArgs e)
		{
			var dialog = new SaveFileDialog { Filter = "json|*.json", };
			if (dialog.ShowDialog() == true)
			{
				var json = JsonConvert.SerializeObject(_data, Formatting.Indented);
				File.WriteAllText(dialog.FileName, json);
			}
		}

		private void Name_NewButton_Click(object sender, RoutedEventArgs e)
		{
			var data = new PersonalData
			{
				name = "new name",
				manager_list = new ObservableCollection<Manager>(),
			};
			_data.Add(data);
			nameListBox.SelectedItem = data;
		}
		private void Name_DelButton_Click(object sender, RoutedEventArgs e)
		{
			if (nameListBox.SelectedItem is PersonalData data)
			{
				_data.Remove(data);
			}
		}

		private void SubName_NewButton_Click(object sender, RoutedEventArgs e)
		{
			if (nameListBox.SelectedItem is PersonalData data)
			{
				var manager = new Manager { subname = "new subname", };
				data.manager_list.Add(manager);
				subNameListBox.SelectedItem = manager;
			}
		}
		private void SubName_DelButton_Click(object sender, RoutedEventArgs e)
		{
			if (nameListBox.SelectedItem is PersonalData data
				&& subNameListBox.SelectedItem is Manager manager)
			{
				data.manager_list.Remove(manager);
			}
		}


		private void Dummy()
		{
			if (File.Exists("test.json")) return;

			var json = @"
[
  {
    ""name"": ""tora"",
    ""url"": ""https:tora.com"",
    ""manager_list"": [
      {
        ""subname"": ""tiger"",
        ""address"": ""chiba""
      },
      {
        ""subname"": ""tiger2"",
        ""address"": ""tokyo""
      }
    ]
  },
  {
    ""name"": ""cat"",
    ""url"": ""https:cat.com"",
    ""manager_list"": [
      {
        ""subname"": ""neko"",
        ""address"": ""kanagawa""
      },
      {
        ""subname"": ""neko2"",
        ""address"": ""yokohama""
      }
    ]
  }
]
".Trim();

			File.WriteAllText("test.json", json);
		}
	}


	class ManagerDropHandler : DefaultDropHandler
	{
		public override void DragOver(IDropInfo dropInfo)
		{
			// nameListBox内アイテム並び替え（デフォルト動作）
			if (dropInfo.Data is PersonalData && dropInfo.TargetItem is PersonalData)
			{
				base.DragOver(dropInfo);
			}
			// subNameListBox→nameListBox アイテム移動・コピー（Ctrl+ドラッグ）
			else if (dropInfo.Data is Manager && dropInfo.TargetItem is PersonalData)
			{
				var isCopy = dropInfo.KeyStates.HasFlag(DragDropKeyStates.ControlKey);
				dropInfo.Effects = isCopy ? DragDropEffects.Copy : DragDropEffects.Move;
				dropInfo.DropTargetAdorner = DropTargetAdorners.Highlight;
			}
		}

		public override void Drop(IDropInfo dropInfo)
		{
			if (dropInfo?.DragInfo == null) return;

			// nameListBox内アイテム並び替え（デフォルト動作）
			if (dropInfo.Data is PersonalData && dropInfo.TargetItem is PersonalData)
			{
				base.Drop(dropInfo);
			}
			// subNameListBox→nameListBox アイテム移動・コピー（Ctrl+ドラッグ）
			else if (dropInfo.Data is Manager source && dropInfo.TargetItem is PersonalData target)
			{
				var sourceList = dropInfo.DragInfo.SourceCollection.TryGetList();
				if (dropInfo.Effects == DragDropEffects.Copy)
				{
					var copy = new Manager { subname = source.subname, address = source.address, };
					target.manager_list.Add(copy);
				}
				else if (dropInfo.Effects == DragDropEffects.Move)
				{
					sourceList.Remove(source);
					target.manager_list.Add(source);
				}
			}
		}
	}
}

当初はあまり「バインディング」せずに書いていたのですが、

• 編集機能のＵＩ（更新ボタン？）が悩ましい
• ListBox.Items.Refresh()まみれになって訳が分からなくなった

ため諦めました^^;（わたしには難しすぎたｗ）

---

やってみたこと・やろうとしたけどダメだったことを説明してください（やりたいことだけではただの作業依頼です）

xamlは大きく変わっているので「いろいろ試されてるのかな？」と推測できますが、C#コードは代わり映えしません。
コードにやってみたこと・やろうとしたけどダメだったことの痕跡がないので、第３者から見ると何もやっていないように見えてしまいます（痕跡が何もないよりは、エラーになっていても残っているほうがましです）

ヘルプ | 質問する時のヒント

Comments

[tranokado]

> TN8001さん
丁寧にお教えいただきありがとうございます。
自分の方でも作業依頼のように質問をしてしまい反省しております。

今後やってみたことなどを詳細に書いておこうと思います。
現在お教えいただいた方法も含めて自分の方で理解しながら、コード内に落とし込ませていただいておりますのでもうしばらくお待ちいただけたらと思います。

[tranokado]

ご連絡遅くなり申し訳ありません。
いただいたコードを代替理解することができ、drag&dropの便利さを実感しています。

丁寧にご提案・ご指導くださりありがとうございます。