ASP.NET Core 2.2 - Sorting Entities

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.

This article continues a series about table functions:

• ASP.NET Core 2.2 - In Memory Entities
• ASP.NET Core 2.2 - Bootstrap 4 Tables
• ASP.NET Core 2.2 - Details Modal With JSON Entity
• ASP.NET Core 2.2 - Autocomplete Search
• ASP.NET Core 2.2 - Bootstrap 4 Pagination
• ASP.NET Core 2.2 - Filtering Entities
• ASP.NET Core 2.2 - Sorting Entities

The FREE ASP.NET Core 6.0 - Demos And Utilities Project includes a Table Functions Demo. Access to the source code is free for registered users 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.