Using Notification in ASP.NET WebForms

Posted on Thu 02 February 2012 in ASP.NET

I always asked myself, how can I show a neat notification and call it from Page code behind? I want to call this notification after doing something in code behind, for example notify user that “Record Inserted Successfully” and this notification looks like the one on Twitter and Stackoverflow. I found jQuery plug-in called jNotify has what I want from the notification, and ASP.NET has the Method “ClientScriptManager.RegisterStartupScript Method” to add Script to page on runtime, so why not combine 2 together and create a helper method  plus make it extension method for Page.

Helper Method:

This is the most important part, here where the 2 part I mentioned above.

using System.Web.UI;

namespace jQueryNotification.Helper
{
    public static class NotificationHelper
    {
        /// <summary>
        /// Shows the successful notification.
        /// </summary>
        /// <param name="page">The page.</param>
        /// <param name="message">The message.</param>
        public static void ShowSuccessfulNotification(this Page page, string message)
        {
            page.ClientScript.RegisterStartupScript(page.GetType(), "notificationScript",
                                                    "<script type='text/javascript'>  $(document).ready(function () { $.jnotify('" +
                                                    message + "'); });</script>");
        }
    }
}

jNotify Script and Style:

In order to use the helper method you need to add jQuery script and jNotify script and style

<link href="Styles/jquery.jnotify.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.jnotify.js" type="text/javascript"></script>

Page Code Behind:

ASPX:

<asp:Button ID="btnSuccess" runat="server" Text="Successful Notification" onclick="btnSuccess_Click" />

CS:

Note: Make sure you add the helper method class reference to page’s code behind

using System;
using jQueryNotification.Helper;

namespace jQueryNotification
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnSuccess_Click(object sender, EventArgs e)
        {
            this.ShowSuccessfulNotification("Success Notification");
        }
    }
}

Screenshots:

SNAG-0031

SNAG-0029

SNAG-0030

Project File:

I uploaded a project include the notification helper methods I’m using in my projects, I’ve added 6 Methods:

  1. Successful Notification:

    1. Normal.
    2. Delayed
  2. Warning Notification:

    1. Normal.
    2. Delayed.
  3. Error Notification:

    1. Normal.
    2. Delayed.

I hope these helper methods will help you in your ASP.NET projects, happy and productive coding everyone.

On GitHub: https://github.com/EmadMokhtar/jQuery-Notification