在 Razor 页面中以随机顺序呈现 div 内部元素的最佳方法

我正在开发 ASP.NET MVC 应用程序。在其中一个视图(使用 Razor 页面创建)上,我有一个元素列表,我必须让它们在每个请求中以随机顺序出现。因此,例如,在一个请求中,Google Chrome 需要排在第一位,接下来应该是 Opera,依此类推。我的问题是,最好、最干净的方法是什么?

我的代码:

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

以防万一,整个文件:

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


迈克·布林德

您可以将数据放入集合中,然后按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>
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章