• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

OWA或Messenger样式的信息提示窗口——编写ASP.NET AJAX Extender控件(下):使用该 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

在前面两篇(OWA或Messenger样式的信息提示窗口——编写ASP.NET AJAX Extender控件(上):客户端BehaviorOWA或Messenger样式的信息提示窗口——编写ASP.NET AJAX Extender控件(中):封装成服务器端控件)中,我们创建了自己的ASP.NET AJAX Extender控件,这一篇将介绍如何在实际项目中使用该控件。

关于该控件的详细功能实际运行时的界面效果以及详细属性列表,请参考我的ASP.NET AJAX控件——PopupNotificationExtender:实现OWA或Messenger样式的信息提示窗口这篇文章。不过代码下载和示例程序请看本文接下来的介绍,上文中的内容已经过时

 

预先需求

本控件基于ASP.NET AJAX开发,且继承于ASP.NET AJAX Control Toolkit中的AlwaysVisibleControlExtender。所以若要在程序中使用该控件,则必须配置好ASP.NET AJAX并添加好ASP.NET AJAX Control Toolkit程序集的引用(请参考《拥抱变化——从Atlas到ASP.NET AJAX(1):下载安装总览》)。

 

添加PopupNotificationExtender的引用

然后将控件的DLL(Dflying.Ajax.PopupNotificationExtender.zip)解压缩至Web站点的bin目录下,添加好对该DLL的引用。

 

注册控件前缀

在需要使用的页面头部添上如下注册代码:

<%@ Register Assembly="Dflying.Ajax.PopupNotificationExtender" Namespace="Dflying.Ajax"
    TagPrefix="dflying" %>

 

添加ScriptManager

当然,页面中还需要一个ScriptManager控件:

<asp:ScriptManager ID="ScriptManager1" runat="server" />

 

编写将要弹出的提示窗口

然后定义一个Panel,用来表示提示窗口,当然其中布局样式朋友们可以随心所欲地改变:

<asp:Panel ID="thePanel" CssClass="panel" runat="server">
    <div style="border: 1px solid black; height: 98px;">
        <div style="padding: 3px; background-color: Silver;">
            <strong>New Messages:</strong>
        </div>
        <img src="icon.gif" style="float: left; display: block; margin: 3px;" />
        <div id="result" style="padding: 3px; margin-left: 40px;" />
    </div>
</asp:Panel>

注意:该Panel中还包含了一个id为result的HTML <div>标签。注意这个<div>,等会服务器端返回的消息将填充到该<div>中。

该Panel应用的CSS Class为panel,定义如下:(注意不可以定义border、margin、padding三个属性,如果需要,可以在内部标签<div>中使用)

.panel
{
    font-size: 80%;
    background-color: white;
    width: 200px;
    height: 100px;
    overflow: hidden;
}

 

添加PopupNotificationExtender控件

然后是PopupNotificationExtender控件的代码:

<dflying:PopupNotificationExtender ID="pne" TargetControlID="thePanel" runat="server"
    VerticalSide="Bottom" HorizontalSide="Right" HorizontalOffset="20" VerticalOffset="20"
    ServicePath="NotificationService.asmx" ServiceMethod="GetNotification" QueryServiceInterval="6000"
    ResultLabelID="result" />

其中:

  1. HorizontalSide和VerticalSide指定提示窗口将在页面的右下角弹出。
  2. HorizontalOffset和VerticalOffset指定了弹出窗口离浏览边框的距离。
  3. ServicePath和ServiceMethod指定了服务器端查询新消息用的Web Service以及其中定义的Web Method。
  4. QueryServiceInterval指定了每隔6000毫秒(6秒钟)查询一次服务器,这里仅仅用来演示,通常我们不应该这样频繁地进行查询。
  5. ResultLabelID指定了用来显示服务器端的新消息的客户端HTML元素的id,这里就是上面我们定义的id为result的<div>。

 

编写服务器端Web Service

再看看服务器端Web Service的代码:

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
 
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService()]
public class NotificationService  : System.Web.Services.WebService {
 
    private static int m_count = 0;
    
    [WebMethod]
    public string GetNotification()
    {
        if (checkNewMessage())
        {
            // return the HTML message content.
            return string.Format("<a href=\"#\">You've received a new message #{0}.</a>", m_count++);
        }
        else
        {
            // if there's no new meesage, just return an empty string.
            return string.Empty;
        }
    }
 
    private bool checkNewMessage()
    {
        // TODO: whatever you want to check if there's a message.
        return true;
    }
}

很简单不多说了,GetNotification()方法没有任何传入参数,在该方法中,我们可以随便用什么方法看看是否有新的消息需要传递给客户端。如果有的话,那么返回代表该消息的HTML字符串,如果没有,则返回空字符串即可。之后客户端如果收到的是一个非空字符串,则将弹出窗口显示出来,如果受到空字符串,那么不会显示任何东西。

程序运行界面就和本文开始的两幅图像一样,你也可以下载完整的源文件(代码+示例程序,PopupNotification.zip)亲自体验一下。

 

运行时的程序界面

请参考我的ASP.NET AJAX控件——PopupNotificationExtender:实现OWA或Messenger样式的信息提示窗口这篇文章。

 

代码下载

完整的源文件+示例程序:PopupNotification.zip

PopupNotificationExtender编译好的程序集:Dflying.Ajax.PopupNotificationExtender.zip

 

随便再说两句

实际上,这个Extender所做的事情就是在服务期端封装了ASP.NET AJAX客户端的行为(Behavior)组件,整个控件开发过程中的大头部分仍然是那个JavaScript文件。之所以要这样封装,是为了方便熟悉ASP.NET服务器端开发模型的程序员使用,并提高组件的可重用性。

查看页面的源文件,可以看到在源文件的末尾部分有如下几行(为清晰起见,代码经过格式化):

<script type="text/javascript">
<!--
Sys.Application.initialize();
Sys.Application.add_init(
  function() {
    $create(Dflying.Ajax.PopupNotificationBehavior, 
      {
        "HorizontalOffset":20,
 
        "HorizontalSide":2,
 
        "QueryServiceInterval":6000,
        "ResultLabelID":"result",
 
        "ServiceMethod":"GetNotification",
        "ServicePath":"NotificationService.asmx",
 
        "VerticalOffset":20,
        "VerticalSide":2,
 
        "id":"pne"
      }, 
      null, 
      null, 
      $get("thePanel")
    );
  }
);
// -->
</script>

这也正是ASP.NET AJAX客户端的行为的声明方法。

ASP.NET AJAX的客户端部分设计极为巧妙,非常值得我们去仔细研究。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap