我正在開發 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>
uj5u.com熱心網友回復：
您可以將資料放入集合中，然后按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>
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/490410.html
標籤：C＃ 网 asp.net-mvc 剃刀 剃刀页面