反序列化嵌套的 JSON C# 并绑定到 XAML 列表框答案

【问题标题】：Deserializing nested JSON C# and Bind to XAML ListBox反序列化嵌套的 JSON C# 并绑定到 XAML 列表框
【发布时间】：2014-01-08 07:20:29
【问题描述】：

我需要将嵌套的 json 字符串反序列化为 Xaml

我的 Json

{
   "status":1,
   "message":"sussess",
   "Task_details":[
      {
         "task_id":"237",
         "created_f_id":"100001",
         "task_description":"task description",
         "due_date":"2014-01-08 04:59:30",
         "alert":"2",
         "status":"1",
         "postedon":"2014-01-07 11:29:29",
         "updatedon":"2014-01-07 11:29:29",
         "comments":[
            {
               "task_comment_id":"367",
               "f_id":"100001588960161",
               "comment":"sdfghhjfdsa",
               "created_date":"2014-01-07 11:29:29",
               "updated_date":"2014-01-07 11:29:29"
            }
         ],
         "followers":[
            {
               "f_id":"1000011"
            },
            {
               "f_id":"100004288170082"
            },
            {
               "f_id":"184685"
            }
         ]
      },
      {
         "task_id":"150",
         "created_f_id":"184680",
         "task_description":"testing",
         "due_date":"2013-12-30 02:39:00",
         "alert":"0",
         "status":"1",
         "postedon":"2013-12-30 09:10:22",
         "updatedon":"2013-12-30 09:10:22",
         "comments":[
            {
               "task_comment_id":"205",
               "f_id":"184385",
               "comment":"comment test",
               "created_date":"2013-12-30 09:10:22",
               "updated_date":"2013-12-30 09:10:22"
            }
         ],
         "followers":[
            {
               "f_id":"1846806385"
            },
            {
               "f_id":"100565"
            },
            {
               "f_id":"100001561"
            }
         ]
      }
   ]
}

我需要在列表框中显示的这个 json 数据，并且列表框 Ui 看起来像这个图像

我是 Wp8 开发新手，绑定此嵌套 Json 数据列表框的最佳方法是什么，我在如何绑定该关注者列表图像时面临问题（低于 2,3 的成员我需要在那里显示图像超过我需要的显示喜欢 3 图像 + 4 成员）到列表框提前致谢

【问题讨论】：

标签： c# wpf json xaml windows-phone-8

【解决方案1】：

首先您需要反序列化 json 字符串，您可以使用 Json.NET - 如果您需要 c# 类模式，请使用 this。然后您需要为您的视图（页面）创建一个DataContext 并在其中创建一个属性来存储您的反序列化 json 对象。你的DataContext 应该实现INotifyPropertyChanged 接口。然后在 XAML 中创建 ListBox 并将其 ItemsSource 属性绑定到 DataContext 中的属性。下一步是创建一个ItemTemplate 作为DataTemplate 来设置您喜欢的ListBox 项目的样式，然后让它们看起来像。

对于您的关注者列表，您只需执行相同的操作，但无需创建新的DataContext，只需使用绑定项目的属性即可。

【讨论】：

是的，但我需要代码，因为我是开发 Wp8 的新手，面临在 Xaml 中绑定追随者列表图像的问题

【解决方案2】：

如果您转到http://json2csharp.com/ 并将您的 json 粘贴到那里，您将获得以下对象

public class Comment
{
    public string task_comment_id { get; set; }
    public string f_id { get; set; }
    public string comment { get; set; }
    public string created_date { get; set; }
    public string updated_date { get; set; }
}

public class Follower
{
    public string f_id { get; set; }
}

public class TaskDetail
{
    public string task_id { get; set; }
    public string created_f_id { get; set; }
    public string task_description { get; set; }
    public string due_date { get; set; }
    public string alert { get; set; }
    public string status { get; set; }
    public string postedon { get; set; }
    public string updatedon { get; set; }
    public List<Comment> comments { get; set; }
    public List<Follower> followers { get; set; }
}

public class RootObject
{
    public int status { get; set; }
    public string message { get; set; }
    public List<TaskDetail> Task_details { get; set; }
}

将所有这些类添加到您的项目中。在后端，您可以执行类似

的操作

var jsonString = @"{
   "status":1,
   "message":"sussess",
   "Task_details":[
      {
         "task_id":"237",
         "created_f_id":"100001",
         "task_description":"task description",
         "due_date":"2014-01-08 04:59:30",
         "alert":"2",
         "status":"1",
         "postedon":"2014-01-07 11:29:29",
         "updatedon":"2014-01-07 11:29:29",
         "comments":[
            {
               "task_comment_id":"367",
               "f_id":"100001588960161",
               "comment":"sdfghhjfdsa",
               "created_date":"2014-01-07 11:29:29",
               "updated_date":"2014-01-07 11:29:29"
            }
         ],
         "followers":[
            {
               "f_id":"1000011"
            },
            {
               "f_id":"100004288170082"
            },
            {
               "f_id":"184685"
            }
         ]
      },
      {
         "task_id":"150",
         "created_f_id":"184680",
         "task_description":"testing",
         "due_date":"2013-12-30 02:39:00",
         "alert":"0",
         "status":"1",
         "postedon":"2013-12-30 09:10:22",
         "updatedon":"2013-12-30 09:10:22",
         "comments":[
            {
               "task_comment_id":"205",
               "f_id":"184385",
               "comment":"comment test",
               "created_date":"2013-12-30 09:10:22",
               "updated_date":"2013-12-30 09:10:22"
            }
         ],
         "followers":[
            {
               "f_id":"1846806385"
            },
            {
               "f_id":"100565"
            },
            {
               "f_id":"100001561"
            }
         ]
      }
   ]
}";

                   var serializer =
                        new DataContractJsonSerializer(typeof (RootObject));
                    var context = (RootObject) serializer.ReadObject(jsonString);

myListBox.ItemSource = context.Task_details;

这应该可以解决所有问题。

【讨论】：

嗨斯图尔特谢谢你的回复，我知道这一点，我在我的代码中完成了这个，我在列表框中显示描述数据和日期，但我无法显示关注者，你发布这个问题，如何将鲜花列表绑定到此列表框
关注者应该在另一个列表框或另一个页面上。然后你可以做类似 var myTaskDetailFollowers = context.Task_details.First(t=>t.task_id == 3).Followers;然后是 myFollersListBox.ItemSource = myTaskDetailFollowers.

【解决方案3】：

JOSN 数据可以使用JSON.Net 和JSONORM 进行管理。你可以通过 jsonorm 在 Nuget 中获取它

获取数据后使用 XAML 中的数据模板。这是一个例子。创建一个窗口并粘贴此 XAML。

<Window x:Class="DataTemplate.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">

<Window.Resources>
    <DataTemplate x:Key="myTaskTemplate">
        <Grid Height="115" Width="456">
            <Grid.RowDefinitions>
                <RowDefinition/>
                    <RowDefinition/>
                        <RowDefinition/>
                          <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
        </Grid.ColumnDefinitions>

            <TextBlock Grid.Row="0" Grid.Column="0"  Grid.ColumnSpan="5" Foreground="#FF0079C3" FontSize="15" FontFamily="Segoe UI Semilight" IsHyphenationEnabled="True" 
            LineStackingStrategy="BlockLineHeight" TextAlignment="Left" TextWrapping="Wrap" Text="{Binding task_id}"/>

            <TextBlock  Grid.Row="1" Grid.Column="0" Foreground="#FF7F7F7F" FontSize="12" FontFamily="Segoe UI Semilight" 
            IsHyphenationEnabled="True" LineStackingStrategy="BlockLineHeight" Text="{Binding alert}" TextAlignment="Left"/>

            <TextBlock  Grid.Row="2" Grid.Column="0" Foreground="#FF7F7F7F" FontSize="12" FontFamily="Segoe UI Semilight" 
            IsHyphenationEnabled="True" LineStackingStrategy="BlockLineHeight" Text="{Binding task_description}" TextAlignment="Left"/>

                  <Path Grid.Row="3"  Grid.Column="0" Data="F1M8,2C11.314,2 14,4.686 14,8 14,11.313 11.314,14 8,14 4.686,14 2,11.313 2,8 2,4.686 4.686,2 8,2z" 
                Fill="#FF85F088" HorizontalAlignment="Right" Grid.RowSpan="1" 
                Stretch="Uniform"/>

                   <Path Grid.Row="3"  Grid.Column="0" Data="F1M8,2C11.314,2 14,4.686 14,8 14,11.313 11.314,14 8,14 4.686,14 2,11.313 2,8 2,4.686 4.686,2 8,2z" 
                Fill="#FF85F088" HorizontalAlignment="Right" Grid.RowSpan="1" 
                Stretch="Uniform" RenderTransformOrigin="-1.087,0.548" Margin="0,1,31,-1"/>
                   <Path Grid.Row="3"  Grid.Column="0" Data="F1M8,2C11.314,2 14,4.686 14,8 14,11.313 11.314,14 8,14 4.686,14 2,11.313 2,8 2,4.686 4.686,2 8,2z" 
                Fill="#FF85F088" HorizontalAlignment="Right" Grid.RowSpan="1" 
                Stretch="Uniform" RenderTransformOrigin="-1.087,0.548" Margin="0,0,63,0"/>

        </Grid>


    </DataTemplate>
</Window.Resources>



    <ListBox Grid.Column="0" Grid.Row="1" 
        ItemsSource="{Binding Followers,IsAsync=True}"
        ItemTemplate="{StaticResource myTaskTemplate}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
        HorizontalContentAlignment="Stretch" Margin="0,13,0,0"/>
    <!---->
        <!--"" -->

关注数据上下文

using System.Text;
using System.Threading.Tasks;
using InSync.appseconnect.Helper;
using ObjectDAL;
using jsonorm;


public class DataContext : ObservableObjectGeneric<DataContext>
{

    private List<Task_details> _taskdetaillist;

    public DataContext()
    {
        Followers = new Task_details().GetElementList("Task_details");
    }


    public List<Task_details> Followers
    {
        get
        {
            return _taskdetaillist;
        }
        set
        {
            _taskdetaillist = value;
            OnPropertyChanged("Followers");
        }
    }

}

下面是ObjectDAL

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using jsonorm;

namespace ObjectDAL
{
public class Comment
{
    public string task_comment_id { get; set; }
    public string f_id { get; set; }
    public string comment { get; set; }
    public string created_date { get; set; }
    public string updated_date { get; set; }
}

public class Follower
{
    public string f_id { get; set; }
}

public class Task_details : LocalStorage<Task_details>
{
    public string task_id { get; set; }
    public string created_f_id { get; set; }
    public string task_description { get; set; }
    public string due_date { get; set; }
    public string alert { get; set; }
    public string status { get; set; }
    public string postedon { get; set; }
    public string updatedon { get; set; }
    public List<Comment> comments { get; set; }
    public List<Follower> followers { get; set; }
}

public class TaskDetailList : LocalStorage<TaskDetailList>
{
    public int status { get; set; }
    public string message { get; set; }
    public List<Task_details> Task_details { get; set; }
}

}

【讨论】：