使用Javascript,CSS和Ajax创建ASP_NET自定义控件

胡火云

浏览: 45888 次
性别:
来自: 武汉

最近访客更多访客>>

jov123

wilerlider

风不会停息

wangpeng2313

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

在MSDN上看到的文章，原文名称为Who Is Looking: Building a Custom ASP.NET Control that uses Javascript, Cascading Style Sheets, and Ajax，下载以后经过测试，感觉确实不错，下面根据我的理解整理了一下其实现的思路，推荐给大家。
命如其名，这个控件的功能就是在某个客户浏览网页的时候，这个客户的消息就会出现在浏览这个网页的所有客户端上。当某个客户端离开这个网页的时候，这个客户的消息就会从所有别的客户端消失。
程序运行效果：

创建ASP.NET自定义控件
在Visual Studio中，所有的ASP.NET 2.0控件都是自定义控件，创建自己的自定义控件一般需要完成以下三步。
(1)在站点APP_Code下创建一个新类；
(2)修改这个类，让它成为WebControl类(包含在System.Web.UI.WebControls命名空间)的派生类；
(3)重写基类(即WebControl类)的RenderContents()方法。

下面是一个最简单的ASP.NET控件，它的功能只有一个，显示"Hellow World"。

代码

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->using System;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace myControls

{

  public class HelloWorld : WebControl

  {

    protected override void RenderContents(HtmlTextWriter writer)

    {

      writer.Write("Hello World");

    }

  }

}

自定义控件创建好之后，有三种方法将其添加到网页中。
第一种选择是首先在aspx文件添加注册控件的代码：

`1`	`<%@ Register TagPrefix="custom"Namespace="myControls"%>`

其中TagPrefix属性的值可随意选取，Namespace属性的值必须与你创建的自定义控件一致，然后在该页的任意位置均可引用此控件。

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><custom:HelloWorld ID="HelloWorld1" runat="server" />

第二种选择是在Web.Config文件中注册此控件，这样你就可以在所有的aspx页面中引用此控件。相关配置如下：

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><pages>

  <controls>

    <add tagPrefix="custom" namespace="myControls"/>

  </controls>

</pages>

最后一种方式是将控件添加到Visual Studio工具箱中，使用时直接拖拉到网页中。但这个时候你不能在APP_Code文件夹下创建这个控件，而必须将其创建为独立的程序集，具体方法本文后面将会提到。创建好独立的自定义控件后，右键单击Visual Studio工具箱，选择“选择项”，之后会弹出一个对话框，从中选择你自己的程序集，自定义控件将自动出现在工具箱上。

嵌入Javascript
为了获得更好的客户端效果，我们需要引入Javascript和CSS样式表。在ASP.NET中，有一个类叫作ClientScriptManager，可以很方便的对Javascript进行操作，其中比较重要的方法有：

RegisterClientScriptBlock()
RegisterStartupScript()
RegisterClientScriptInclude()
GetWebResourceUrl()
RegisterClientScriptBlock和RegisterStartupScript方法允许你在网页中添加内置Javascript脚本，这两个方法一般用来添加比较简单的Javascript脚本，如果你需要添加复杂的Javascript脚本，可以使用 RegisterClientScriptInclude或 GetWebResourceUrl()方法。RegisterClientScriptInclude()方法将会在网页中加入这样的引用：

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><script type="text/Javascript" src="SomeScript.js"></script>

这种方式的缺点在于发布程序的时候需要将独立的js文件一起发布，解决这个问题的办法就是使用GetWebResourceUrl()方法，通过这个方法可以把js文件直接嵌入到控件当中，换句话说就是你发布的程序集将同时包含自定义控件和独立的js文件。与前面注册控件一样，在APP_Code里创建的自定义控件是不能同时包含js文件的，需要将其发布为独立的程序集。
首先我们在Visual Studio里创建一个新的项目，类型选择类库。为了在类库工程里创建自定义控件，首先需要添加对System.Web.Dll的引用，然后选择工程里的 js文件，将其生成事件属性修改为嵌入资源。接下来需要在AssemblyInfo中对每一个嵌入的资源添加WebResource属性，只需打开 Properties里的AssemblyInfo.cs文件，添加以下代码：

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->[assembly: WebResource("WhoIsLooking.WhoIsLooking.js", "text/javascript")]

OnPreRender()方法中对js文件的调用代码：

代码

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->// Add Javascript include

string scriptUrl = Page.ClientScript.GetWebResourceUrl( this.GetType(),

"WhoIsLooking.WhoIsLooking.js");

Page.ClientScript.RegisterClientScriptInclude("WhoIsLooking", scriptUrl);

嵌入CSS样式表
方法与嵌入Javascript类似，在AssemblyInfo.cs中添加：

[Assembly: WebResource("WhoIsLooking.WhoIsLooking.css", "text/css")]

在OnPreRender方法中添加：

// Add style sheet to parent page

string cssUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(),

"WhoIsLooking.WhoIsLooking.css");

HtmlLink cssLink = new HtmlLink();

cssLink.Href = cssUrl;

cssLink.Attributes.Add("rel", "stylesheet");

cssLink.Attributes.Add("type", "text/css");

this.Page.Header.Controls.Add(cssLink);

// Add class name

this.CssClass = "WhoIsLooking";
使用Ajax
WhoIsLooking控件采用Ajax技术实时显示访客信息，Ajax是Asynchronous Javascript和 XML的缩写，利用这个技术可以在不刷新整个页面的情况下实现客户端与服务器端之间的数据传送。为了在ASP.NET自定义控件中实现Ajax需要完成以下三个步骤：
1 使用 GetCallbackEventReference()发起客户端请求；
2 实现ICallBackEventHandler 接口响应客户端的请求，这个接口有两个方法需要实现：RaiseCallbackEvent()方法以及GetCallbackResult()方法。
3 创建Javascript客户端函数获取返回的数据并进行相应的操作。

WhoIsLooking每5秒钟发起一次请求，需在OnPreRender()方法中添加以下代码：

string callback = Page.ClientScript.GetCallbackEventReference

(

this,

null,

"WhoIsLooking.UpdateDisplay",

String.Format("'{0}'", this.ClientID),

"WhoIsLooking.CallbackError",

true);

string startupScript = String.Format("setInterval( \"{0}\", {1} );", callback, _PollingInterval * 1000);

Page.ClientScript.RegisterStartupScript(this.GetType(), "WhoIsLooking", startupScript, true);

接下来需要重写RaiseCallbackEvent() 及GetCallbackResult()方法，RaiseCallbackEvent()方法将当前用户加入访客列表，同时也将离开的用户从列表中删除。GetCallbackResult()返回访客的信息，包括用户帐号，姓名，停留时间，浏览器信息，主机名，操作系统信息等。该方法的返回值为一个 JSON数组，JSON是Ajax请求中表示信息的标准格式（关于JSON的更多介绍，请访问json.net）。例如，如果同时有两个用户正在浏览当前网页，JSON的值将会是这样：

[{userId:"fooglm45cjcycw55qi4yluvk",userName:"SUPEREXPERT\\Steve", duration:"0 minute(s)", browser: "IE 7.0", remoteHost: "superexpert.com", platform: "WinXP"},{userId:"1kqatn55sxc4vi55ummxghil",userName:"SUPEREXPERT\\Bill", duration:"0 minute(s)", browser: "Firefox 1.5.0.11", remoteHost: "superexpert.com", platform: "WinXP"}]

最后，WhoIsLooking控件通过UpdateDisplay()方法在客户端显示用户信息，该方法为每一个用户创建一个<div>层存放用户信息。

分享到：