利用MS AJAX 扩展服务器端控件

　2007-01-30 11:17:09　来源：WEB开发网　　　

核心提示：通过MS Ajax可以扩展一个服务器端控件在客户端呈现后的特性，使其界面更加友好，利用MS AJAX 扩展服务器端控件，实例代码:IScriptControl.rar 一、创建网站，选择asp.net AJAX-Enabled Web Site. 二、向项目中添加一个类，入下：protected overri

通过MS Ajax可以扩展一个服务器端控件在客户端呈现后的特性，使其界面更加友好。
　　　实例代码:IScriptControl.rar
　　　一、创建网站，选择asp.net AJAX-Enabled Web Site.
　　　二、向项目中添加一个类，使其派生自TextBox，并实现IScriptControl接口。如下代码实例：

public class SampleTextBox : TextBox, IScriptControl

　　三、这个控件我们将实现两个属性：
　　　　　　　 HighlightCSSClass　　　　控件得到焦点后的样式。当控件得到焦点的时候使其能够高亮显示。
　　　　　　　 NoHighlightCssClass　　失去焦点的控件的样式。

public string HighlightCssClass
　　　 {
　　　　　 get { return _highlightCssClass; }
　　　　　 set { _highlightCssClass = value; }
　　　 }

　 public string NoHighlightCssClass
　　　 {
　　　　　 get { return _noHighlightCssClass; }
　　　　　 set { _noHighlightCssClass = value; }
　　　 }

　四、接口IScriptControl 的实现。
　　　　　　　 GetScriptDescriptors()　返回一个包含控件客户端实例的属性和事件句柄的 ScriptDescriptor 类型的数组。
　　　　　　　 GetScriptReferences()　返回一个包含控件客户端 javaScript 代码的ScriptReference 类型的数组。
　　　　　　　在这个实例中，我们用四个函数来实现这两个函数。代码入下：
PRotected virtual IEnumerable<ScriptReference> GetScriptReferences()
　　　 {
　　　　　 ScriptReference reference = new ScriptReference();
　　　　　 reference.Path = ResolveClientUrl("SampleTextBox.js");

　　　 return new ScriptReference[] { reference };
　　　 }

　 protected virtual IEnumerable<ScriptDescriptor> GetScriptDescriptors()
　　　 {
　　　　　 ScriptControlDescriptor descriptor = new ScriptControlDescriptor("Samples.SampleTextBox", this.ClientID);
　　　　　 descriptor.AddProperty("highlightCssClass", this.HighlightCssClass);
　　　　　 descriptor.AddProperty("nohighlightCssClass", this.NoHighlightCssClass);

　　　 return new ScriptDescriptor[] { descriptor };
　　　 }

　 IEnumerable<ScriptReference> IScriptControl.GetScriptReferences()
　　　 {
　　　　　 return GetScriptReferences();
　　　 }

　 IEnumerable<ScriptDescriptor> IScriptControl.GetScriptDescriptors()
　　　 {
　　　　　 return GetScriptDescriptors();
　　　 }　　　五、这册控件。代码比较简单，所以就不再多加讲述，入下：
protected override void OnPreRender(EventArgs e)
　　　 {
　　　　　 if (!this.DesignMode)
　　　　　 {
　　　　　　　 // Test for ScriptManager and register if it exists
　　　　　　　 sm = ScriptManager.GetCurrent(Page);

　　　　　 if (sm == null)
　　　　　　　　　 throw new HttpException("A ScriptManager control must exist on the current page.");

　　　　　 sm.RegisterScriptControl(this);
　　　　　 }

　　　 base.OnPreRender(e);
　　　 }

　 protected override void Render(HtmlTextWriter writer)
　　　 {
　　　　　 if (!this.DesignMode)
　　　　　　　 sm.RegisterScriptDescriptors(this);

　　　 base.Render(writer);
　　　 }
　　　　六、下边是我们新添加的类的完整代码：
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections.Generic;

namespace TextBoxExtender
{
　 /**//// <summary>
　 /// SampleTextBox 的摘要说明
　 /// </summary>
　 public class SampleTextBox : TextBox, IScriptControl
　 {
　　　 private string _highlightCssClass;
　　　 private string _noHighlightCssClass;
　　　 private ScriptManager sm;

　 public string HighlightCssClass
　　　 {
　　　　　 get { return _highlightCssClass; }
　　　　　 set { _highlightCssClass = value; }
　　　 }

　 public string NoHighlightCssClass
　　　 {
　　　　　 get { return _noHighlightCssClass; }
　　　　　 set { _noHighlightCssClass = value; }
　　　 }

　 protected override void OnPreRender(EventArgs e)
　　　 {
　　　　　 if (!this.DesignMode)
　　　　　 {
　　　　　　　 // Test for ScriptManager and register if it exists
　　　　　　　 sm = ScriptManager.GetCurrent(Page);

　　　　　 if (sm == null)
　　　　　　　　　 throw new HttpException("A ScriptManager control must exist on the current page.");

　　　　　 sm.RegisterScriptControl(this);
　　　　　 }

　　　 base.OnPreRender(e);
　　　 }

　 protected override void Render(HtmlTextWriter writer)
　　　 {
　　　　　 if (!this.DesignMode)
　　　　　　　 sm.RegisterScriptDescriptors(this);

　　　 base.Render(writer);
　　　 }

　 protected virtual IEnumerable<ScriptReference> GetScriptReferences()
　　　 {
　　　　　 ScriptReference reference = new ScriptReference();
　　　　　 reference.Path = ResolveClientUrl("SampleTextBox.js");

　　　 return new ScriptReference[] { reference };
　　　 }

　 protected virtual IEnumerable<ScriptDescriptor> GetScriptDescriptors()
　　　 {
　　　　　 ScriptControlDescriptor descriptor = new ScriptControlDescriptor("Samples.SampleTextBox", this.ClientID);
　　　　　 descriptor.AddProperty("highlightCssClass", this.HighlightCssClass);
　　　　　 descriptor.AddProperty("nohighlightCssClass", this.NoHighlightCssClass);

　　　 return new ScriptDescriptor[] { descriptor };
　　　 }

　 IEnumerable<ScriptReference> IScriptControl.GetScriptReferences()
　　　 {
　　　　　 return GetScriptReferences();
　　　 }

　 IEnumerable<ScriptDescriptor> IScriptControl.GetScriptDescriptors()
　　　 {
　　　　　 return GetScriptDescriptors();
　　　 }
　 }
}

　　七、创建客户端控件。为客户端控件注册一个命名空间，并实现各个属性和事件：
// 为控件注册命名控件
Type.registerNamespace('Samples');

//
// 定义控件的属性
//
Samples.SampleTextBox = function(element) {
　 Samples.SampleTextBox.initializeBase(this, [element]);

　 this._highlightCssClass = null;
　 this._nohighlightCssClass = null;
}

//
// 为控件创建属性
//

Samples.SampleTextBox.prototype = {

　 initialize : function() {
　　　 Samples.SampleTextBox.callBaseMethod(this, 'initialize');
　　　
　　　 this._onfocusHandler = Function.createDelegate(this, this._onFocus);
　　　 this._onblurHandler = Function.createDelegate(this, this._onBlur);

　 $addHandlers(this.get_element(),
　　　　　　　　　　 { 'focus' : this._onFocus,
　　　　　　　　　　　 'blur' : this._onBlur },
　　　　　　　　　　 this);
　　　
　　　 this.get_element().className = this._nohighlightCssClass;
　 },
　
　 dispose : function() {
　　　 $clearHandlers(this.get_element());
　　　
　　　 Samples.SampleTextBox.callBaseMethod(this, 'dispose');
　 },

　 //
　 // 事件委托
　 //
　
　 _onFocus : function(e) {
　　　 if (this.get_element() && !this.get_element().disabled) {
　　　　　 this.get_element().className = this._highlightCssClass;　　　　
　　　 }
　 },
　
　 _onBlur : function(e) {
　　　 if (this.get_element() && !this.get_element().disabled) {
　　　　　 this.get_element().className = this._nohighlightCssClass;　　　　
　　　 }
　 },

　 //
　 // 控件属性
　 //
　
　 get_highlightCssClass : function() {
　　　 return this._highlightCssClass;
　 },

　 set_highlightCssClass : function(value) {
　　　 if (this._highlightCssClass !== value) {
　　　　　 this._highlightCssClass = value;
　　　　　 this.raisePropertyChanged('highlightCssClass');
　　　 }
　 },
　
　 get_nohighlightCssClass : function() {
　　　 return this._nohighlightCssClass;
　 },

　 set_nohighlightCssClass : function(value) {
　　　 if (this._nohighlightCssClass !== value) {
　　　　　 this._nohighlightCssClass = value;
　　　　　 this.raisePropertyChanged('nohighlightCssClass');
　　　 }
　 }
}

// Optional descriptor for JSON serialization.
Samples.SampleTextBox.descriptor = {
　 properties: [　 {name: 'highlightCssClass', type: String},
　　　　　　　　　 {name: 'nohighlightCssClass', type: String} ]
}

// Register the class as a type that inherits from Sys.UI.Control.
Samples.SampleTextBox.registerClass('Samples.SampleTextBox', Sys.UI.Control);

if (typeof(Sys) !== 'undefined') Sys.application.notifyScriptLoaded();

最后将如下代码复制到Default.aspx页面，用以测试空间：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Namespace="TextBoxExtender" TagPrefix="sample" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
　 <title>ASP.NET AJAX Control Sample</title>
　 <style type="text/css">
　 .LowLight
　 {
　　　 background-color:#EEEEEE;
　 }
　
　 .HighLight
　 {
　　　 background-color:Ivory;
　 }
　 </style>
</head>
<body>
　 <form id="form1" runat="server">
　　　 <asp:ScriptManager ID="ScriptManager1" runat="server" >
　　　　　 <Scripts>
　　　　　　　 <asp:ScriptReference Path="JScript.js" />
　　　　　 </Scripts>
　　　 </asp:ScriptManager>
　　　 <div>
　　　　　 <table border="0" cellpadding="2">
　　　　　　 <tr>
　　　　　　　 <td><asp:Label runat="server" ID="Label1" AssociatedControlID="TextBox1">Name</asp:Label></td>
　　　　　　　 <td><sample:SampleTextBox ID="TextBox1" runat="server" NoHighlightCssClass="LowLight" HighlightCssClass="HighLight" /></td>
　　　　　　 </tr>
　　　　　　 <tr>
　　　　　　　 <td><asp:Label runat="server" ID="Label2" AssociatedControlID="TextBox2">Phone</asp:Label></td>
　　　　　　　 <td><sample:SampleTextBox ID="TextBox2" runat="server" NoHighlightCssClass="LowLight" HighlightCssClass="HighLight" /></td>
　　　　　　 </tr>
　　　　　　 <tr>
　　　　　　　 <td><asp:Label runat="server" ID="Label3" AssociatedControlID="TextBox3">E-mail</asp:Label></td>
　　　　　　　 <td><sample:SampleTextBox ID="TextBox3" runat="server" NoHighlightCssClass="LowLight" HighlightCssClass="HighLight" /></td>
　　　　　　 </tr>
　　　　　 </table>
　　　　　
　　　　　 <asp:Button runat="server" ID="Button1" Text="Submit Form" />
　　　 </div>
　 </form>
</body>
</html>
http://www.cnblogs.com/hblynn/archive/2007/01/29/633619.html