I got a requirement in an application to display notification messages as beautiful pop-ups instead of plain text on the web page.
Note , this is not a toastr kind of notification , it is the normal javascript alert notification.
A quick search and i got hold of this beautiful alert project by Tristan Edwards called SweetAlert
I thought well about this and also how i need to implement it to make it re-usable and available in all my Controller without doing too much frontend implementation of it.
Hence , i had to come up with a BaseController which all other controllers will simply inherit from.
BASECONTROLLER DESIGN
public abstract class BaseController : Controller { public void Alert(string message , NotificationType notificationType) { var msg = "swal('" + notificationType.ToString().ToUpper() + "', '"+ message +"','"+ notificationType+"')" + ""; TempData["notification"] = msg; } }
Then a sample controller that inherit from the BASECONTROLLER above.
public class TestController : BaseController { [HttpGet] public IActionResult Index() { return View(); } } }
Since this TESTCONTROLLER inherits from the BASECONTROLLER , i therefore have access to the Alert method in the BASECONTROLLER.
The alert has icons that depict the kind of alert i want to use i.e error notification , success notification , warning notification and info notification
Hence the need for an enum , so i create the enum class below , which already appeared in the BASECONTROLLER above.
public class Enum { public enum NotificationType { error, success, warning, info } }
With completely re-usability in mind , let us create a partial view that will display the alert notification passed into TempData[“notification”] = msg; in the BASECONTROLLER above.
So let us create a partial view called _NotificationPanel.cshtml file which we will call in the _Layout.cshtml file in the Views/Shared folder
@if (TempData["notification"] != null) { @Html.Raw(TempData["notification"]) }
Then in the _Layout.cshtml we make the _NotifcationPanel.cshtml available like this
@Html.Partial(“_NotificationPanel”)
@RenderBody()
Also , we need to add the css and javascript we got from SweetAlert to the HEAD section of the _Layout.cshtml file
<link href=”/sweetAlert/sweetalert.css” rel=”stylesheet” />
/sweetAlert/sweetalert.min.js
Finally note that the view of our TESTCONTROLLER above need to use the _Layout as it’s Layout , so our TESTCONTROLLER view page needs to look like this
@{ ViewBag.Title = "title"; Layout = "_Layout"; }
Now we are set for use. So let us create sample for all the SWEETALERT notification types.
For Success Messages :
Our TESTCONTROLLER will be :
For Success Messages :
public class TestController : BaseController { [HttpGet] public IActionResult Index() { Alert("This is success message",NotificationType.success); return View(); } }
With the help of our enum class we can choose any kind of message we want.
Source code available on my github repo.
Thanks…please do leave your comments below.