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.)

1 2 3 4 5 6 7 8 9 10 11

bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/Scripts/modernizr"));   bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/bootstrap.js" "~/Scripts/toastr.js" // toastr js "~/Scripts/bootstrap.js")); bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/toastr.css", // toastr css "~/Content/site.css"));

view raw bundles.cs hosted with ❤ by GitHub

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Index   Info Success Warning Danger   @section scripts { $(document).ready(function(){ $('.btn-info').click(function(){ toastr.info('Hello World!','Title' ); }); }); }

view raw toastr_info.html hosted with ❤ by GitHub
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

1 2 3 4 5 6 7 8 9 10 11 12 13 14

@section scripts { $(document).ready(function(){ toastr.options = { "closeButton": true }; $('.btn-info').click(function(){ toastr.info('Hello World!','Title' ); }); }); }

view raw toastr_option.html hosted with ❤ by GitHub

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

Code:

_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)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

$(function () { if ($('#success').val()) { displayMessage($('#success').val(), 'success'); } if ($('#info').val()) { displayMessage($('#info').val(), 'info'); } if ($('#warning').val()) { displayMessage($('#warning').val(), 'warning'); } if ($('#error').val()) { displayMessage($('#error').val(), 'error'); } }); var displayMessage = function (message, msgType) { toastr.options = { "closeButton": true, "debug": false, "positionClass": "toast-top-right", "onClick": null, "showDuration": "300", "hideDuration": "1000", "timeOut": "8000", "extendedTimeOut": "1000", "showEasing": "swing", "hideEasing": "linear", "showMethod": "fadeIn", "hideMethod": "fadeOut" }; toastr[msgType](message); };

view raw toastr_server.html hosted with ❤ by GitHub
Sử dụng bằng cách thêm trong Controller đoạn code

1 2 3 4 5 6 7

TempData["success"] = "Welcome back!";   TempData["info"] = "Info message";   TempData["warning"] = "Warning message";   TempData["error"] = "Error message";

view raw toastr_server2.cs hosted with ❤ by GitHub

Nguồn

Sending messages from an MVC Controller to toastr.js