Blazor C#中如何随机化单词配对列表并保留关联关系

你的核心问题是仅随机WordPair列表无法打破英文/德文卡片的分组显示——即使WordPair顺序变了，页面还是先渲染所有英文卡片，再渲染所有德文卡片，配对关系依然可预测。要彻底打乱卡片顺序同时保留配对关联，需要把每个单词对拆成独立卡片并混排，具体实现如下：

步骤1：创建卡片数据类 #

定义一个CardItem类，用来封装单张卡片的信息，同时标记它所属的配对ID：

private class CardItem
{
    public string Word { get; set; }
    public int PairId { get; set; } // 同一配对的英文/德文卡片共享此ID
}

步骤2：生成并随机排序卡片列表 #

从已有的wordPairs生成包含所有英文、德文卡片的列表，然后随机打乱顺序：

// 假设wordPairs已从数据库加载完成
var cardItems = new List<CardItem>();

// 为每个单词对生成两张卡片，赋予相同的PairId
for (int i = 0; i < wordPairs.Count; i++)
{
    var pair = wordPairs[i];
    cardItems.Add(new CardItem { Word = pair.English, PairId = i });
    cardItems.Add(new CardItem { Word = pair.German, PairId = i });
}

// 随机排序卡片列表（确保只实例化一次Random，避免重复随机）
var random = new Random();
var shuffledCards = cardItems.OrderBy(_ => random.Next()).ToList();

步骤3：修改页面渲染逻辑 #

遍历随机后的卡片列表，不再分两次渲染英文/德文：

<div class="row mt-3">
    @foreach (var card in shuffledCards)
    {
        <div class="col-md-3 col-sm-6 mb-4">
            <div class="card bg-light" @onclick="@(() => MatchWords(card))">
                <div class="card-body text-center">
                    <h5 class="card-title">@card.Word</h5>
                </div>
            </div>
        </div>
    }
</div>

步骤4：更新配对判断逻辑 #

修改MatchWords方法，通过PairId判断两张卡片是否属于同一配对：

private CardItem _selectedCard;

private void MatchWords(CardItem clickedCard)
{
    if (_selectedCard == null)
    {
        _selectedCard = clickedCard;
        // 可选：给选中卡片添加高亮样式
        return;
    }

    if (_selectedCard.PairId == clickedCard.PairId && _selectedCard != clickedCard)
    {
        // 配对成功：执行隐藏卡片、加分等逻辑
        Console.WriteLine("配对成功！");
    }
    else
    {
        // 配对失败：重置选中状态
        Console.WriteLine("配对失败！");
    }
    _selectedCard = null;
}

为什么原方法无效？ #

你之前的代码只是随机了wordPairs的顺序，但页面依然是先遍历所有英文卡片，再遍历所有德文卡片——英文卡片还是集中在前半部分，德文在后半部分，配对关系依然按顺序对应，无法达到随机混淆的效果。

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