如何在Razor页面中按ItemKey分组展示Item数据

我有一个存储键值对的Item表，JSON返回键值对数据，Key分为'Item Name'、'Location'、'Date'三种类型。模型定义如下：

public class Item
{
    public Guid Id { get; set; }
    public string ItemKey { get; set; }
    public string Key { get; set; } // Key can be of three types `'Item Name', 'Location', 'Date'`
    public string Value { get; set; }       
}

现有JSON数据如下：

[
  {"id":"1","itemKey":"item1","key":"ItemName","value":"Apple"},
  {"id":"2","itemKey":"item2","key":"ItemName","value":"Orange"}, 
  {"id":"3","itemKey":"item1","key":"Location","value":"USA"},
  {"id":"4","itemKey":"item2","key":"Location","value":"Angola"},  
  {"id":"5","itemKey":"item2","key":"Date","value":"03.11.2022"}, 
  {"id":"6","itemKey":"item3","key":"ItemName","value":"Banana"},
  {"id":"7","itemKey":"item3","key":"Date","value":"24.10.2022"}
]

需要在Razor页面中按ItemKey分组，将每个ItemKey的所有信息展示在一行，对应表头：

<thead>
    <tr>
    <th>ItemKey</th>     
    <th>ItemName</th>
    <th>Location</th>
    <th>Date</th>    
    </tr>
</thead>

例如item1的展示效果为：itemKey - item1, itemName - Apple, Location -USA (date is not available for item1)

当前已实现从JSON获取Item列表的代码如下：
ItemService.cs：

public async Task<List<FecMetaDatum>> GetItems()
{
    return await _httpClient.GetFromJsonAsync<List<Item>>("api/Item");
}

Index.razor：

@foreach (var r in items)
{         
    <tr>
        <td>@r.id</td>     
        <td>@r.itemKey</td>
        <td>@r.key</td>
        <td>@r.value</td>    
    </tr>
}
   
protected override async Task OnInitializedAsync()
{
    items= await ItemService.GetItems();
}

请问如何修改代码实现按ItemKey分组展示的需求？

1. 修正ItemService的返回类型错误 #

ItemService中返回类型List<FecMetaDatum>与实际返回的List<Item>不匹配，先修正：

public async Task<List<Item>> GetItems()
{
    return await _httpClient.GetFromJsonAsync<List<Item>>("api/Item");
}

2. 在Razor页面中处理数据分组 #

在Index.razor中，定义一个用于分组展示的模型类，并在初始化时将原始数据按ItemKey分组，填充对应字段：

@page "/"
@inject ItemService ItemService

<table>
    <thead>
        <tr>
            <th>ItemKey</th>     
            <th>ItemName</th>
            <th>Location</th>
            <th>Date</th>    
        </tr>
    </thead>
    <tbody>
        @foreach (var groupedItem in groupedItems)
        {         
            <tr>
                <td>@groupedItem.ItemKey</td>     
                <td>@groupedItem.ItemName</td>
                <td>@groupedItem.Location</td>
                <td>@groupedItem.Date</td>    
            </tr>
        }
    </tbody>
</table>

@code {
    private List<ItemGrouped> groupedItems;

    // 定义分组展示用的模型
    private class ItemGrouped
    {
        public string ItemKey { get; set; }
        public string ItemName { get; set; } = "Not available";
        public string Location { get; set; } = "Not available";
        public string Date { get; set; } = "Not available";
    }

    protected override async Task OnInitializedAsync()
    {
        var items = await ItemService.GetItems();
        
        // 按ItemKey分组，并填充每个分组的字段值
        groupedItems = items
            .GroupBy(item => item.ItemKey)
            .Select(group => new ItemGrouped
            {
                ItemKey = group.Key,
                // 匹配对应Key的值，不存在则使用默认的"Not available"
                ItemName = group.FirstOrDefault(i => string.Equals(i.Key, "ItemName", StringComparison.OrdinalIgnoreCase))?.Value ?? "Not available",
                Location = group.FirstOrDefault(i => string.Equals(i.Key, "Location", StringComparison.OrdinalIgnoreCase))?.Value ?? "Not available",
                Date = group.FirstOrDefault(i => string.Equals(i.Key, "Date", StringComparison.OrdinalIgnoreCase))?.Value ?? "Not available"
            })
            .ToList();
    }
}

说明 #

• 使用GroupBy按ItemKey对原始数据分组，每个分组对应一行表格数据
• 通过FirstOrDefault查找分组内对应Key的Value，若不存在则显示"Not available"，符合示例中缺失字段的展示需求
• 表格渲染部分直接遍历分组后的集合，每行展示一个ItemKey的完整信息

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