Click here to Skip to main content
15,868,292 members
Articles / Programming Languages / Javascript
Article

Notification Widget Using JSON WebService

Rate me:
Please Sign up or sign in to vote.
4.60/5 (4 votes)
11 Apr 2011CPOL2 min read 22.1K   26   2
How to create a notification widget using JSON.

Introduction

This document gives a complete description of how to create a notification widget using JSON. A notification widget is simply a user control that can be placed on a master page and will display the top 3 (or any other configurable number) notifications/alerts from the application. If there are some alerts that need to be brought into notice of the user while the user is performing an action on any page, it can be done through the widget. The widget keeps on refreshing after a specified interval, let’s say 5 seconds. A notification widget image is displayed below. Here it shows the three latest alerts, and it will keep on refreshing every 5 seconds, and this interval is configurable. The widget can be enabled or disabled as and when required by using a configurable property.

Advantages of using JSON over XML

JSON was used instead of XML as JSON is much simpler than XML. JSON has a much smaller grammar and maps more directly onto the data structures used in modern programming languages. JSON is more human-readable than XML. JSON is processed more easily because its structure is simpler. JSON, being a simpler notation, needs much less specialized software. In the languages JavaScript and Python, the JSON notation is built into the programming language; no additional software is needed at all. In other languages, only a small amount of JSON-specific code is necessary.

Creating the user control

  1. The user control has a simple panel placed in a rounded corner extender. The panel has an image which shows up when the widget is refreshing.
  2. The control needs to have a JavaScript function which calls another function LoadWidgetContent after the refresh interval stated in the config file.
  3. LoadWidgetContent is a JavaScript function which is placed in a common JavaScript file.
NotificationWidget.ascx
ASP.NET
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="NotificationWidget.ascx.cs"
    Inherits="Maaxxio.Foundation.UI.UserControls.NotificationWidget" %>
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
</asp:ScriptManagerProxy>

<script src="/foundation/javascript/Widget.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
$(document).ready(function() 
{
    var isEnabled = false;
    isEnabled = <%= this.IsWidgetEnabled.ToString().ToLower() %>;

    if(!isEnabled)
        return;
    
    LoadWidgetContent();
    // Add the method call at a regaular interval.
    $(document).everyTime(<%= this.RefreshInterval %>, function() {LoadWidgetContent();});
});
</script>

<asp:Panel ID="PanelUC" runat="server" Height="" 
        Width="150px" BackColor="Silver" BorderColor="#333333">
  <div id="notificationDiv">
    <asp:Image ID="notificationLoadingImage" runat="server" 
           ImageUrl="/foundation/images/shared/indicator.gif" />
    <span>Loading notifications...</span>
  </div>
</asp:Panel>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" 
       runat="server" TargetControlID="PanelUC">
</ajaxToolkit:RoundedCornersExtender>

The code-behind gets the RefreshInterval and IsWidgetInterval properties from the config file. These properties are used in the JavaScript function stated above.

NotificationWidget.ascx.cs
C#
public partial class NotificationWidget : System.Web.UI.UserControl
{
    /// <summary>
    /// Returns true if Widget is enabled in Config file.
    /// </summary>
    protected bool IsWidgetEnabled
    {
        get
        {
            bool isEnabled = false;
            
            if (Boolean.TryParse(SystemUtilities.GetConfigValue(
                   "NotificationWidgetEnable"), out isEnabled) == true)
            {
                return isEnabled;
            }
            else
            {
                return false;
            }
        }
    }

    /// <summary>
    /// Refresh Interval - returns Widget Refresh Interval in MiliSeconds.
    /// </summary>
    protected int RefreshInterval
    {
        get
        {
            int refreshInterval = 5;

            if (SystemUtilities.GetConfigValue("NotificationWidgetTimer") != null)
            {
                Int32.TryParse(SystemUtilities.GetConfigValue(
                      "NotificationWidgetTimer"), out refreshInterval);
            }

            return refreshInterval * 1000;
        }
    }

The common JavaScript file contains the function LoadWidgetContent. The LoadWidgetContent function uses jQuery’s ajax method. In this method, the type is specified as POST and the URL contains the JSON Web Service. So this method calls the Web Service.

JavaScript
function LoadWidgetContent() {
    $.ajax
    (
        {
            type: "POST",
            url: "/foundation/Notifications/WidgetService.asmx/GetNotificationsForWidget",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: FillWidgetDiv, 
            error: ajaxFailed 
            
        }              
    );
}

WidgetService.asmx contains a webmethod GetNotificationsforWidget() which gets the latest three notifications to be displayed in the widget.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
BugSource Not Available To Be Downloaded!! Pin
T Hutton11-Sep-11 21:22
professionalT Hutton11-Sep-11 21:22 
Hi Swati, this is such an interesting concept. Please make the source available to download soon as i would really like to take a closer look. Thanks
Generalplease upload the code also Pin
Vinod From Capgemini11-Apr-11 21:16
Vinod From Capgemini11-Apr-11 21:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.