Bootstrap ,css ve jquery ile kendi toast’rımızı yapıyoruz :)
Önce Mvc Core Layout kısmında nerde çalışcağına karar verin. ve bu kodları yerleştirin.Görsel deki gibi icon da ekleyebilirdik ama ben eklemedim.
@if (TempData["message"] != null)
{
<div class="alert alert-success col-3">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
@TempData["message"]
</div>
}
@if (TempData["errormessage"] != null)
{
<div class="alert alert-danger col-3">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
@TempData["errormessage"]
</div>
}
Sonrasında jquery kütüphanesinin altına şu jquery kodlarını iliştirin
$(".alert-success").animate({ left: '250px' }).first().hide().fadeIn(200).delay(4000).fadeOut(2000, function () { $(this).remove(); });
Sonrasında ben sayfamın biraz alt kısmına gelmesini istedim ve şu Css ekledim
.alert {
position: fixed;
bottom: 200px;
margin-left: 60%;
width: 96%;
z-index: 555;
}
işte bu kadar basit mükooo oldu :) daha hızlı ve daha bağımsız :))) beni devamlı jquery yazmaktan kurtardı :)
Toastr da olduğu gibi bir kaç saniyeden sonra kayboluyor.
Controller tarafında nasıl ilerliyorum ona bakalım. İşlemimi bitirdikten sonra servisimden dönen mesajı message kısmına iletiyorum.
var result = _courseContentService.Update(courseContentViewModel.CourseContent);
if (result.Success == true)
{
TempData.Add("message", result.Message);
}
else
{
TempData.Add("errormessage", result.Message);
}
İşte bu kadar.
Umarım beğenirsiniz.
Kendinize çok çok iyi bakın :)