反序列化嵌套的JSON C＃并绑定到XAML ListBox

时间：2014-01-08 07:20:29

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

我需要将嵌套的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 Data我需要在列表框中显示， 列表框Ui看起来像这个图像

enter image description here

我是Wp8开发的新手，什么是绑定这个嵌套Json数据列表框的最佳方法，我面临的问题是如何绑定跟随者列表图像（2,3以下成员我需要显示图像不仅仅是我需要的图像显示像3个图像+ 4Member）到ListBox 在此先感谢

3 个答案:

答案 0 :(得分：1)

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

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

答案 1 :(得分：0)

如果您转到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;

这应解决所有问题。

答案 2 :(得分：0)

可以使用JSON.Net和JSONORM来管理JOSN数据。你可以通过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"/>
    <!---->
        <!--"" -->

遵循Datacontext 

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; }
}

}

相关问题
最新问题