如何根据 xamarin 中的类别将类别页面绑定到类别列表
How can I bind categories page to categories list depending on the category in xamarin
我有 2 个 json 文件,1 个包含类别,1 个包含产品。我如何绑定数据,以便当我点击例如时尚时,它只显示该类别中的产品。 json 不是本地的,我有 2 个 类,我不能碰它们,因为按原样使用它们是我要求的一部分。
这些是我的类
public class Category
{
public string Name { get; set; }
public string Parent{ get; set; }
}
public class Product
{
public string Id { get; set; }
public string Name { get; set; }
public string Brand { get; set; }
public List<string> Category { get; set; }
public double Price { get; set; }
public string Picture { get; set; }
public string Description { get; set; }
}
}
类别JSON
[
{
"Name": "Beauty",
"Parent": "All categories"
},
{
"Name": "Clothing, Shoes & Accessories",
"Parent": "All categories"
},
{
"Name": "Home",
"Parent": "All categories"
},
{
"Name": "Makeup",
"Parent": "Beauty"
},
{
"Name": "Accessories",
"Parent": "Clothing, Shoes & Accessories"
},
{
"Name": "Bath",
"Parent": "Home"
},
{
"Name": "Furniture",
"Parent": "Home"
},
{
"Name": "Home Decor",
"Parent": "Home"
},
{
"Name": "Home Textiles",
"Parent": "Home"
}
]
产品JSON
[
{
"Id": "000e3c3514c8e80bc12c7cde4f4a341c",
"Name": "Animal Shape Storage Stool",
"Brand": "Carl Artbay Stools",
"Category": ["Furniture"],
"Price": 276.76,
"Picture": "https://images-na.ssl-images-amazon.com/images/I/41%2BE9X7AFUL._.jpg",
"Description": "This Storage Ottoman Is Finely Crafted With Superior Faux Leather & Quality Mdf, The After-set-up Construction Is Sturdy & Solid, Decorative Appearance Matches Your Interior Decor & Furniture. It Can Be Used As: Storage Chest/Trunk Sundries Finally Has Somewhere To Go, No Matter Blankets, Cushions, Clothes, Or Remotes, Books... An Easy Solution To Organize Your Working And Living environment. It Is Sturdy As A Bench To Be Placed At The Entrance Or closet. You May Sit On It To Put On Or Take Off Your shoes. Tired After Whole days' Work? Here Comes A Nice Place To Rest Your Feet On While Sitting On couch. Puppies May Use It To Step Onto Your Bed Or Watch Out Of The window. With Ottoman Tray, It Becomes An Ottoman Coffee Table To Place Drinks Or foods. We Have A Variety Of Folding Storage Ottomans In Size And Color, Simply Search Storage Ottoman To Find more. Specifications: - Upholstery Material: Faux Leather/Pluch/Wood - Seater Filling Material: High Resilence Sponge - Product Size: - Product Weight: 6kg. Package Contents: - 1 X Folding Storage Ottoman."
},
{
"Id": "2e41a5597d493e63b5cfb43071008f75",
"Name": "Coffee Stool with Backrest",
"Brand": "Amadon",
"Category": ["Furniture"],
"Price": 156.71,
"Picture": "https://images-na.ssl-images-amazon.com/images/I/31sciL4h0gL._.jpg",
"Description": "Your support is our greatest motivation, welcome to buy! Product Name: Bar Chair. Color: light gray, dark black, orange. Product category: Dining chair Applicable occasions: hotel, bar, restaurant, living room. Applicable age: adult. Material: Fabric Iron. Internal filler: high elastic foam sponge. Style: European. Frame: metal skeleton. According to the ergonomic design, the L-shape fits the back curve and relieves fatigue to the lumbar support. Note: Due to differences between the different displays, the image may not reflect the actual color of the project. If you have any questions or problems, please feel free to contact us by email and we will get back to you within 24 hours."
}, ........
我如何提取它们
protected override void OnStart()
{
string s = "[]";
WebRequest request = WebRequest.Create(
"https://personalpages.manchester.ac.uk/staff/grigory.pishchulov/Categories.json");
WebResponse response = request.GetResponse();
using (Stream stream = response.GetResponseStream())
using (StreamReader reader = new StreamReader(stream))
{
s = reader.ReadToEnd();
}
categories = JsonConvert.DeserializeObject<Category[]>(s);
string s1 = "[]";
WebRequest request1 = WebRequest.Create(
"https://personalpages.manchester.ac.uk/staff/grigory.pishchulov/Products.json");
WebResponse response1 = request1.GetResponse();
using (Stream stream1 = response1.GetResponseStream())
using (StreamReader reader1 = new StreamReader(stream1))
{
s1 = reader1.ReadToEnd();
}
products = JsonConvert.DeserializeObject<Product[]>(s1);
}
分类页面布局
<?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="coursework.ShoppingPage" Title="All categories">
<ContentPage.Content>
<StackLayout>
<ListView x:Name="ListView2" RowHeight="100" VerticalOptions="CenterAndExpand" ItemTapped="ListView2_ItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Name}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
产品页面布局
<?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="coursework.Products" Title="Products">
<ContentPage.Content>
<StackLayout>
<ListView x:Name="ListView3" ItemSelected="ListView3_ItemSelected" RowHeight="100" VerticalOptions="CenterAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="80" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Source="{Binding Picture}" VerticalOptions="Fill" HorizontalOptions="Center" Grid.Row="1" />
<Label Text="{Binding Name}" Grid.Column="1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Grid.Row="1"/>
<Label Text="{Binding Price}" Grid.Column="2" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" Grid.Row="1" FontAttributes="Bold" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
我从 cs 页面中的 类 获取数据
ListView.ItemsSource = App.categories/products;
我假设您已经将 selected 类别传递到产品页面
如果是这样,您可以使用 LINQ select 仅匹配产品
// cat is a string containing the selected category
ListView.ItemsSource = App.products.Where(p => p.Categories.Contains(cat)).ToList();
我有 2 个 json 文件,1 个包含类别,1 个包含产品。我如何绑定数据,以便当我点击例如时尚时,它只显示该类别中的产品。 json 不是本地的,我有 2 个 类,我不能碰它们,因为按原样使用它们是我要求的一部分。
这些是我的类
public class Category
{
public string Name { get; set; }
public string Parent{ get; set; }
}
public class Product
{
public string Id { get; set; }
public string Name { get; set; }
public string Brand { get; set; }
public List<string> Category { get; set; }
public double Price { get; set; }
public string Picture { get; set; }
public string Description { get; set; }
}
}
类别JSON
[
{
"Name": "Beauty",
"Parent": "All categories"
},
{
"Name": "Clothing, Shoes & Accessories",
"Parent": "All categories"
},
{
"Name": "Home",
"Parent": "All categories"
},
{
"Name": "Makeup",
"Parent": "Beauty"
},
{
"Name": "Accessories",
"Parent": "Clothing, Shoes & Accessories"
},
{
"Name": "Bath",
"Parent": "Home"
},
{
"Name": "Furniture",
"Parent": "Home"
},
{
"Name": "Home Decor",
"Parent": "Home"
},
{
"Name": "Home Textiles",
"Parent": "Home"
}
]
产品JSON
[
{
"Id": "000e3c3514c8e80bc12c7cde4f4a341c",
"Name": "Animal Shape Storage Stool",
"Brand": "Carl Artbay Stools",
"Category": ["Furniture"],
"Price": 276.76,
"Picture": "https://images-na.ssl-images-amazon.com/images/I/41%2BE9X7AFUL._.jpg",
"Description": "This Storage Ottoman Is Finely Crafted With Superior Faux Leather & Quality Mdf, The After-set-up Construction Is Sturdy & Solid, Decorative Appearance Matches Your Interior Decor & Furniture. It Can Be Used As: Storage Chest/Trunk Sundries Finally Has Somewhere To Go, No Matter Blankets, Cushions, Clothes, Or Remotes, Books... An Easy Solution To Organize Your Working And Living environment. It Is Sturdy As A Bench To Be Placed At The Entrance Or closet. You May Sit On It To Put On Or Take Off Your shoes. Tired After Whole days' Work? Here Comes A Nice Place To Rest Your Feet On While Sitting On couch. Puppies May Use It To Step Onto Your Bed Or Watch Out Of The window. With Ottoman Tray, It Becomes An Ottoman Coffee Table To Place Drinks Or foods. We Have A Variety Of Folding Storage Ottomans In Size And Color, Simply Search Storage Ottoman To Find more. Specifications: - Upholstery Material: Faux Leather/Pluch/Wood - Seater Filling Material: High Resilence Sponge - Product Size: - Product Weight: 6kg. Package Contents: - 1 X Folding Storage Ottoman."
},
{
"Id": "2e41a5597d493e63b5cfb43071008f75",
"Name": "Coffee Stool with Backrest",
"Brand": "Amadon",
"Category": ["Furniture"],
"Price": 156.71,
"Picture": "https://images-na.ssl-images-amazon.com/images/I/31sciL4h0gL._.jpg",
"Description": "Your support is our greatest motivation, welcome to buy! Product Name: Bar Chair. Color: light gray, dark black, orange. Product category: Dining chair Applicable occasions: hotel, bar, restaurant, living room. Applicable age: adult. Material: Fabric Iron. Internal filler: high elastic foam sponge. Style: European. Frame: metal skeleton. According to the ergonomic design, the L-shape fits the back curve and relieves fatigue to the lumbar support. Note: Due to differences between the different displays, the image may not reflect the actual color of the project. If you have any questions or problems, please feel free to contact us by email and we will get back to you within 24 hours."
}, ........
我如何提取它们
protected override void OnStart()
{
string s = "[]";
WebRequest request = WebRequest.Create(
"https://personalpages.manchester.ac.uk/staff/grigory.pishchulov/Categories.json");
WebResponse response = request.GetResponse();
using (Stream stream = response.GetResponseStream())
using (StreamReader reader = new StreamReader(stream))
{
s = reader.ReadToEnd();
}
categories = JsonConvert.DeserializeObject<Category[]>(s);
string s1 = "[]";
WebRequest request1 = WebRequest.Create(
"https://personalpages.manchester.ac.uk/staff/grigory.pishchulov/Products.json");
WebResponse response1 = request1.GetResponse();
using (Stream stream1 = response1.GetResponseStream())
using (StreamReader reader1 = new StreamReader(stream1))
{
s1 = reader1.ReadToEnd();
}
products = JsonConvert.DeserializeObject<Product[]>(s1);
}
分类页面布局
<?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="coursework.ShoppingPage" Title="All categories">
<ContentPage.Content>
<StackLayout>
<ListView x:Name="ListView2" RowHeight="100" VerticalOptions="CenterAndExpand" ItemTapped="ListView2_ItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Name}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
产品页面布局
<?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="coursework.Products" Title="Products">
<ContentPage.Content>
<StackLayout>
<ListView x:Name="ListView3" ItemSelected="ListView3_ItemSelected" RowHeight="100" VerticalOptions="CenterAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="80" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Source="{Binding Picture}" VerticalOptions="Fill" HorizontalOptions="Center" Grid.Row="1" />
<Label Text="{Binding Name}" Grid.Column="1" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Grid.Row="1"/>
<Label Text="{Binding Price}" Grid.Column="2" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" Grid.Row="1" FontAttributes="Bold" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
我从 cs 页面中的 类 获取数据
ListView.ItemsSource = App.categories/products;
我假设您已经将 selected 类别传递到产品页面
如果是这样,您可以使用 LINQ select 仅匹配产品
// cat is a string containing the selected category
ListView.ItemsSource = App.products.Where(p => p.Categories.Contains(cat)).ToList();