在Xamarin的XAML中实现嵌套循环打印分组订单数据

1. 定义数据模型与分组容器 #

先明确订单明细、分组容器的模型类，用于承载和组织数据：

// 订单明细模型
public class OrderItem
{
    public string ProductName { get; set; }
    public int Quantity { get; set; }
    public decimal Price { get; set; }
    // 按需添加其他明细字段
}

// 分组容器（每个实例对应一个OrderNo及下属所有明细）
public class OrderGroup : ObservableCollection<OrderItem>
{
    public string OrderNo { get; set; }
    // 可扩展订单级字段，比如下单时间、客户名称等

    public OrderGroup(string orderNo, IEnumerable<OrderItem> items) : base(items)
    {
        OrderNo = orderNo;
    }
}

2. 处理API返回的JSON数据 #

将API获取的嵌套JSON反序列化后，按OrderNo分组并转换为分组集合：

// 对应API返回的原始订单结构
public class RawOrder
{
    public string OrderNo { get; set; }
    public List<OrderItem> Items { get; set; }
    // 其他订单级字段
}

// 数据转换逻辑
var rawOrders = JsonConvert.DeserializeObject<List<RawOrder>>(apiResponseContent);
var groupedOrders = new ObservableCollection<OrderGroup>();

foreach (var group in rawOrders.GroupBy(o => o.OrderNo))
{
    groupedOrders.Add(new OrderGroup(group.Key, group.SelectMany(o => o.Items)));
}

// 绑定到ListView的数据源
OrderListView.ItemsSource = groupedOrders;

3. XAML端配置分组ListView #

启用分组功能，分别定义分组头和明细项的渲染模板：

<ListView x:Name="OrderListView" 
          IsGroupingEnabled="True"
          GroupDisplayBinding="{Binding OrderNo}"
          HasUnevenRows="True">

    <!-- 分组头模板 -->
    <ListView.GroupHeaderTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout BackgroundColor="#f5f5f5" Padding="12">
                    <Label Text="{Binding OrderNo}" 
                           FontSize="Large" 
                           FontAttributes="Bold"/>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.GroupHeaderTemplate>

    <!-- 明细项模板 -->
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Padding="15,6" Orientation="Horizontal">
                    <Label Text="{Binding ProductName}" 
                           FontSize="Medium" 
                           WidthRequest="200"/>
                    <Label Text="x{Binding Quantity}" 
                           HorizontalOptions="Center"/>
                    <Label Text="{Binding Price, StringFormat='${0:F2}'}" 
                           HorizontalOptions="EndAndExpand"/>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

和ASP.NET MVC实现的对应关系 #

你在ASP.NET MVC中可能用嵌套foreach实现类似效果：

@foreach(var orderGroup in Model.GroupBy(o => o.OrderNo))
{
    <h3>@orderGroup.Key</h3>
    <table>
        @foreach(var item in orderGroup.SelectMany(o => o.Items))
        {
            <tr>
                <td>@item.ProductName</td>
                <td>@item.Quantity</td>
                <td>@item.Price</td>
            </tr>
        }
    </table>
}

Xamarin的实现逻辑完全匹配：后台完成数据分组（对应MVC的GroupBy），前台通过模板分别渲染分组头（对应MVC的<h3>）和明细项（对应MVC的表格行），只是用XAML模板语法替代了Razor循环语法。

内容的提问来源于stack exchange，提问作者Kemal