如何在Blazor c#中随机化列表

Question

我正在从数据库中提取一个列表，一个单词是德语一个是英语我试图在页面上随机显示这些然后作为Blazor应用程序的一部分

我可以从数据库中提取单词并使用下面的代码将它们添加到列表中:

while (reader.Read())
{
var english = reader.GetString(0);
var german = reader.GetString(1);
var pair = new WordPair(english, german);
wordPairs.Add(pair);
}

我像这样创建WordPair列表:

private class WordPair
{
public string English { get; set; }
public string German { get; set; }
public WordPair(string english, string german)
{
English = english;
German = german;
}
}

这很好，但是，由于这段代码，单词按顺序显示:

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

它将每个英语单词写在卡片上，然后是德语单词，这使得它非常容易预测哪个单词匹配。我希望随机化它们的排列顺序，但它也必须记住哪些单词是成对的。

如何解决这个问题?

我试过这个代码，但它不工作:

Random random = new Random();
wordPairs = wordPairs.OrderBy(x => random.Next()).ToList();

Answer 1

我认为你打算让英语和德语的词序独立随机化。您可以通过对变换代码进行少量修改来实现这一点:

var english = wordPairs.Select(w => w.English).OrderBy(x => random.Next()).ToList();
var german = wordPairs.Select(w => w.German).OrderBy(x => random.Next()).ToList();

然后你将使用这些新列表来呈现你的输出，例如

@foreach (var eng in english)

和

@foreach (var ger in german)