Como utilizar o toastr notifications com ASP.NET MVC

Fala pessoal, vou explicar uma forma de implementar o toastr notifications em uma aplicação asp.net mvc, é bem legal essa forma de notificar os usuários e é bem usado hoje em dia.

Primeiro em seu projeto mvc faça a inclusão das bibliotecas do Tostr pelo NuGet, pode ser pela ferramenta visual ou pelo Package Manager Console com o comando:

install-package toastr

Altere o arquivo BundleConfig para incluir os arquivos toastr.css e toastr.js.

Na sua master page _Layout.chtml crie 4 campos do tipo “hidden”

<input type="hidden" id="success" 
           value="@TempData["success"]" />
<input type="hidden" id="info"    
           value="@TempData["info"]" />
<input type="hidden" id="warning" 
           value="@TempData["warning"]" />
<input type="hidden" id="error" 
           value="@TempData["error"]" />

Na sua sessão de scripts inclua os seguintes comandos:

$(function () {
     var displayMessage = function (message, msgType) {
	toastr.options = {
		"closeButton": true,
		"debug": false,
		"newestOnTop": false,
		"progressBar": true,
		"positionClass": "toast-top-right",
		"preventDuplicates": false,
		"onclick": null,
		"showDuration": "300",
		"hideDuration": "1000",
		"timeOut": "5000",
		"extendedTimeOut": "1000",
		"showEasing": "swing",
		"hideEasing": "linear",
		"showMethod": "fadeIn",
		"hideMethod": "fadeOut"
	};
	toastr[msgType](message);
     };

     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');
    }
});

Para utilizar nos seus controller basta acionar desta maneira:

public ActionResult Create(ParameterVM model)
{
	if (ModelState.IsValid)
	{
		return RedirectToAction("Index");
	}
	TempData["warning"] = "Mensagem de warning!!";
	TempData["success"] = "Mensagem de sucesso!!";
	TempData["info"] = "Mensagem de informação!!";
	TempData["error"] = "Mensagem de erro!!";
	return View(model);
} 

Abaixo imagem de como deve ficar suas notificações:

Notifications

No meu caso fiz uma pequena alteração no css para as notificações não ficarem “coladas no topo”, para isso eu subsescrevi uma parte do css do toast.

.toast-top-right {
  top: 60px;
  right: 12px;
}

Para configurar o toastr acesse o Demo examples

Crédito aos criadores do Toastr John Papa e Hans Fjällemark

18 comments

  1. Boa tarde Marcelo,
    Fiquei com uma duvida, você colocou: “Na sua sessão de scripts inclua os seguintes comandos: “, devo criar um arquivo .js? Ou posso colocar direto na _Layout.chtml ?

    Atenciosamente,
    Joelso

    1. Fala Joelso! tudo beleza?

      Isso fica a seu critério, no meu exemplo eu coloquei no final da _Layout.chtml, mas vc pode tranquilamente colocar em um arquivo externo .js diria que fica até mais elegante.

      No meu caso foi mais para demonstrar mesmo.

      Um abraço.

  2. Boa tarde,
    Tentei implementar, porém, não recebo a notificação na minha index. Tirei o Hidden dos buttons e verifiquei que eles se encontram na view e recebem a devida mensagem, mas o efeito não funciona. Esse toast teria algum problema quando usado com o datatables?
    Grato!

    1. Evandro, não testei com o Datatables…vc consegue de alguma forma me mostrar seu código? vou tentar fazer um exemplo utilizando o Datatables aqui..

    2. Você pode tentar colocar a tabela que utiliza o Datatable em uma partial view e sómente chamar a partial view dentro da sua view na qual será exibida a tabela para vê se dá certo

  3. Oi Marcelo, eu também tive problema, a mensagem nem apareceu…
    Eu coloquei o script dentro das tags no meu layout .cshtml , também tentei colocar o na minha view index no caso ou mesmo na layout cshtml mas não deu certo mesmo.

    1. Fala Vagner! beleza?

      Voce consegue de alguma maneira me mostrar seu código? algumas pessoas já utilizaram esse código e funcionou bem, se conseguir
      me mandar o código dou uma olhada e achamos o problema.

      Beleza?

      Obrigado por acessar o meu blog!

  4. Contribuindo…
    retirei os hidden e deixei mais dinâmico…

    @{

    var mensagemToast = TempData[“MensagemToast”] ?? TempData[“MensagemToast”];

    var tipoMensagemToast = TempData[“TipoMensagemToast”] ?? TempData[“TipoMensagemToast”];

    }

    $(function () {
    var displayMessage = function (message, msgType) {
    toastr.options = {
    “closeButton”: true,
    “debug”: false,
    “newestOnTop”: false,
    “progressBar”: true,
    “positionClass”: “toast-top-right”,
    “preventDuplicates”: false,
    “onclick”: null,
    “showDuration”: “300”,
    “hideDuration”: “1000”,
    “timeOut”: “5000”,
    “extendedTimeOut”: “1000”,
    “showEasing”: “swing”,
    “hideEasing”: “linear”,
    “showMethod”: “fadeIn”,
    “hideMethod”: “fadeOut”
    };
    toastr[msgType](message);
    };

    displayMessage(‘@mensagemToast’,’@tipoMensagemToast’);

    });

    })

    Ai na controller

    TempData[“MensagemToast”] = “Não foi possível efetuar login. Verifique seus dados e tente novamente.”;
    TempData[“TipoMensagemToast”] = “error”;

    Dá pra melhorar mais…

  5. Bem interessante, só não gostei pq a mensagem fica muito a direita, seria interessante se pudesse padronizar ou ficar como uma partial view

Leave a Reply

O seu endereço de e-mail não será publicado.