您好,欢迎来到12图资源库!分享精神,快乐你我!我们只是素材的搬运工!!
  • 首 页
  • 当前位置:首页 > 网站教程 > AJAX教程 >
    利用MS AJAX扩展服务器端控件
    时间:2017-06-22 11:05 来源: 作者: 浏览:收藏 挑错 推荐 打印
    通过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();
        }
        }
        }
    [nextpaege]
        七、创建客户端控件。为客户端控件注册一个命名空间,并实现各个属性和事件:
        // 为控件注册命名控件
        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>

    (责任编辑:12图资源库)