#3 Thêm sắp xếp (Sorting) dữ liệu cho bảng trong ASP.NET Core MVC

Để hoàn thiện hơn các chức năng mình sử dụng với các bảng, hôm nay mình sẽ hướng dẫn các bạn một chức năng nữa, sắp xếp (Sorting) dữ liệu cho bảng trong ASP.NET Core MVC.

Cụ thể, mình muốn sắp xếp các dữ liệu tăng dần hoặc giảm dần, tức là các field (Name, Email, CreatedOn), được sắp xếp khi các các nhấp vào thead của các field trong bảng.

Tiến hành

Ở bài trước, khi thêm chức năng tìm kiếm, mình chỉ dùng 2 bước, và trong bài này sẽ không nhiều hơn đâu.

Bước 1: Các bạn cần update code trong phương thức Index trong Controllers\StudentController.cs, cụ thể các code được update so với bài trước sẽ tô màu vàng: 

public async Task<IActionResult> Index(string searchString, string sortOrder)
{
    ViewBag.NameSortParm = String.IsNullOrEmpty(sortOrder) ? "name_desc" : "";
    ViewBag.DateSortParm = sortOrder == "Date" ? "email_desc" : "Date";

    var doctors = from m in _context.Doctors
        select m;

if (!String.IsNullOrEmpty(searchString))
{
    doctors = doctors.Where(s => s.Name.Contains(searchString));
}

switch (sortOrder)
    {
    case "name_desc":
         doctors = doctors.OrderByDescending(s => s.Name);
         break;
    case "Date":
         doctors = doctors.OrderBy(s => s.CreatedOn);
         break;
   case "email_desc":
         doctors = doctors.OrderByDescending(s => s.Email);
         break;
   default:
         doctors = doctors.OrderBy(s => s.Name);
         break;
   }
return View(await doctors.ToListAsync());
}

Giải thích: Ở đây có 2 loại sort là sort theo string và sort theo ngày tháng, vì vậy mình phân biệt bằng cách dùng 2 ViewBag để định nghĩa và dùng switch case để phân biệt trường hợp.

Với phương thức OrderByDescending() là sắp xếp giảm dần (từ Y về A) và OrderBy() là tăng dần (từ A đến Y).

Bước 2: Trong Views\Doctors\Index.cshtml thay đổi phần thead thành như sau:

<thead>
        <tr>
            <th>
                @Html.ActionLink("Name", "Index", new { sortOrder = ViewBag.NameSortParm })
            </th>
            <th>
                @Html.ActionLink("Email", "Index", new { sortOrder = ViewBag.NameSortParm })
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Password)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Phone)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Gender)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Specialist)
            </th>
            <th>
                @Html.ActionLink("CreatedOn", "Index", new { sortOrder = ViewBag.DateSortParm })
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Status)
            </th>
            <th></th>
        </tr>
    </thead>

Như các bạn thấy thì mình chỉ thay đổi trên các field Name, Email và CreatedOn vì mình chỉ thực hiện sắp xếp cho 3 trường này. Để sắp xếp cho các trường khác các bạn làm tương tự.

Nhấn vào phần head của bảng để xem kết quả:

Khi thực hiện sort theo Name:

Khi thực hiện sort theo CreatedOn (Date):

Lời kết

Các bước thực hiện rất đơn giản và dễ nắm, nếu gặp bất kì khó khăn nào thì hãy cmt bên dưới.

Series này vẫn còn cho những bài tiếp theo, hãy tiếp tục theo dõi blog nhé.

Mong bài viết có ích, chúc các bạn thành công.

By Hiếu Quốc

Có lẽ bạn thích?