利用MS AJAX 扩展服务器端控件
通过MS AJAX可以扩展一个服务器端控件在客户端呈现后的特性，使其界面更加友好。
实例代码:IScriptControl.rar
一、创建网站，选择ASP.NET AJAX-Enabled Web Site.
二、向项目中添加一个类，使其派生自TextBox，并实现IScriptControl接口。如下代码实例：
三、这个控件我们将实现两个属性：
HighlightCssClass 控件得到焦点后的样式。当控件得到焦点的时候使其能够高亮显示。
NoHighlightCssClass 失去焦点的控件的样式。
四、接口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>
实例代码:IScriptControl.rar
实例代码: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; }
}
{
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>实例代码:IScriptControl.rar
