ASP.NET MVC toast message
Giới thiệu
Toast là một dạng thông báo xuất hiện trên màn hình trong một thời gian ngắn và biến mất. Nếu các bạn đã xài smartphone (Android thấy nhiều) thì hẳn sẽ quen với dạng toast message này. Trong bài này mình sẽ hướng dẫn để sử dụng toast message trong MVC bằng cách sử dụng thư viện Toastr.
Project
Mình sẽ tạo 1 project ASP.NET MVC5 cơ bản và thêm thư viện Toastr bằng Nuget
Sau khi cài đặt xong, bạn sẽ thấy xuất hiện thêm css và js của toastr
Và chỉ cần thêm vào Bundles để sử dụng (Nếu không muốn thêm vào Bundles, bạn có thể thêm css và js vào bất kì trang nào muốn hiển thị toast.)
Sử dụng
Để đơn giản, mình tạo 1 TestController với View đơn giản gồm 4 Button, mỗi loại button sẽ hiển thị một dạng toast khác nhau
Hiển thị toast được viết trong script section như sau
Kết quả đạt được sẽ là
Bạn có thể thêm nhiều hiệu ứng cho toast message này, ví dụ như mình thêm nút close cho toast
Bạn cũng có thể tự customize toast cho mình bằng cách vào trang demo của toastr và tự chỉnh: Toastr demo.
Hoàn toàn tương tự cho 3 button còn lại ta sẽ được các thông báo
Toast message từ Controller
Bạn hoàn toàn có thể gửi toast message từ Controller, ví dụ như sử dụng ajax chẳng hạn. Nhưng có một cách đơn giản hơn, đó là thêm vào _Layout.cshtml (mục tiêu khi thêm vào trang _Layout là có thể dùng cho tất cả mọi Controller và Views)
Sử dụng bằng cách thêm trong Controller đoạn code
.png)
thank you for your article
ReplyDelete