I have the following view which displays the top 10 players ordered by their ranking.
@model IEnumerable<WebApplication3.Models.LiveRankingModel>
@{
ViewData["Title"] = "LiveRanking";
}
<div style="text-align:center;">
<h1><strong>Live Ranking</strong></h1>
</div>
<div style="display:flex; justify-content:space-around;">
@foreach (var item in Model)
{
<div style="text-align: center; padding: 25px; border: 2px solid black; background-color: azure; border-radius: 25px; margin: 25px;">
<div style="border:inherit;">
<img src="data:image/jpg;base64,@System.Convert.ToBase64String(item.Image)" height="256" width="256" />
</div>
<hr />
<h2>@item.Username</h2>
<h3>@item.Score</h3>
</div>
}
</div>
Sorry for not listing my classes in an external .css file but, can I make it so that the clients don't have to reload the page to see the new results so I can also add a good looking transition effect when the players progress through the ranking?
You've got two options
Or you can use Javascript setInterval + fetch (or jquery ajax)
//this calls your api every 5 seconds
//and retrieves your data to be rendered on the page
setInterval(function(){
fetch('api/your-endpoint')
.then(function(response) {
//your api should return an array of json object
//here you iterate through the response object
//create a new elemenet for each item
//and append to an element already on the page
//eg, create a an empty list on the page
//and in here create li elements and append to it
})
.catch(function(err) {
console.log(err);
});
}, 5000);
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加