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

【 tulaoshi.com - Web开发 】

　　通过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 IEnumerableScriptReference GetScriptReferences()
　　        {
　　            ScriptReference reference = new ScriptReference();
　　            reference.Path = ResolveClientUrl("SampleTextBox.js");

　　            return new ScriptReference[] { reference };
　　        }

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

　　            return new ScriptDescriptor[] { descriptor };
　　        }

　　        IEnumerableScriptReference IScriptControl.GetScriptReferences()
　　        {
　　            return GetScriptReferences();
　　        }

　　        IEnumerableScriptDescriptor 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 IEnumerableScriptReference GetScriptReferences()
　　        {
　　            ScriptReference reference = new ScriptReference();
　　            reference.Path = ResolveClientUrl("SampleTextBox.js");

　　            return new ScriptReference[] { reference };
　　        }

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

　　            return new ScriptDescriptor[] { descriptor };
　　        }

　　        IEnumerableScriptReference IScriptControl.GetScriptReferences()
　　        {
　　            return GetScriptReferences();
　　        }

　　        IEnumerableScriptDescriptor 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"
　　    titleASP.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
　　                tdasp:Label runat="server" ID="Label1" AssociatedControlID="TextBox1"Name/asp:Label/td
　　                tdsample:SampleTextBox ID="TextBox1" runat="server" NoHighlightCssClass="LowLight" HighlightCssClass="HighLight" //td
　　              /tr
　　              tr
　　                tdasp:Label runat="server" ID="Label2" AssociatedControlID="TextBox2"Phone/asp:Label/td
　　                tdsample:SampleTextBox ID="TextBox2" runat="server" NoHighlightCssClass="LowLight" HighlightCssClass="HighLight" //td
　　              /tr
　　              tr
　　                tdasp:Label runat="server" ID="Label3" AssociatedControlID="TextBox3"E-mail/asp:Label/td
　　                tdsample: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