How to properly make a ranking/leaderboard page in ASP.NET Core MVC

Question

I'm trying to find a more detailed way to display rank for my movie website. This is my Movie.cs model

public int MovieId { get; set; }
public string MovieTitle { get; set; }
public int ViewCounter { get; set; }

I have ViewCounter which I use to count how many people visited to watch that specific Movie. This is my Controller:

 public IActionResult Ranking()
        {
            var item = from m in databaseContext.Movies.Include("Genre").Include("Director")
                       where m.IsHidden == false
                       orderby m.ViewCounter descending
                       select m;
            return View(item.ToList());
        }

This is the View for that Controller:

@model IEnumerable<WebXemPhim.Models.Domain.Movie>

<div class="blog-list-area section pt-100 pt-lg-80 pt-md-70 pt-sm-60 pt-xs-50 pb-xs-50">
    <div class="container">
        <div class="row row-25">
            <div class="col-lg-8">
                <div class="row">

                    @foreach (var item in Model)
                    {
        <div class="col-12">
            <!--Single Blog Post Start-->
            <div class="single-blog-post blog-list mb-30">
                <div class="blog-img">
                    <a href="single-blog.html"><img src="~/images/@item.MovieImageName" alt=""></a>
                </div>
                <div class="blog-content">
                    <h3><a href="single-blog.html">@item.MovieTitle</a></h3>
                    <p>@item.MoviePlot</p>
                    <div class="blog-bottom">
                        <ul class="meta meta-border-bottom">
                            <li><a>@item.ViewCounter</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--Single Blog Post End-->
        </div>}
                </div>
            </div>
        </div>
    </div>
</div>
<!--Blog Area End-->

So far it's good, but now it's missing the RANK NUMBER ( like 1,2,3,4)(the movie with the highest views will be 1) and I just don't how to actually add an extra column with LINQ. Any suggestions? Or should I just make a new column that store RANK for each movie instead?

score 0 · Answer 1 · answered Jul 14 '20 at 15:03

0

Given you want to display an order of a property you already have then just do

@foreach (var item in Model.OrderByDescending(m => m.ViewCounter))

answered Jul 14 '20 at 15:03

thank you but I've already done this. What I'm missing in my page is to display the number that shows the rank of my items. for example for a top 10, number one will be the highest, number 10 will be the lowest. – Nguyen Dang Khoa Jul 14 '20 at 15:55

score 0 · Answer 2 · answered Jul 14 '20 at 15:11

The term you're looking for is called Ordinal Numbers. To add the ordinal number ranking for each movie, you'll probably want to dynamically create a tuple or something similar in your controller and have that display in your view. As for actually creating the ordinal numbers, there's some examples here -> Is there an easy way to create ordinals in C#?

score 0 · Answer 3 · answered Jul 15 '20 at 08:12

So far it's good, but now it's missing the RANK NUMBER ( like 1,2,3,4)(the movie with the highest views will be 1) and I just don't how to actually add an extra column with LINQ. Any suggestions? Or should I just make a new column that store RANK for each movie instead?

From your description, it seems that you want to display the Rank Number based on the ViewCounter, right?

To display the RankNumber base on the ViewCounter, first, you could create a MovieViewModel view model with the Ranking property, this view model only used to display the Movie model.

public class MovieViewModel
{
    public int MovieId { get; set; }
    public string MovieTitle { get; set; }
    public int ViewCounter { get; set; }
    public string Ranking { get; set; }
}

In the Linq Statement, after ordering the data, you could get the order index, and then according the value to set the RankNumber:

    public IActionResult Ranking()
    {
        //get the movie list
        List<Movie> movies = _InitData.GetMovie();

        var result = movies.OrderByDescending(c => c.ViewCounter)
            .Select((c, index) => new MovieViewModel
            {
                MovieId = c.MovieId,
                MovieTitle = c.MovieTitle,
                ViewCounter = c.ViewCounter,
                Ranking = index < 5 ? "1" : index < 10 ? "2" : index < 15 ? "3" : "4" //based on the index to set ranking
            }); 
        return View(result);
    }

After rendering, the output like this:

score 0 · Answer 4 · answered Jul 15 '20 at 08:19

0

You can either add it as a column in the DB (which I think is way less dynamic) or you can dynamically add a column in the view, with a for loop.

answered Jul 15 '20 at 08:19

SwagiWagi

411
5
17

How to properly make a ranking/leaderboard page in ASP.NET Core MVC

4 Answers4