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 Model

Comment Count = 0

Please log in to comment.

Login Register
Logged in users receive web notifications.
Web Notifications