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

您现在的位置：动力中国 >> 网络编程 >> Ajax教程 >> 文章正文

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

http://www.domcn.org 文章来源：本站收藏点击数：

关键字:利用MS AJAX 扩展服务器端控件

通过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 };
}

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