Rose Rose - 8 months ago 56
C# Question

Retrieve JSON data in gridview at UWP

have two pages that retrieve data from two pieces of link json. The Page1 displays the JSON data with links: http://.../mobileapp/GetCategoriesXMLa and the Page2 displays the JSON data with links: http://.../mobileapp/GetPostByCategoryXMLa?term_id=(item_id)

I find it difficult to retrieve the data id of the selected menu on the first page to complete the website link (the data for the second page).
Example JSON Page1:
JSON Page1

Example JSON second page:
JSON page2

XAML Page1:

<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemDetailScrollViewer"
Padding="20,0,0,0"
Margin="30,30,30,30"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick"
DataContext="{Binding SelectedItem, ElementName=itemListView}"
ScrollViewer.HorizontalScrollMode="Auto" ScrollViewer.VerticalScrollMode="Auto"
ScrollViewer.ZoomMode="Disabled">

<GridView.ItemTemplate>
<DataTemplate>
<Grid Height="200" Width="200" Margin="10,10,0,0" Background="{x:Null}" BorderBrush="#FF7A7A7A" BorderThickness="1">
<Image x:Name="menu" Source="{Binding Menu}" HorizontalAlignment="Center" Stretch="Uniform" AutomationProperties.Name="{Binding Name}" ImageOpened="Image_ImageOpened" Loaded="cover_Loaded" Loading="cover_Loading"/>
<StackPanel x:Name="stackJudul" Margin="0,-25,0,0" Height="25" VerticalAlignment="Bottom" Background="#CC7A7A7A">
<TextBlock x:Name="name" Text="{Binding Name}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="Wrap" Foreground="White" FontSize="15" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="SemiBold"/>
</StackPanel>
<TextBlock x:Name="ID" Text="{Binding ID}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="Wrap" Foreground="White" FontSize="17" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="SemiBold" Visibility="Collapsed"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>


Page1 Code:

private async void Store()
{
try
{
var httpClient = new HttpClient(new HttpClientHandler());
string urlPath = "http://..../mobileapp/GetCategoriesXMLa";

var values = new List<KeyValuePair<string, string>>
{

};

HttpResponseMessage response = await httpClient.PostAsync(urlPath, new FormUrlEncodedContent(values));
response.EnsureSuccessStatusCode();

if (!response.IsSuccessStatusCode)
{
loading.IsActive = false;
RequestException();
}

string jsonText = await response.Content.ReadAsStringAsync();
JsonArray jsonData1 = JsonArray.Parse(jsonText);

foreach (JsonValue groupValue in jsonData1)
{

JsonObject groupObject = groupValue.GetObject();

string menuId = groupObject["id"].GetString();
string title = groupObject["name"].GetString();
string button = groupObject["thumbnail-200x200"].GetString();

FurnitureHome file = new FurnitureHome();
file.ID = menuId;
file.Menu = button;
file.Name = title;

datasource.Add(file);
}

if (jsonData1.Count > 0)
{
itemGridView.ItemsSource = datasource;
}
else
{
loading.IsActive = false;
statusKosong.Visibility = Visibility.Visible;
}
}
catch (HttpRequestException ex)
{
loading.IsActive = false;
RequestException();
}
}
}
private void ItemView_ItemClick(object sender, ItemClickEventArgs e)
{
FurnitureHome item = e.ClickedItem as FurnitureHome;
Furniture itemDetail = new Furniture();
DetailId.Text = item.ID;
itemDetail.ID = DetailId.Text;
this.Frame.Navigate(typeof(FurnitureCategory), itemDetail.ID);
}


Example display page1:
Page1

XAML Page2:

<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemDetailScrollViewer"
Padding="20,0,0,0"
Margin="30,30,30,30"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick"
DataContext="{Binding SelectedItem, ElementName=itemListView}"
ScrollViewer.HorizontalScrollMode="Auto" ScrollViewer.VerticalScrollMode="Auto"
ScrollViewer.ZoomMode="Disabled">

<GridView.ItemTemplate>
<DataTemplate>
<Grid Height="140" Width="200" Margin="10,10,0,0" Background="{x:Null}" BorderBrush="#FF7A7A7A" BorderThickness="1">
<Image x:Name="menu" Source="{Binding Gambar}" HorizontalAlignment="Center" Stretch="Uniform" AutomationProperties.Name="{Binding Title}" ImageOpened="Image_ImageOpened" Loaded="cover_Loaded" Loading="cover_Loading"/>
<StackPanel x:Name="stackJudul" Margin="0,-25,0,0" Height="25" VerticalAlignment="Bottom" Background="#CC7A7A7A">
<TextBlock x:Name="name" Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="Wrap" Foreground="White" FontSize="15" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="SemiBold"/>
</StackPanel>
<TextBlock x:Name="ID" Text="{Binding ID}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="Wrap" Foreground="White" FontSize="17" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="SemiBold" Visibility="Collapsed"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>


Page2 Code:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
Furniture detail = e.Parameter as Furniture;
StoreDetail();
}
private async void StoreDetail()
{
try
{
Furniture detail = new Furniture();

var httpClient = new HttpClient(new HttpClientHandler());
string urlPath = "http://indonesia-furniture.com/mobileapp/GetPostByCategoryXMLa?term_id=378";

var values = new List<KeyValuePair<string, string>>
{

};

HttpResponseMessage response = await httpClient.PostAsync(urlPath, new FormUrlEncodedContent(values));
response.EnsureSuccessStatusCode();

if (!response.IsSuccessStatusCode)
{
loading.IsActive = false;
RequestException();
}

string jsonText = await response.Content.ReadAsStringAsync();
JsonObject jsonObject = JsonObject.Parse(jsonText);
JsonArray jsonData1 = jsonObject["posts"].GetArray();

foreach (JsonValue groupValue in jsonData1)
{

JsonObject groupObject = groupValue.GetObject();

double menuId = groupObject["post_id"].GetNumber();
string title = groupObject["post_title"].GetString();
string image = groupObject["featured_image"].GetString();

Furniture file = new Furniture();
file.ID = menuId.ToString();
file.Title = title;
file.Gambar = image;

datasource.Add(file);
}

if (jsonData1.Count > 0)
{
itemGridView.ItemsSource = datasource;
}
else
{
loading.IsActive = false;
statusKosong.Visibility = Visibility.Visible;
}
}
catch (HttpRequestException ex)
{
loading.IsActive = false;
RequestException();
}
}
}


Example display Page2:
Page2

Furniture class:

class Furniture
{
public string ID { get; set; }

public string Title { get; set; }

public string Gambar { get; set; }

public string Deskripsi { get; set; }
}


FurnitureHome class:

class FurnitureHome
{
public string ID { get; set; }

public string Name { get; set; }

public string Menu { get; set; }
}


Thus, the user can select items on Page1 to be able to see the detail of the item. For example a user selects "" on Page1, it will display the menus of the item on page2.
How do I retrieve the id of the items on page1 so as to complement the website address for Page2?
Note: item_id used to complete the link on the link to page2 is the "id" on page1 JSON.
Example for completed link page2: http://..../mobileapp/GetPostByCategoryXMLa?term_id=378
378 is the "id" item is selected by the user on Page1

Answer Source

in second page you are expect Furniture but in 1st page you set FurnitureCategory change ItemView_ItemClick in 1st page as below

private void ItemView_ItemClick(object sender, ItemClickEventArgs e)
{
    FurnitureHome item = e.ClickedItem as FurnitureHome;
    Furniture itemDetail = new Furniture();
    DetailId.Text = item.ID;
    itemDetail.ID = DetailId.Text;
    this.Frame.Navigate(typeof(Furniture), itemDetail);
}

in second page

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    Furniture detail = e.Parameter as Furniture;
    StoreDetail(detail.ID);//send id
}
private async void StoreDetail(int id) // method change to accept id 
{
    try
    {
        Furniture detail = new Furniture();

        var httpClient = new HttpClient(new HttpClientHandler());
        //build url with given id
        string urlPath = "http://indonesia-furniture.com/mobileapp/GetPostByCategoryXMLa?term_id="+id;