#2 Thêm chức năng tìm kiếm cho bảng (Search) ASP.NET Core MVC - Quoc Hieu Blog

Post Top Ad

#2 Thêm chức năng tìm kiếm cho bảng (Search) ASP.NET Core MVC

Share This
Như bài trước, mình đã giới thiệu tổng quan về CRUD và hướng dẫn các bạn code CRUD sử dùng EF Core Code First. Vậy trong bài này, mình sẽ hướng dẫn các bạn kế thừa CRUD ở bài trước và thêm tìm kiếm dữ liệu (Search) cho bảng.

#2 Tìm hiểu CRUD trong ASP.NET Core MVC


Kế thừa code ở bài 1, mình sẽ viết lại code ở bài trước, theo một hướng khác, nếu bạn chưa làm bài 1, hãy làm và  trở lại đọc bài này nhé:

https://www.quochieu.com/2020/04/tim-hieu-crud-trong-aspnet-core-mvc-1.html

Tiến hành

Như bài trước, mình thiết kế dữ liệu cho các Doctors, trong bảng đó gồm các Name, Email, Password, Phone, Gender,... Vậy trước tiên, mình sẽ code chức năng search Name (tên bác sĩ) trước tiên.

Bước 1: Các bạn update code của phương thức Index trong Controllers/DoctorsController.cs, cụ thể như sau:

public async Task<IActionResult> Index(string searchString)
{
    var doctors = from m in _context.Doctors
        select m;

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

Giải thích: Như code trên mình dùng truy vấn của LINQ để chọn tất cả các Doctors với code:

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

Sau đó, nếu tham số searchString chứa chuỗi, truy vấn Doctors được sửa đổi để lọc theo giá trị của chuỗi tìm kiếm:

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

Và với cách trên, bạn cần lưu ý rằng phương thức Contains được chạy trên cơ sở dữ liệu, không phải chỉ trên đoạn mã c#. Độ nhạy hay độ nhanh tùy thuộc vào cách bạn viết truy vấn cơ sở dữ liệu. Và trên SQL Server, các phương thức Contains ánh xạ đến, không phân biệt chữ hoa chữ thường.

Bước 2: Bạn cần hiển hiển thị khung Search, hãy vào Views/Doctors/Index.cshtml và thêm mẫu form sau:

<form asp-controller="Doctors" asp-action="Index" method="get">
    <p>
        Title: <input type="text" name="SearchString">
        <input type="submit" value="Filter" />
    </p>
</form>

Và kết quả như sau:

Như các thấy, mình có thêm 2 dữ liệu giống nhau vào bảng nhưng khác chữ thường và in hoa, và điều gì xảy ra nếu bạn search một chuỗi "hiếu":


Lời kết

Vậy là mình đã hoàn tất việc thêm chức năng tìm kiếm chỉ với 2 bước cực kì đơn giản. Nhưng để tìm kiếm không nhất thiết chỉ dùng LINQ, hãy chờ đón bài viết mình sắp tới cho nhiều cách khác nhau nhé.

Series này vẫn còn dài nên hãy theo dõi bài viết của mình. 

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

By Hiếu Quốc

4 comments:

Cảm ơn bạn đã bình luận.

Pages