Using Notification in ASP.NET WebForms

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 Winking smile

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

Tagged on: , ,

21 thoughts on “Using Notification in ASP.NET WebForms

      1. Anonymous

        As Hossam Kamel asked me on twitter, here are changes I added are mainly:

        – Some minor refactoring (removing some repeated parts)
        – Supporting calling notifications from inside UpdatePanels
        – Supporting multiple notifications in the same page
        – Changed the extension method to be per contro, not just page (note that Page niherits from Conrol).
        – Rendering multiple notifications in the order of the controls that require them. not in the order they were called in page lifecycle. If you want page lifecycle order, call “Page.Show…()” instead of “someControl..Show…()”

        1. Anonymous

          Thanks Meligy and I’ll review those changes, like I said before you’re really helping me and the community ;)

  1. Anonymous

    Thanks to my friends Mohamed Meligy @Meligy and Hosam Kamel @HosamKamel, you’re a really treasure for me and the community.

  2. Mikal Johnsen

    Hi Emad, I found your code after googeling for a javascript notification service, implemented for .NET used in C# (code behind).

    I have some questions for you (and maybe your fellow devs here).

    q1: jnotify have some options, how would you guys make these options accessable from C# codebehind.
    ex: this.ShowSuccesNotification(“happy happy, click to close”, “, showClose: true”, 4000);

    q2: jnotify is now at 2.1, i think you have the 1.1 rev in your pack, any plans to update? I see that ,
    “ShowOverlay : true,” is an new option. That would have been perfect.

    q3: Since Im not able to implement this myself, I would also loved some more indepth comments, around your code. I cant actually see what javascript function you are calling.

    Im going x-eyed :)

    Thanks for nice code and functions. Im loving the “stack” :)

  3. Athar

    Thank you so very much bro. I have been looking for a similiar thing since 2 days. Many forums kept me busy with several solutions. Your helper class was exactly that did the trick. thank you thank you thank you

  4. Pingback: ASP.NET WebForms Notification Control | Emad Mokhtar's Framework

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>