ASP.NET Core 2.2 - Sorting Entities


Ken Haggerty
Created 08/25/2019 - Updated 08/25/2019 16:11

This article will describe how to sort a list of entities. I will assume you have created a new ASP.NET Core 2.2 Razor Pages project. I won't use Identity or Individual User Accounts.

The research project I used for the articles about table functions is published to tables.kenhaggerty.com. I created a topic, ASP.NET Core 2.2 - Table Functions Project for discussions. Access to the source code may be purchased at Manage > Assets.

I will try to add value to many great articles about sorting by using ascending and descending sorts on multiple columns.

Edit Index.cshtml.cs, add the sorting properties and queries:
private readonly FoodDbContext _context;

public IndexModel(FoodDbContext context)
{
    _context = context;
}

public int Count { get; set; }

public IList<Food> Foods { get; set; } = new List<Food>();

[Display(Name = "Selected Sort")]
public string SelectedSort { get; set; }

public void OnGet(string selectedSort = "NameAsc")
{
    var foodQuery = _context.Foods.AsQueryable();

    SelectedSort = selectedSort;

    switch (SelectedSort)
    {
        case "NameAsc":
            foodQuery = foodQuery.OrderBy(f => f.Name).AsQueryable();
            break;
        case "NameDesc":
            foodQuery = foodQuery.OrderByDescending(f => f.Name).AsQueryable();
            break;
        case "FoodTypeAsc":
            foodQuery = foodQuery.OrderBy(f => f.FoodType).AsQueryable();
            break;
        case "FoodTypeDesc":
            foodQuery = foodQuery.OrderByDescending(f => f.FoodType).AsQueryable();
            break;
        case "ColdStoreAsc":
            foodQuery = foodQuery.OrderBy(f => f.ColdStore).AsQueryable();
            break;
        case "ColdStoreDesc":
            foodQuery = foodQuery.OrderByDescending(f => f.ColdStore).AsQueryable();
            break;
        case "DateAsc":
            foodQuery = foodQuery.OrderBy(f => f.Date).AsQueryable();
            break;
        case "DateDesc":
            foodQuery = foodQuery.OrderByDescending(f => f.Date).AsQueryable();
            break;
        default:
            break;
    }

    Foods = foodQuery.ToList();

    Count = Foods.Count();

}
Edit Index.cshtml, add the sort links:
<thead>
    <tr>
        <th class="d-none d-lg-table-cell pb-2">
            @@Html.DisplayNameFor(model => model.Foods[0].Id)
        </th>
        <th>
            @@Html.DisplayNameFor(model => model.Foods[0].Name)
            <div class="btn-group">
                @@{ if (Model.SelectedSort == "NameAsc")
                    {
                        <a class="btn btn-primary btn-sm disabled">
                            ▼
                        </a>
                    }
                    else
                    {
                        <a asp-route-currentPage="1"
                           asp-route-selectedSort="NameAsc"
                           class="btn btn-light btn-sm">
                            ▼
                        </a>
                    }
                }
                @@{ if (Model.SelectedSort == "NameDesc")
                    {
                        <a class="btn btn-primary btn-sm disabled">
                            ▲
                        </a>
                    }
                    else
                    {
                        <a asp-route-currentPage="1"
                           asp-route-selectedSort="NameDesc"
                           class="btn btn-light btn-sm">
                            ▲
                        </a>
                    }
                }
            </div>
        </th>
        <th>
            @@Html.DisplayNameFor(model => model.Foods[0].FoodType)
            <div class="btn-group">
                @@{ if (Model.SelectedSort == "FoodTypeAsc")
                    {
                        <a class="btn btn-primary btn-sm disabled">
                            ▼
                        </a>
                    }
                    else
                    {
                        <a asp-route-currentPage="1"
                           asp-route-selectedSort="FoodTypeAsc"
                           class="btn btn-light btn-sm">
                            ▼
                        </a>
                    }
                }
                @@{ if (Model.SelectedSort == "FoodTypeDesc")
                    {
                        <a class="btn btn-primary btn-sm disabled">
                            ▲
                        </a>
                    }
                    else
                    {
                        <a asp-route-currentPage="1"
                           asp-route-selectedSort="FoodTypeDesc"
                           class="btn btn-light btn-sm">
                            ▲
                        </a>
                    }
                }
            </div>
        </th>
        <th class="d-none d-md-table-cell text-center">
            @@Html.DisplayNameFor(model => model.Foods[0].ColdStore)
            <div class="btn-group">
                @@{ if (Model.SelectedSort == "ColdStoreAsc")
                    {
                        <a class="btn btn-primary btn-sm disabled">
                            ▼
                        </a>
                    }
                    else
                    {
                        <a asp-route-currentPage="1"
                           asp-route-selectedSort="ColdStoreAsc"
                           class="btn btn-light btn-sm">
                            ▼
                        </a>
                    }
                }
                @@{ if (Model.SelectedSort == "ColdStoreDesc")
                    {
                        <a class="btn btn-primary btn-sm disabled">
                            ▲
                        </a>
                    }
                    else
                    {
                        <a asp-route-currentPage="1"
                           asp-route-selectedSort="ColdStoreDesc"
                           class="btn btn-light btn-sm">
                            ▲
                        </a>
                    }
                }
            </div>
        </th>
        <th class="d-none d-lg-table-cell">
            @@Html.DisplayNameFor(model => model.Foods[0].Date)
            <div class="btn-group">
                @@{ if (Model.SelectedSort == "DateAsc")
                    {
                        <a class="btn btn-primary btn-sm disabled">
                            ▼
                        </a>
                    }
                    else
                    {
                        <a asp-route-currentPage="1"
                           asp-route-selectedSort="DateAsc"
                           class="btn btn-light btn-sm">
                            ▼
                        </a>
                    }
                }
                @@{ if (Model.SelectedSort == "DateDesc")
                    {
                        <a class="btn btn-primary btn-sm disabled">
                            ▲
                        </a>
                    }
                    else
                    {
                        <a asp-route-currentPage="1"
                           asp-route-selectedSort="DateDesc"
                           class="btn btn-light btn-sm">
                            ▲
                        </a>
                    }
                }
            </div>
        </th>
        <th class="pb-2">
            Actions
        </th>
    </tr>
</thead>

Build, run and test.

Sorted Table

Article Tags:

EF Core Table Functions

Comment Count = 0

Please log in to comment or follow.

Login Register
Follow to get web notifications when new comments are posted to this article.
Logged in users receive web notifications for new articles, topics and assets.
Web Notifications