Khoanglang89
Bạn hãy đăng nhập hoặc đăng ký
Khoanglang89

NHẬN THIẾT KẾ WEBSITE/ SOFTWARE - LÀM ĐỒ ÁN TỐT NGHIỆP, ĐỒ ÁN CHUYÊN MÔN NGÀNH CÔNG NGHỆ THÔNG TIN


You are not connected. Please login or register

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

1 ASP.NET MVC toast message on Sun Jul 05, 2015 9:22 pm

Admin

avatar

Admin
Admin
Loading

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



 









 

@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


_________________
Có nỗi buồn triền miên, làm trái tim hoá đá
Có những dòng lệ nhỏ, khiến đá hoá thành tim.

-------------------------------------------------------------------------------------------------------
Program Skills:  ASP.Net MVC 3/4; C#; VB.Net/ VB 6.0; Java Applet/Swing; JS/JavaScript; Bootstrap/ AngularJS; HTML/CSS; Turbo C/ Turbo C++; Pascal...
Xem mẫu Phần mêm quản lý ở đây     -           Xem mẫu Bán hàng trực tuyến ở đây
Nguyễn Ích Hoàn
new_life02081989@yahoo.com
nguyenichhoan1989@gmail.com
Xem lý lịch thành viên http://khoanglang89.forumvi.com

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Bài viết mới cùng chuyên mục

    Bài viết liên quan vớiASP.NET MVC toast message

      Permissions in this forum:
      Bạn không có quyền trả lời bài viết