How to randomise a list in Blazor C#

Question

I'm pulling a list from a database, one word is in German and one is in English I'm trying to display these randomly on a page and then as part of the Blazor app

I can pull the words from the database and add them to a list using this code:

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

I create the WordPair list like this:

private class WordPair
{
    public string English { get; set; }
    public string German { get; set; }

    public WordPair(string english, string german)
    {
        English = english;
        German = german;
    }
}

This woks perfectly however, the words are displayed in order because of this code:

<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>

It writes each of the English words into cards and then the German making it very predictable which word matches. I'm hoping to randomize the order in which they are placed but it must also remember which words pair together.

How to resolve this?

I have tried this code but it doesn't work:

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

Your code works for me to randomize the list order. Do you mean that you want the English and German words to be independently randomized? — Eric J., Apr 07 '23 at 18:56
So, you have word pairs (like ("apple", "Apfel")) and you want two groupings, one of random English words and of German words. Create two groupings of the pairings, shuffled independently. In one grouping, display the English word, in the other, the German word. Now you have independent ordering, but with the association that you want to retain — Flydog57, Apr 07 '23 at 20:02
Does this answer your question? [Randomize a List](https://stackoverflow.com/questions/273313/randomize-a-listt) — Nyan, Apr 11 '23 at 05:13

score 1 · Answer 1 · answered Apr 07 '23 at 19:00

I think you intend for the English and German word orders to be independently randomized. You can accomplish that with a small modification to your shuffling code:

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

Then you would use those new lists to render your output, e.g.

@foreach (var eng in english)

and

@foreach (var ger in german)

How to randomise a list in Blazor C#

1 Answers1