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

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

        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>
http://www.cnblogs.com/hblynn/archive/2007/01/29/633619.html

时间： 2024-11-05 02:38:22

利用MS AJAX 扩展服务器端控件的相关文章

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

通过MS AJAX可以扩展一个服务器端控件在客户端呈现后的特性,使其界面更加友好.实例代码:IScriptControl.rar 一.创建网站,选择ASP.NET AJAX-Enabled Web Site.二.向项目中添加一个类,使其派生自TextBox,并实现IScriptControl接口.如下代码实例: public class SampleTextBox : TextBox, IScriptControl 三.这个控件我们将实现两个属性:HighlightCSSClass 控件得到焦点

转贴自MS：扩展 TreeView 控件 （1）

Windows 窗体控件开发示例 Duncan MackenzieMicrosoft Developer Network 2002 年 5 月 摘要:讲述了如何向 TreeView 控件添加数据绑定功能,它是一系列 Microsoft Windows 控件开发示例之一.您可以将本文与相关的概述文章结合起来阅读.您可以从 MSDN Code Center 下载 WinFormControls.exe(英文)源代码.(请注意,在示例文件中,程序员的注释使用的是英文,本文中将其译为中文是为了便于读者理

使用JavaScript触发asp.net服务器端控件事件

当一个服务器控件要同时下列两种事时: 1.服务器端的点击事件 2.客户端的点击时执行ajax请求 需要的效果: 先执行ajax请求,然后根据ajax的结果,决定是否执行服务器的响应事件 当一个服务器控件同时执行这两种操作时,由于网速,响应速度,网络环境等多方面的因素,要么是后者的结果将前者的结果覆盖,要么是前者的结果将后者覆盖,这样很难达到所需要的效果. 于是,我想到了一个折中的办法. 一,将服务器控件"隐藏"(注意,如果直接将 服务器端控件的属于visiable = false 的话

ajax-Jquery Mobile Ajax ASP.NET控件 无刷新页面查询，添加，修改，删除

问题描述 Jquery Mobile Ajax ASP.NET控件 无刷新页面查询,添加,修改,删除 Jquery Mobile Ajax 技术用ASP.NET控件怎么实现无刷新页面查询,添加,修改,删除功能? 现在刷新一次才能执行JavaScript代码,否则没反应,有时候样式也没了. 我写的代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs&q

ASP.NET拾萃——服务器端控件篇（序）

我们知道,ASP.NET的Web窗体新增了对服务器端控件的支持,其特征是在控件的HTML标记内加入了runat="server"属性.拥有这个标记的控件,其实例将在服务器端生成,由.NET框架负责转换为普通的HTML标记并输出至客户端.这个转换的过程是ASP.NET一个极为重要的基础.为什么呢? 熟悉HTML开发的朋友应该非常了解编写动态网页所需要的控件(FORM.INPUT--).而ASP.NET为我们提供了更为丰富的用户界面交互元素--服务器端控件(简单的有Button.Label

ASP.NET拾萃——服务器端控件篇（二）

经常在网上看到类似的问题:如何让ASP.NET服务器端控件响应客户端事件? ASP.NET服务器端控件能够响应服务器端事件,使我们能够像编写Windows程序一样编写网页.可有时我们并不需要让客户端运行的控件和服务器发生交互,这样做的开销是很大的:不仅占用网络带宽.服务器的CPU资源,还会产生一次PostBack导致客户端浏览器"刷新"影响界面效果. 如果直接在Web窗体的HTML代码内为服务器端控件添加客户端事件代码,就像这样: <asp:Button id="But

ASP.NET拾萃——服务器端控件篇(一)

技巧一:在客户端的javascript脚本中获取服务器端控件的值 以前,当我们需要在脚本里访问页面内一个对象的时候,一般都是通过对象的id或name.就像这样-- // ... function getText() {   return document.form1.Text1.value; // Text1就是对象的id } // ... 现在,ASP.NET让我们越来越习惯使用TextBox作为用户输入的途径.如果我们想在客户端脚本里访问一个TextBox,原先的做法就行不通了-- // .

jquery dialog open后,服务器端控件失效的快速解决方法

 本篇文章是对jquery dialog open后,服务器端控件失效的快速解决方法.进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 jquery dialog为我们提供了非常漂亮实用的对话框,比单调的alert.confirm.prompt好用很多.    在使用jquery与.net共同开发时,直接调用jquery dialog的open后,服务器端控件全部失效了,不能执行相应的后台代码.只是源于jquery默认把dialog添加到body中,而不是原来所在的服务器端的f

怎么给控件添加二次扩展的控件事件

问题描述 怎么给控件添加二次扩展的控件事件 在VB6.0语言中,控件缺少一些事件,比如菜单条缺少mousemove事件,而toolbar也缺少mouseenter控件,怎么扩展这些事件呢? 解决方案 可以用setwindowlong来实现子类化,拦截对应的 windows 消息来处理. 解决方案二: 给用户控件添加事件Android为自定义控件添加事件用代码给控件添加事件