Best way to render elements inside in div in random order in Razor pages-CodePudding

I'm working on ASP.NET MVC app. On one of the views (created by using Razor pages) I have a list of elements and I have to make them appear in random order on every request. So, for example on one request Google Chrome needs to be first, on next it should be Opera and so on. My question is, what is the best, most clean way to do it?

My code:

<div id="icons" style="flex-direction: row;  display: flex; align-items: center; justify-content: space-around; margin-top: 3em; margin-right: 9em; margin-bottom: 3em; margin-left: 9em">
            <div>
                <img src="../../app/assets/images/svg/chrome.svg" alt="Chrome" width="100" height="100">
                <p style="text-align: center;">Google Chrome</p>
            </div>
            <div>
                <img src="../../app/assets/images/svg/firefox.svg" alt="Firefox" width="100" height="100">
                <p style="text-align: center;">Mozilla Firefox</p>
            </div>
            <div>
                <img src="../../app/assets/images/svg/edge.svg" alt="Edge" width="100" height="100">
                <p style="text-align: center;">Microsoft Edge</p>
            </div>
            <div>
                <img src="../../app/assets/images/svg/opera.svg" alt="Opera" width="100" height="100">
                <p style="text-align: center;">Opera</p>
            </div>
            </div>

Just in case, entire file:

@using EPiServer.Core
@using EPiServer.Web.Mvc.Html
@model UnsupportedBrowserViewModel

@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        @Model.Title
    </title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="http://fonts.cdnfonts.com/css/avenir" rel="stylesheet">
</head>
<body>
    <div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: Avenir, Helvetica, 'Helvetica Neue', sans-serif">
        <img src="@Model.BrandLogo" alt="Logo of the brand" width="" height="" style="display: flex; align-items: center; justify-content: center; margin-left: auto; margin-right: auto;">
        <h1 style="font-weight: bold; font-size: 45px; ">
            @Model.Headline
        </h1>
        <div style="color: rgb(99, 102, 106); font-size: 22px;">
            @Model.TextBlock
        </div>
        <div id="icons" style="flex-direction: row;  display: flex; align-items: center; justify-content: space-around; margin-top: 3em; margin-right: 9em; margin-bottom: 3em; margin-left: 9em">
            <div>
                <img src="../../app/assets/images/svg/chrome.svg" alt="Chrome" width="100" height="100">
                <p style="text-align: center;">Google Chrome</p>
            </div>
            <div>
                <img src="../../app/assets/images/svg/firefox.svg" alt="Firefox" width="100" height="100">
                <p style="text-align: center;">Mozilla Firefox</p>
            </div>
            <div>
                <img src="../../app/assets/images/svg/edge.svg" alt="Edge" width="100" height="100">
                <p style="text-align: center;">Microsoft Edge</p>
            </div>
            <div>
                <img src="../../app/assets/images/svg/opera.svg" alt="Opera" width="100" height="100">
                <p style="text-align: center;">Opera</p>
            </div>
            </div>
        </div>
</body>
</html>

CodePudding user response：

You can put the data into a collection and then order by Guid.NewGuid()

@{
    var d = new Dictionary<string, string>
    {
        {"Chrome", "chrome.svg"},
        {"Mozilla Firefox", "firefox.svg"},
        {"Microsoft Edge", "edge.svg"},
        {"Opera", "opera.svg"}
    };
}



@foreach (var item in d.OrderBy(x => Guid.NewGuid()))
{
    <div>
        <img src="../../app/assets/images/svg/@item.Value" alt="@item.Key" width="100" height="100">
        <p style="text-align: center;">@item.Key</p>
    </div>
}