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:
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
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
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.
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!
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..
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
Marcelo essa foi a abordagem mais simples que encontrei para esse componente. Parabéns pelo conteúdo do Blog
Obrigado Wladimir!! se ajudou em algo me deixa muito feliz! sucesso ae
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.
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!
Boa Tarde, não sei o que aconteceu, em algumas telas aparecem, em outras não, o TempData vem vazio.
Obrigado
Parabéns pelo conteúdo. Ainda vou testar, mas gostei da simplicidade do artigo.
Valeu Diogo!
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…
Show meu amigo! obrigado e parabéns
Cara melhor toast que já fiz. Muito simples, parabéns!
Obrigado Victor!
Muito didático e com informações excelentes! Obrigado por compartilhar a informação!!
Bem interessante, só não gostei pq a mensagem fica muito a direita, seria interessante se pudesse padronizar ou ficar como uma partial view