SweetAlert Notification in ASP.NET MVC & ASP.NET CORE

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s