Razor Pages中每次请求随机渲染div内元素的最佳实现方案

直接在Razor视图内通过服务端代码完成集合乱序后循环渲染即可，无需前端JS参与，每次请求服务端都会生成新的随机顺序，是当前场景下最简洁规范的实现方式，且不需要修改现有控制器、ViewModel层代码。

具体修改步骤 #

1. 补充视图内的数据定义与乱序逻辑 #

修改页面顶部的Razor代码块，将硬编码的浏览器信息整理为集合，在每次请求时对集合做随机排序：

@{
    Layout = null;
    // 浏览器图标配置集合，请求时自动随机排序
    var supportedBrowsers = new[]
    {
        new { Icon = "../../app/assets/images/svg/chrome.svg", Alt = "Chrome", Name = "Google Chrome" },
        new { Icon = "../../app/assets/images/svg/firefox.svg", Alt = "Firefox", Name = "Mozilla Firefox" },
        new { Icon = "../../app/assets/images/svg/edge.svg", Alt = "Edge", Name = "Microsoft Edge" },
        new { Icon = "../../app/assets/images/svg/opera.svg", Alt = "Opera", Name = "Opera" }
    }.OrderBy(_ => Guid.NewGuid()).ToList();
}

2. 替换原硬编码的图标区块 #

将原来写死4个浏览器项的图标容器代码，替换为遍历乱序后集合的循环渲染逻辑，原有容器样式完全保留无需调整：

<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">
    @foreach (var browser in supportedBrowsers)
    {
        <div>
            <img src="@browser.Icon" alt="@browser.Alt" width="100" height="100">
            <p style="text-align: center;">@browser.Name</p>
        </div>
    }
</div>

方案说明 #

• 排序逻辑在服务端执行，页面返回给客户端时已经是随机完成的结构，不会出现前端加载时的顺序闪烁问题，性能开销可以忽略
• 代码维护成本低，后续新增、删除支持的浏览器项时，只需要修改集合配置即可，无需重复编写冗余的HTML结构
• OrderBy(_ => Guid.NewGuid())是.NET平台轻量级集合乱序的通用写法，足够满足当前业务场景的随机展示需求，无需引入额外的复杂随机算法
• 完全兼容现有EPiServer的视图结构，不会影响页面原有其他内容的渲染逻辑

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