Click here to Skip to main content
Click here to Skip to main content

Notification Widget Using JSON WebService

, 11 Apr 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
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
<%@ 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
public partial class NotificationWidget : System.Web.UI.UserControl
{
    /// <span class="code-SummaryComment"><summary>
</span>    /// Returns true if Widget is enabled in Config file.
    /// <span class="code-SummaryComment"></summary>
</span>    protected bool IsWidgetEnabled
    {
        get
        {
            bool isEnabled = false;
            
            if (Boolean.TryParse(SystemUtilities.GetConfigValue(
                   "NotificationWidgetEnable"), out isEnabled) == true)
            {
                return isEnabled;
            }
            else
            {
                return false;
            }
        }
    }

    /// <span class="code-SummaryComment"><summary>
</span>    /// Refresh Interval - returns Widget Refresh Interval in MiliSeconds.
    /// <span class="code-SummaryComment"></summary>
</span>    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.

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)

Share

About the Author

No Biography provided

Comments and Discussions

 
BugSource Not Available To Be Downloaded!! PinmemberT Hutton11-Sep-11 22:22 
Generalplease upload the code also PinmemberVinod From Capgemini11-Apr-11 22:16 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.1411028.1 | Last Updated 11 Apr 2011
Article Copyright 2011 by Swati Kathuria
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid