通過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>