Trang chủ / ASP.NET Core / Thêm Search trong ứng dụng ASP.NET Core MVC đầu tiên

Thêm Search trong ứng dụng ASP.NET Core MVC đầu tiên

Ở bài này, mình sẽ hướng dẫn bạn thêm chức năng tìm kiếm trong phương thức Index để bạn có thể tìm các bộ phim theo thể loại hoặc theo tên. Bây giờ cập nhật phương thức Index để thêm chức năng tìm kiếm như sau:

Dòng đầu tiên của phương thức Index sẽ tạo một truy vấn LINQ để lấy ra các bộ phim của bạn

Nếu các tham số timKiem chứa một chuỗi, các truy vấn của bạn lúc này sẽ được sửa đổi để lọc các giá trị theo chuỗi timKiem nhờ đoạn mã sau:

Điều hướng đến /Movies/Index. Nối một chuỗi truy vấn vào như ?timKiem=Ghost vào URL chẳng hạn. Các bộ phim được lọc lại sẽ hiển thị như hình

Thêm search trong ứng dụng asp net core đầu tiên
Thêm search trong ứng dụng asp net core đầu tiên

Nếu bạn thay đổi phương thức Index để có một tham số là ID, các tham số ID sẽ phù hợp với các tùy chọn {id} được mặc định thiết lập trong Startup.cs

Bạn có thể đổi tên tham số timKiem thành id. Click phải vào searchString > Rename

Thêm search trong ứng dụng asp net core đầu tiên - Ảnh 2
Thêm search trong ứng dụng asp net core đầu tiên – Ảnh 2

Thay đổi tham số thành Id và toàn bộ và tất cả các chuỗi timKiem thành id.

Thêm search trong ứng dụng asp net core đầu tiên - Ảnh 3
Thêm search trong ứng dụng asp net core đầu tiên – Ảnh 3

 

 

 

 

 

 

 

Thêm search trong ứng dụng asp net core đầu tiên - Ảnh 4
Thêm search trong ứng dụng asp net core đầu tiên – Ảnh 4
Thêm search trong ứng dụng asp net core đầu tiên - Ảnh 5
Thêm search trong ứng dụng asp net core đầu tiên – Ảnh 5

 

 

 

 

 

 

 

Bây giờ bạn có thể tìm kiếm tên phim như là dữ liệu định tuyến (tức là như một URL)  thay vì như một giá trị chuỗi truy vấn lúc đó. Bây giờ ta tiến hành thêm giao diện để hiển thị giúp dễ dàng lọc các bộ phim bằng cách thay phương thức Index mới thay cho phương thức Index

Mở tập tin Views/Movies/Index.cshtml và thêm vào </form> như đoạn mã bên dưới:

Các thẻ sử dụng Form Tag Helper. Vì vậy khi bạn gửi dữ liệu, chuổi sẽ gửi đến các phương thức Index trong movies controller. Lưu thay đổi của bạn và sau đó kiểm tra bộ lọc.

Bạn sẽ không cần [HttpPost] cho phương thức Index, bởi vì phương thức tìm kiếm này không thay đổi trạng thái của ứng dụng, nó chỉ cần lọc dữ liệu mà thôi.

Thêm tìm kiếm theo thể loại (Genre)

Thêm lớp MovieGenViewModel vào thư mục Models

Lúc này nó sẽ chứa:..

  • Danh sách các phim
  • Selectlist có chứa danh sách các thể loại. Điều này cho phép người dùng lựa chọn một thể loại từ danh sách movieGenre, trong đó các thể loại được lựa chọm
  • Thay thế phương thức Index với đoạn mã như sau:
Các đoạn mã sau đây là một truy vấn LINQ để lấy tất cả các thể loại từ cơ sở dữ liệu.
Chọn danh sách thể loại được tạo ra bằng cách tham chiếu đến các thể loại khác nhau (chúng ta đều không muốn danh sách các lựa chọn của chúng ta bị trùng lặp).
Kiểm tra các ứng dụng bằng cách tìm kiếm theo thể loại, theo tiêu đề phim hoặc cả hai.
Bây giờ test app thôi.

Link download source code: Google drive

 

Series Navigation<< Phương thức Controller và View trong ASP.NET Core MVC đầu tiên part 2Thêm một Field mới trong ứng dụng ASP.NET Core đầu tiên >>

Thông tin Nguyễn An Hoàng Nguyên

Đam mê về lập trình, thích viết lách. Có hứng thú với thương mại điện tử và kinh doanh

Check Also

widget trong template này

Generic Repository Pattern là gì ? Cách sử dụng trong ASP.NET Core

Cũng đã gần 3 tháng mình mới viết bài mới. 3 tháng trước mình đã …

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *