ASP.NET Core 2.2 - Sorting Entities
Download KH Authenticator

.NET MAUI App for Windows and Android
Online Registration and Authentication
No Password Or Email Address Required!
Certified Providers
KenHaggerty.Com Users Without Passwords Users With Passwords Users Without IdentityThis 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:
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.
Update 12/30/2021
Announced the ASP.NET Core 6.0 - Demos And Utilities Project. Updated articles, asset and topic links.
Comments(0)