使用 JSON WebService 的通知小部件

引言

本文档提供了使用 JSON 创建通知小部件的完整描述。通知小部件只是一个用户控件，可以放置在母版页上，并显示应用程序中最新的 3 个（或任何其他可配置数量）通知/警报。如果用户在任何页面上执行操作时需要引起用户注意的警报，可以通过该小部件实现。该小部件会在指定的时间间隔后不断刷新，例如 5 秒。下面显示了一个通知小部件的图像。它显示了三个最新的警报，并且每 5 秒刷新一次，此间隔是可配置的。该小部件可以根据需要使用可配置的属性启用或禁用。

使用 JSON 代替 XML 的优势

JSON 被用于代替 XML，因为 JSON 比 XML 简单得多。JSON 具有更小的语法，并且更直接地映射到现代编程语言中使用的数据结构。JSON 比 XML 更易于阅读。由于其结构更简单，JSON 更易于处理。JSON 是一种更简单的表示法，需要更少的专用软件。在 JavaScript 和 Python 语言中，JSON 表示法内置于编程语言中；根本不需要额外的软件。在其他语言中，只需要少量的 JSON 特定代码。

创建用户控件

1. 用户控件有一个简单的面板放置在圆角扩展器中。面板有一个图像，当小部件正在刷新时显示出来。
2. 控件需要有一个 JavaScript 函数，该函数在配置文件中指定的刷新间隔后调用另一个函数 LoadWidgetContent。
3. LoadWidgetContent 是一个 JavaScript 函数，它放置在一个通用的 JavaScript 文件中。

<%@ 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>

后台代码从配置文件中获取 RefreshInterval 和 IsWidgetInterval 属性。这些属性用于上述 JavaScript 函数中。

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;
        }
    }

通用的 JavaScript 文件包含函数 LoadWidgetContent。LoadWidgetContent 函数使用 jQuery 的 ajax 方法。在这种方法中，类型指定为 POST，URL 包含 JSON Web Service。因此，此方法调用 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 包含一个 webmethod GetNotificationsforWidget()，它获取要在小部件中显示的最新三个通知。