var beginMoving=false;
var ff=window.navigator.appName=="Netscape"?true:false;
var ie4=document.all?true:false;
var dragClickX, dragClickY;
var beginOpen=true;
var sourceObj=null;
var objectObj=null;
var sourceObjId;
function MouseDownToMove(obj,e)
{
   sourceObj=null;
   objectObj=null;
   beginOpen=true;
   e=e||window.event;
   beginMoving=true;
   sourceObj=obj;
   sourceObj.style.zIndex=1;
   dragClickY = e.clientY;
   dragClickX = e.clientX;
   if(ie4)
   {
      sourceObj.setCapture();
   }
   if(ff)
   {
      document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP | Event.MOUSEOVER);
   }
}

function MouseMoveToMove(e)
{
 beginOpen=false;
 if(beginMoving!=true) return false;
 if(sourceObj==null)return;
 e=e||window.event;
 var x = e.clientX-dragClickX;
 var y = e.clientY-dragClickY;
 sourceObj.style.left = x+"px";
 sourceObj.style.top = y+"px";
}
function MouseUpToMove(e)
{
    if(sourceObj==null)return;   
    if(ie4)
 {
    sourceObj.releaseCapture();
 }
 sourceObj.style.zIndex=0;
    sourceObj.style.top=0;
    sourceObj.style.left=0;
    beginMoving=false;
 window.setTimeout("InsertSwapNode()",20);
}

function MouseOverToMove(e)
{
   if(sourceObj==null)return;
   e=e||window.event;
   objectObj = e.srcElement||e.target;
}

namespace drop
{
 /// <summary>
 /// WebForm1 的摘要说明。
 /// </summary>
 public class WebForm1 : System.Web.UI.Page
 {
  protected System.Web.UI.WebControls.DropDownList dListParent;
  protected System.Web.UI.WebControls.Button Button1;
  protected System.Web.UI.WebControls.DropDownList dListChild;
 
  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此处放置用户代码以初始化页面
   //if(!IsPostBack)
   //{
    BindDrop();//这里不能够放到if(!IsPostBack)里面
   //}
  }

  protected void BindDrop()
  {
   //首先我想父dropdownlist也绑定数据库,后面想没必要
   //if(!IsPostBack)
   //{
    //绑定父dListParent
   // BindParent();
   //}
     //获得传递过来的parent_id值,如果是第一次请求他为null
   string str = Request.QueryString["parent_id"];
   string str1 = dListParent.SelectedValue;;
   //Response.Write(str1);
   //如果str加个字符串!=原来的字符串则说明触发过dListParent的onchange事件
   if((str+"abc")!="abc")
   {
      //绑定 dListChild控件
    BindChild(str);//把传来的父DropDownList的value做为参数
      }
   else
    BindParent(str1);
  }

  protected void BindParent(string str)
  {
   //如果是第一次请求或者是刷新这个页面则根据dListParent的值来选择
   //把参数转化成int
   int i = Convert.ToInt32(str);
   dListChild.Items.Clear();
   dListChild.Items.Add(new ListItem("全部型号","0"));
   //得到数据库连接字符串
   string connStr = ConfigurationSettings.AppSettings["ConnString"].ToString();
   //初始化个conn对象
   SqlConnection conn = new SqlConnection(connStr);
   //数据库语句
   string commStr = string.Format("select type_value,type_text from phone_type where parent_id={0}",i);
   //建立数据库命令对象
   SqlCommand comm = new SqlCommand(commStr,conn);
   //打开数据库
   conn.Open();
   //执行命令
   SqlDataReader dr = comm.ExecuteReader();
   //循环dr，给dListParent添加条目
   while(dr.Read())
   {
      dListChild.Items.Add(new ListItem(dr[1].ToString(),dr[0].ToString()));
    //也可以这样
    //dListParent.Items.Add(new ListItem(dr["phone_text"].ToString(),dr["phone_value"].ToString()));
   }
   //添加下面这话的意思是当点提交按钮提交窗体的时候第二个dListChild的状态能够得到保存
   dListChild.SelectedValue = Request.Form["dListChild"];
   dr.Close();
   conn.Close();
  }

  protected void BindChild(string str)
  {
     //通过js给包括dropdownlist任何控件添加的内容不会被保存状态
   //把参数转化成int
   int i = Convert.ToInt32(str);
   //定义个字符串用保存从数据库返回的数据
   string result = "";
   //先清空输出的东西
   Response.Clear();
   string connStr = ConfigurationSettings.AppSettings["ConnString"].ToString();
   SqlConnection conn = new SqlConnection(connStr);
   SqlCommand comm = conn.CreateCommand();
   string commStr = string.Format("select type_value,type_text from phone_type where parent_id = {0}",i);
   comm.CommandText = commStr;
   conn.Open();
   SqlDataReader dr = comm.ExecuteReader();
   while(dr.Read())
   {
    result += ","+dr[0].ToString() +"|" + dr[1].ToString();
    //dListChild.Items.Add(new ListItem(dr[1].ToString(),dr[0].ToString()));
   }
   //把从数据库得到的信息输出到客户端
   Response.Write(result);
   //输出完成关闭Response,以免造成不必要的输出
   Response.Flush();
   Response.Close();
   dr.Close();
   conn.Close();
  }
  #region Web 窗体设计器生成的代码
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);
  }
  
  /// <summary>
  /// 设计器支持所需的方法 - 不要使用代码编辑器修改
  /// 此方法的内容。
  /// </summary>
  private void InitializeComponent()
  {   
   this.Button1.Click += new System.EventHandler(this.Button1_Click);
   this.Load += new System.EventHandler(this.Page_Load);

  }
  #endregion

  private void Button1_Click(object sender, System.EventArgs e)
  {
   Response.Write(Request.Form["dListChild"].ToString());
  }
 }
}

数据表:
主键id     parent_id(int)          type_value(int)     type_text(varchar)
int递增   父下拉框的value值        下拉框的value        下拉框的text

Step-by-step instructions to help you download and install the ASP.NET "Atlas" Web Site Template, and to create your first Web site using it.  
一步步告诉你怎么去下载及安装atlas,而且怎么样去创建你的第一个atlas站点
Installing the Hands-on Lab ASP.NET "Atlas" Web Site Template

Step-by-step instructions to help you download and install the ASP.NET "Atlas" hands-on lab.  
一步步告诉你怎么下载及安装atlas教程
2,ASP.NET "Atlas" 官方网站
3,,ASP.NET "Atlas" 预览文档
4,Atlas  快速入门教程

3,先安装vsnet2005,这不说拉

我下了两天，安装好之后，双击vsi文件竟然没有反映啊！！！晕死，后面在网上找资料才发现.vsi扩展名文件的安装，其实质是调用C:\Program Files\Common Files\Microsoft Shared\MSEnv目录下的VSContentInstaller.exe进行安装的。我一找我的这个目录，晕死，我才发现我的目录下根本就没有这个文件啊！怪事，后面一看我的vs2005的大小，是3.15G，那绝对是我的安装文件有问题拉，因为其他的是3.5G，所以我又只能够重新bt下载。




4,安装atlas,等下,我的vsnet2005正在下载呢.
看http://msdn.microsoft.com/asp.net/future/atlastemplate/default.aspx上的安装说明,我简单翻译下:
呵呵,还是在吴旗娃师傅的指教下完成的啊
1>下载beta 2或者RTM的vsi文件,以便你去创建一个新的空白的atlas站点.你可能需要把本页的安装说明拷贝到你的机器上,以便你安装的时候参考
2>下载完后,双击ASPNETAtlas.VSI 文件开始安装
3>在出现"Choose Content to install"窗口的时候,你可以选择for vb,或者c#或者both,并且确保各自的选择框被选上.
4>单击下一步
5>如果你碰到警告窗口说你的内容没有被签名,问你是否继续的时候请选择yes
6>单击finish
7>单击完成

<%@ WebService Language="C#" Class="Quickstart.Samples.ComplexService" %>

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;

using Quickstart.Samples;//注意这里要using

namespace Quickstart.Samples
{
    public class Animal
    {
        String _name;
        String _color;

        public String Name
        {
            get { return _name; }
            set { _name = value; }
        }

        public String Color
        {
            get { return _color; }
            set { _color = value; }
        }
    };    
    
    
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class ComplexService : System.Web.Services.WebService
    {
        [WebMethod]
        public Animal EchoAnimal(Animal a)
        {
            return a;//这里传递和返回的都是个Animal对象
        }
    }

}












下面是aspx页面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Complex Type Service</title>

    <atlas:Script ID="Script1" runat="server" Path="~/ScriptLibrary/AtlasCompat.js" Browser="Mozilla" />
    <atlas:Script ID="Script2" runat="server" Path="~/ScriptLibrary/AtlasCompat.js" Browser="Firefox" />
    <atlas:Script ID="Script3" runat="server" Path="~/ScriptLibrary/Atlas.js"/>

    <!-- get script proxy -->
    <script type="text/javascript" language="JavaScript" src="ComplexService.asmx/js">
    </script>
</head>
<body>
    <h3>
        Name:<input id="inputName" />
        Color:<input id="inputColor" />
        <button id="buttonGo" onclick="return OnbuttonGo_click()">GO</button>
    </h3>

    <script type="text/javascript" language="JavaScript">
    function OnbuttonGo_click() 
    {
        //Call script proxy passing the input element data

        var i1 = document.getElementById('inputName');
        var i2 = document.getElementById('inputColor');
        //先new一个web 服务中的Animal对象
        var object = new Quickstart.Samples.Animal();

       //给这个对象的属性赋值
        object.Name = i1.value;
        object.Color = i2.value. 
        //传递的是一个Animal对象
        requestComplexService = Quickstart.Samples.ComplexService.EchoAnimal(
            object,         //params
            OnComplete,     //Complete event
            OnTimeout       //Timeout event
            );

        return false;
    }
    
    function OnComplete(result) 
    {
        
 //你可以直接在js里获得他的属性
alert("Name= " + result.Name + " Color= " + result.Color);
    }

    function OnTimeout(result) 
    {
        alert("Timed out");
    }
    </script>

</body>
</html>

<%@ WebService Language="C#" Class="Quickstart.Samples.SimpleService" %>

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;

namespace Quickstart.Samples
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class SimpleService : System.Web.Services.WebService
    {
        [WebMethod]
        public string EchoString(string s)
        {
            return s;
        }
    }

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Simple Service</title>

    <atlas:Script ID="Script1" runat="server" Path="~/ScriptLibrary/AtlasCompat.js" Browser="Mozilla" />
    <atlas:Script ID="Script2" runat="server" Path="~/ScriptLibrary/AtlasCompat.js" Browser="Firefox" />
    <atlas:Script ID="Script3" runat="server" Path="~/ScriptLibrary/AtlasRuntime.js"/>

    <!-- get script proxy -->
    <script type="text/javascript" language="JavaScript" src="SimpleService.asmx/js">
    </script>
</head>
<body>
    <h3>
        Enter your name:<input id="inputName" />
        <button id="buttonGo" onclick="return OnbuttonGo_click()">GO</button>
    </h3>

    <script type="text/javascript" language="JavaScript">
    function OnbuttonGo_click() 
    {
        //Call script proxy passing the input element data
        requestSimpleService = Quickstart.Samples.SimpleService.EchoString(
            document.getElementById('inputName').value,       //params
            OnComplete,     //Complete event
            OnTimeout       //Timeout event
            );
        return false;
    }
    
    function OnComplete(result) 
    {
        alert(result);
    }

    function OnTimeout(result) 
    {
        alert("Timed out");
    }
    </script>

</body>
</html>

与此同时，微软开始了下一个发布版本的研发，其中一个重要的研究方向就是通过Ajax风格的编程在浏览器中实现日益流行的富客户端应用。

今后的IE中将拥有Ajax所需的所有东西——DHTML、JScript和XmlHttp。实际上Outlook Web Access从1998年开始就已经提供了这种伟大的浏览体验了。在ASP.NET 2.0中，微软使用异步回调及舒适的Ajax风格的应用程序的编写更加简单，并且，微软为此提供了大量的内建控件。

目前，几乎所有的浏览器都提供了Ajax所需的技术，使用这种模式的富客户端应用程序也不断出现。今天，世界上出现了不计其数的Ajax风格的站点，包括Google的很多站点、A9和Flickr。微软的很多站点也使用了这项技术，如Start.com和MSN Virtual Earth项目。

Ajax的风行说明用户对于丰富的Web体验的需求日益增长。然而，开发和调试Ajax风格的Web应用程序是一项非常艰难的工作。要编写一个丰富的Web UI，开发者需要详细地掌握DHTML和JavaScript，并且还要掌握各种浏览器之间在设计细节上的不同。然而没有哪些工具能够简化这些应用程序的设计和开发。最后，调试和测试这些应用程序会变得异常困难。

微软致力于简化Ajax风格Web应用的开发，并提供丰富的、可交互的和个性化的用户体验。开发者可以对客户端脚本不甚了解；但他们可以无缝地将浏览器UI与他们编写的其他应用无缝地集成在一起，并且他们可以很容易地开发和调试这些应用程序。

出于这一目的，微软启动了一个新的项目，研发代号为“Atlas”。同时，微软还启动了一个站点来持续更新其核心进展和示例，并围绕它建立一个活跃的社区。在9月份的PDC大会上，开发者可以看到Atlas的技术预览版。

以下是Atlas所拥有的特性。

Atlas客户端脚本框架

Atlas客户端脚本框架是可扩展的、100%面向对象的JavaScript客户端脚本框架，允许开发者很容易地构建拥有丰富的UI功能并且可以连接Web Services的Ajax风格浏览器应用程序。使用Atlas，开发者可以使用DHTML、JavaScript和XMLHTTP来编写Web应用程序，而无须掌握这些技术的细节。

Atlas客户端脚本框架可以在所有的现代浏览器上运行，不论使用的是什么Web服务器。它还完全不需要安装，只要在页面中引用正确的脚本文件即可。

Atlas客户端脚本框架包含下列组件：

l          一个可扩展的核心框架，其中为JavaScript添加了很多新特性，如生存期管理、继承、多播事件处理器和接口

l          一个基础类库，提供了通用特性，如丰富的字符串操作功能、计时器和运行任务等

l          一个UI框架，可以跨浏览器实现HTML的动态行为

l          一个网络栈，用于简化对服务器的连接和对Web Services的访问

l          一组具有丰富UI功能的控件，如自动完成文本框、弹出面板、动画控件和拖放

l          一个浏览器兼容的层（Layer），用于在不同浏览器中定位不同的脚本行为

Atlas的ASP.NET服务器控件

对于ASP.NET应用程序，微软专门设计了一组Ajax风格的服务器控件，并且加强了现有的ASP.NET页面框架和控件，以便支持Atlas客户端脚本框架。

ASP.NET 2.0中有一项称作异步客户端回调（Asynchronous Client Callbacks）的新特性，使得构建从服务器上更新内容时不会引发页面中断的ASP.NET页面变得很容易。异步客户端回调包装了XMLHTTP，能够在很多浏览器上工作。ASP.NET本身就包括了很多使用回调的控件，包括具有客户端分页和排序功能的GridView和DetalsView控件，以及TreeView控件的虚拟列表支持。

Atlas客户端脚本框架将完全支持ASP.NET 2.0回调，但微软希望在今后进一步增强浏览器和服务器之间的集成性。例如，你可以将Atlas客户端控件的数据绑定并指定为服务器上的ASP.NET数据源控件，并且可以从客户端异步地控制Web页面的个性化特征。

ASP.NET Web Services集成 

和任何客户端应用程序一样，一个Ajax风格的Web应用程序通常也需要访问Web服务器的一些功能。Atlas应用程序连接服务器的模型和其他平台类似，都是使用Web Services来实现。

通过ASP.NET Web Services集成，Atlas应用程序将可以在任何支持XMLHTTP的浏览器上通过Atlas客户端用本框架来直接访问任何宿主了ASP.NET的asmx或Indigo服务。该框架将会自动处理、代理和脚本到对象、对象到脚本的序列化问题。通过使用Web Services集成，开发者可以使用单一的编程模型来编写Web Services，并且在任何应用程序中使用它们，不论是基于浏览器的站点上还是智能客户端应用程序中。

Atlas的ASP.NET构建块

在ASP.NET 2.0中，微软构建了一组丰富的构建块服务（Building Block Services），这使得构建强大、个性化的Web应用程序变得不可思议的简单。这些构建块极大地降低了在开发通用的Web应用程序过程中需要编写的代码数量，比如管理用户、通过角色验证用户和存储用户的个性化设置信息等。

使用Atlas，我们可以在任何浏览器上的任何客户端应用程序中向访问Web Services那样访问这些功能。例如，如果你正在开发一个站点来显示用户的TO-DO项目，你可以使用ASP.NET的Profile服务来将他们存放在服务器上的用户自定义配置文件中。这样，即使用户从一台机器转移到另一台机器上，也同样可以访问这些项目。

微软将提供的服务包括（全部是基于ASP.NET 2.0的）：

l          Profile：在服务器上存放每个用户特有的数据

l          UI个性化：在服务器上存放个性化的UI设置信息

l          验证：验证用户

l          角色：基于用户的角色验证用户任务和提供不同的UI

由于这些构建块是基于服务器的，开发者需要对他们应用和其他站点一样的安全模型。这些服务不需要客户端下载任何东西——只要在浏览器中引用脚本代理即可。

所有的ASP.NET 2.0构建块服务都是可插拔的，这使用一种通用的提供者（Provider）模型可扩展模式在后台实现。微软提供的内建提供程序允许开发使用SQL Server数据库或Active Directory作为存储容器，开发者也可以很容易地插接自己的提供程序。例如，你可能希望使用集群而不是数据库服务器来存放用户的配置文件，这时，你只需将你的提供程序插接进来即可——这一切都由开发者来决定。

客户端构建块服务 

除了DHTML、JScript和XMLHTTP，微软还提供了一组附加的服务来加强客户端的功能，并提供增强的体验。

对于这样的服务，本地浏览器缓存就是一个很好的例子。当启用了本地浏览器缓存时，Web站点就可以将内容存储到缓存中，并在需要的时候很快地取出。但浏览器并未提供向缓存中存放数据的API，而且象Google Map或OWA这样的应用程序不得不通过很多工作产生一个唯一的URL，才能使浏览器缓存它。在Atlas中，微软提供了可编程的本地存储/缓存，因此应用程序可以很方便、有效并且安全地在本地缓存数据。

同其它应用程序的集成是检验Web体验是否丰富的另一个新的标准。例如，当一个用户浏览一个拍卖网站并对一件商品出价时，他可能想随时知道这个拍卖什么时候结束，但他如何才能将这个事件添加到个人的日历程序中？Atlas带来了一系列客户端构建块服务，当用户选择“添加到日历”时，浏览器将调用接驳点来获取日历数据，并将其传递到本地的日历程序中。此时页面上无须下载或运行任何特殊的代码或执行任何初始化动作，因此，这比ActiveX要安全得多。

下一步 

随着我们的技术进展，还会发生很多事情。我们现在已经开始研发、开发和调试工具的下一个版本了，因此，我们将很快为这些类型的丰富Web应用程序提供更加伟大的开发体验。

您可能会问的一个问题是：Atlas如何在Avalon和智能客户端上使用？

我们可以看到，Atlas是编写丰富的、可交互的和个性化的Web浏览器应用程序的最好方式，而Avalon是微软的下一代表现层模型，可以在Windows平台上提供最丰富的用户体验。Avalon将使用最新的媒体集成功能和硬件加速设备，提供卓越的视觉体验。Avalon将带来超越浏览器的体验。

当然，当你构建Avalon应用程序的时候，你依然可以重用ASP.NET和Atlas中的编程模型。例如，Avalon客户端上依然可以使用ASP.NET构建块服务和客户端构建块服务。这种模型可以使你平滑地过渡到下一代应用程序。

也就是我们在实验1里面创建的那个web 服务。<serviceMethod>元素也提供了将要调用的web服务的方法的名字以及关于这个方法的详细资料。在他的<bindings>标记里面，他指定了哪个控件的值将被当做参数提交给远程方法。在<completed>标记里面，指定了当远程方法完成之后将要做的事。他通过<method>属性指定了一个本地的atlas方法evaluateIn来得到从服务器端返回的值并且把得到的值赋给本地对象<label>,在这里是通过target来指定的，同时<label>的targetElement属性指定了和页面控件id值是results的span关联起来。在<label>的子元素<bindings>指定了如何绑定从远程方法的返回值给页面上的<span>元素。
好了，完成后的代码如下：

<%@ Page Language="C#" MasterPageFile="~/Default.master" Title="Atlas实验2" %>
<asp:Content ID="Content3" ContentPlaceHolderID="Main" Runat="Server">
   <form action="">
  <div>
    Search for
    <input id="SearchKey" type="text" />
    <input id="SearchButton" type="button" value="Search" />
  </div>
</form>
<hr style="width: 300px" />
<div>
  <span id="Results"></span>
</div>
<script type="text/xml-script">
  <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
    <references>
       <add src="ScriptLibrary/AtlasUI.js" />
       <add src="ScriptLibrary/AtlasControls.js" />
    </references>
    <components>
       <textBox id="SearchKey" />
       <serviceMethod id="helloService" url="HelloWorldService.asmx"
           methodName="HelloWorld">
       <bindings>
            <binding dataContext="SearchKey" dataPath="text"
                property="parameters" propertyKey="query" />
      </bindings>
      <completed>
         <invokeMethod target="resultsBinding"
             method="evaluateIn" />
      </completed>
      </serviceMethod>

  <button targetElement="SearchButton">
    <click>
      <invokeMethod target="helloService" method="invoke" />
    </click>
  </button>

  <label targetElement="results">
  <bindings>
    <binding id="resultsBinding" dataContext="helloService"
      dataPath="response.object" property="text"
      automatic="false" />
  </bindings>
  </label>

    </components>
  </page>
</script>

</asp:Content>

 我们现在把他设置为起师页，按F5运行下，天啊，鼠标刚刚离开那个按钮，结果就在下面显示出来拉！！！

虽然这问状搞完拉，但是心中还是郁闷的，总发觉他没有实验1的方便易懂啊~~~~~~

<form id="Form1" runat="server">

  <div>

    <div id="content">

      <h3>AutoComplete server control</h3>

      <p>This file contains a server-side Atlas AutoComplete.</p>

    </div>

  </div>

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>名字空间Namespace</title>
    <atlas:Script ID="Script1" runat="server" Path="~/ScriptLibrary/AtlasCompat.js" Browser="Mozilla" />
    <atlas:Script ID="Script2" runat="server" Path="~/ScriptLibrary/AtlasCompat.js" Browser="Firefox" />
    <atlas:Script ID="Script3" runat="server" Path="~/ScriptLibrary/AtlasRuntime.js"/>
</head>
<body>
    <div>
    在这个例子中我们将把Person这个类添加到Demo这个Namespace里<br>
    <input id="Button1" value="把Person类添加到Demo空间" type="button" onclick="return ThisClick()" />

    </div>
    <script type="text/javascript" src="Namespace.js"></script>
    <script type="text/javascript" language="javascript">
       function ThisClick()
       {
          //定义个Person类对象变量，有三个参数
          var testPerson = new Demo.Person('老鼠','吴旗娃师傅','pwqzc1688@google.com');
          //调用Person类的两个方法得到第一个参数和二二个参数弹出信息框
          alert(testPerson.getFirstName()+"是"+testPerson.getLastName()+"的徒弟！");
          //再return false,当然按钮的单击事件里也return ThisClick，是为了防止在其他浏览器里面弹出js控制台
          return false;
       }
    </script>
</body>
</html>

         function GetServerTime()
         {
            var message = '';
            var context = '';
           
            <%=sCallBackFunctionInvocation%>
         }
        
         function ShowServerTime(timeMessage, context) {
            alert('现在服务器上的时间是:\n' + timeMessage);
         }
      </script>
   </head>
<body>
   <form id="MainForm" runat="server">
      <input type="button" value="得到服务器端时间" onclick="GetServerTime();" />
   </form>
</body>
</html>

后台：
using System;
using System.Web.UI;

 public partial class ServerTime_aspx : Page,ICallbackEventHandler
 {
//一定要实现ICallbackEventHandler借口
  public string sCallBackFunctionInvocation;

  void Page_Load(object sender, System.EventArgs e)
  {
   sCallBackFunctionInvocation = Page.ClientScript.GetCallbackEventReference(this, "message", "ShowServerTime", "context");
  }

  public string RaiseCallbackEvent(string eventArgument)
  {
   return DateTime.Now.ToString();
  }
 }
运行，点按钮结果如下：

第二种方法：在上面的方法中我们必须要在前台绑定后台，那么如果不绑定呢？我们这样做：
直接把GetCallbackEventReference当做js函数中的一个实现内容，然后把这个js函数注册到客户端。
前台TestPage代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestPage.aspx.cs" Inherits="TestPage" %>
<html>
<head>
    <title>Untitled Page</title>
<script type="text/javascript">
        function test()
        {
            var lb = document.getElementById("Select1");
            //取的那个下拉框
            var con = lb.options[lb.selectedIndex].text;
            //得到你选择的下拉框的文本再调用呢个CallTheServer,是一个由服务器端输出的js函数
            CallTheServer(con,'');
        }
        function ReceiveServerData(rValue)
        {
            Results.innerHTML = rValue;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <select id="Select1">
            <option value=1 selected="selected">老鼠徒弟</option>
            <option value=2>吴旗娃师傅</option>
        </select>
        <br />
        <br />
        <input onclick="test()" value="从服务器返回下拉框文本" type=button>
        <br />
        <br />
        <span ID="Results"></span>
        <br />
    </div>
    </form>
</body>
</html>

后台代码：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
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;

public partial class TestPage : System.Web.UI.Page,System.Web.UI.ICallbackEventHandler
{
    protected void Page_Load(object sender, EventArgs e)
    {
  String cbReference = Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context");
  String callbackScript;
  callbackScript = "function CallTheServer(arg,context)" +
   "{ " + cbReference + "} ;";
  Page.ClientScript.RegisterStartupScript(this.GetType(),"abcdefg",callbackScript, true);
  //第四个参数代表是不是要自动给着脚本加上<script type="text/javascript"></script>标记，当然要加啊
    }
 public String RaiseCallbackEvent(String eventArgument)
 {
  return "你选择的是" + eventArgument;
 }
}

下面是执行结果：

 
第三种：前面两种都是<input type="button"的html控件，那么如果是服务器按钮呢？当然也可以，在后台添加服务器按钮的onclick 属性。
前台third.aspx代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="third.aspx.cs" Inherits="third" %>
<html>
<head>
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <select id="Select1">
            <option selected="selected" value=1>老鼠徒弟</option>
            <option value=2>吴旗娃师傅</option>
        </select>
        <asp:Button ID="Button1" runat="server" Text="这是个服务器按钮" /></div>
        <div id="div1" />
        <script type="text/javascript">
            function Re(ret)
            {
               document.getElementById("div1").innerHTML = ret;
               alert(ret);
            }
        </script>
    </form>
</body>
</html>
后台代码：
using System;
using System.Data;
using System.Configuration;
using System.Collections;
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;

public partial class third : System.Web.UI.Page,System.Web.UI.ICallbackEventHandler
{
    protected void Page_Load(object sender, EventArgs e)
    {
  //第四个参数为null，因为你不可能再在js中给他传参数了
  string str = Page.ClientScript.GetCallbackEventReference(this,"document.getElementById('Select1').options[document.getElementById('Select1').selectedIndex].text","Re",null);
  //return false是为了防止提交窗体
  Button1.Attributes.Add("onclick",str+";return false;");
    }

 #region ICallbackEventHandler Members

 public string RaiseCallbackEvent(string eventArgument)
 {
  if (eventArgument == "老鼠徒弟")
  {
   return "老鼠徒弟：人生如鼠，不在仓就在厕！";
  }
  else
  {
   return "吴旗娃师傅：自信自强，乐观向上";
  }
 }

 #endregion
}
小技巧，当你写完System.Web.UI.ICallbackEventHandler后，把鼠标移上去，那么System前面会有个小图表，点他会自动写好那个RaiseCallbackEvent代码，效果如下；

第三个感觉最差！

这个时候我们还必须修改aspx页面的<%@Page指令行，因为我们在后台搞了个名字空间，如下：
 Inherits="MyDemo._Default"也就是要把名字空间也写上。
我们再写客户端脚本来调用服务器方法。代码里有详细的注释，我想我这样的菜鸟能够理解的话对于大家来说应该能够比我还要理解的更深刻点
前台Default.aspx代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script runat=server>
    void Page_Load(object sender, EventArgs e)
    {
       //我们要把名字空间MyDemo下的Demo类注册下
        AjaxPro.Utility.RegisterTypeForAjax(typeof(MyDemo.Demo));
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type=button value="返回个类对象" onclick="getClass()" /><br/>
    <input type=button value="返回个继承类对象" onclick="getInheritedClass();" /><br/>
    <input type=button value="提交个类对象给服务器端" onclick="putClass();"/>
    </div>
    </form>
    <script type="text/javascript">
       function getClass()
       {
          MyDemo.Demo.GetMyClass(getMyClass);
       }
       function getMyClass(ret)
       {
          var a = ret.value;
          alert(a.FirstName);
       }
       function getInheritedClass()
       {
          MyDemo.Demo.GetInheritedClass(getInhClass);
       }
       function getInhClass(tg)
       {
          var a = tg.value;
          alert(a.LastName+"\n"+a.gid);
       }
       function putClass()
       {
          var p = MyDemo.Demo.GetMyClass().value;
          //先调用服务器端方法GetMyClass返回个MyClass对象
          p.FirstName = "老鼠是";
          //第一个参数为服务器端方法所需要的参数，第二个为接受数据处理的js函数
          MyDemo.Demo.PutClass(p,putMyClass);
       }
       function putMyClass(dsf)
       {
          var a = dsf.value;//得到服务器传来的数据
          alert(a.FirstName+"\n"+a.LastName+"的徒弟！");
       }
    </script>
</body>
</html>
MyClass.cs 文件代码：只有被客户端调用的方法才要在方法上面加[AjaxPro.AjaxMethod]
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 AjaxPro;

/// <summary>
/// Summary description for MyClass
/// </summary>
///
namespace MyDemo
{
 public class MyClass
 {
  public MyClass()
  {
   //
   // TODO: Add constructor logic here
   //
  }
  public string FirstName = "";
  public string LastName = "";
  public int Age = 0;
 }
 //下面这个类继承自MyClass类，他将具有和上面类一样的公共属性
 public class MyInheritedClass : MyClass
 {
  public double Size = 0.0;
  public Guid gid = Guid.Empty;
 }

 public class Demo
 {
     public Demo(){}
  [AjaxPro.AjaxMethod]
  public MyClass GetMyClass()
  {
   //这个方法将返回一个MyClass类的实例
   MyClass c = new MyClass();
   c.FirstName = "老鼠";
   c.LastName = "吴旗娃";
   c.Age = 30;
   return c;
  }
  //这个方法将返回给客户端一个继承类MyInheritedClass类的实例
  [AjaxPro.AjaxMethod]
  public MyInheritedClass GetInheritedClass()
  {
   //初始化个MyInheritedClass类对象，因为继承，所以他也具有父类公共属性
   MyInheritedClass c = new MyInheritedClass();
   c.FirstName = "老鼠";
   c.LastName = "吴旗娃";
   c.Age = 30;
   c.Size = 4.5;
   c.gid = Guid.NewGuid();
   return c;
  }
  //下面这个方法获得从客户端传来的数据（类对象)再返回一个类对象给客户端
  [AjaxPro.AjaxMethod]
  public MyClass PutClass(MyClass c)
  {
   c.LastName = "吴旗娃师傅";
   return c;
  }
 }
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<script runat="server">
    void Page_Load(object sender, EventArgs e)
    {
       //把类MyDataType注册下
        AjaxPro.Utility.RegisterTypeForAjax(typeof(MyDemo.MyDataType));
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type=button value="测试bool类型" onclick="getBoll();"/><br/>
    <input type=button value="测试int类型" onclick="getInt();" /><br />
    <input type=button value="测试double类型" onclick="getDouble();" /><br />
    <input type=button value="测试char类型" onclick="getChar();" /><br />
    <input type=button value="传int，double，float给服务器" onclick="getNumber();" /><br />
    <input type=button value="传入int数组，double数组，返回object数组" onclick="getNumbers();" /><br />
    <input type=button value="传入DateTime类型" onclick="getDateTime();" /><br />
    <input type=button value="传入object，返回xml" onclick="getXml();" /><br />
    </div>
    </form>
    <script type="text/javascript">
       function getBoll()
       {
          //调用服务器方法返回个bool类型
          alert(MyDemo.MyDataType.GetBool(false).value);
       }
       function getInt()
       {
          //调用服务器方法把传递的int加10再返回来
          alert(MyDemo.MyDataType.GetInt(20).value);
       }
       function getDouble()
       {
          //传递个double给服务器，返回个double
          alert(MyDemo.MyDataType.GetDouble(0.01).value);
       }
       function getChar()
       {
          //传递个char给服务器，返回他+1后的char
          alert(MyDemo.MyDataType.GetChar('a').value);
       }
       function getNumber()
       {
           //传递一个int，一个double一个float给服务器，以int返回他们的和
           alert(MyDemo.MyDataType.GetNumber(3,0.5,0.8).value);
       }
       function getNumbers()
       {
           //传递一个int数组和一个double数组给服务器，服务器分别计算每个数组的和并且以object数组的形式返回
           var p = MyDemo.MyDataType.GetNumbers([1,8,9],[1.2,55,5.02]).value;
           alert("int数组和是："+p[0]+"\ndouble数组和是："+p[1]);
       }
       function getDateTime()
       {
          //传递当前时间给服务器，返回现在的时间加4个小时
          //注意客户端得到现在时间是new Date()不是DateTime.Now
          alert(MyDemo.MyDataType.GetDateTime(new Date()).value);
       }
       function getXml()
       {
           //先初始化个对象,注意Object前面的O 大写啊
           var o = new Object();
           o.MyArray = [1,2,3,4,5,6];//o有个属性MyArray是个数组
           o.MyBool = true;//o有个属性MyBool,类型是bool
           o.MyString = "我爱你！";//o有个属性MyString,类型string
           //o还有个object类型的属性,MyObject再有两个属性
           o.MyObject = {"FirstName":"老鼠","LastName":"吴旗娃师傅"};
           //o还有个DateTime的属性
           o.MyDate = new Date();
           //调用服务器方法把这个object传给服务器，服务器把他转换成xml再返回
           var a = MyDemo.MyDataType.GetXml(o).value;
           alert(a);
       }
    </script>
</body>
</html>
类文件MyDataType.cs代码：
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 AjaxPro;
using System.Xml;

/// <summary>
/// Summary description for MyDataType
/// </summary>
///
namespace MyDemo
{
 public class MyDataType
 {
  public MyDataType()
  {
   //
   // TODO: Add constructor logic here
   //
  }
  [AjaxPro.AjaxMethod]
  public bool GetBool(bool b)
  {
   //传来true返回false，船来false，返回true
   return !b;
  }
  [AjaxPro.AjaxMethod]
  public int GetInt(int i)
  {
     //把传来的int参数加10返回
   return i + 10;
  }
  [AjaxPro.AjaxMethod]
  public double GetDouble(double d)
  {
     //把传来的double+0.1再返回
   return d + 0.1;
  }
  [AjaxPro.AjaxMethod]
  public char GetChar(char c)
  {
      //把传来的char加1返回
   return ++c;
  }
  [AjaxPro.AjaxMethod]
  public int GetNumber(int i, double b, float f)
  {
     //计算他们的和以int 返回
   return (int)((double)i+b+f);
  }
  [AjaxPro.AjaxMethod]
  public object[] GetNumbers(int[] i, double[] d)
  {
     //传如的参数是一个int数组和一个double数组，我们分别计算这两个数组的和，
   //然后把他们做为一个object数组的一个元素。
   object[] o = new object[2];//初始化有两个元素的object数组
   o[0] = 0;//给第一个元素赋值他将用来装传来的int数组的和
   o[1] = 0;//给第二个元素赋值他将用来装传来的double数组的和
   //遍离传来的int数组，把他的和放在object的第一个元素里面
   int i1=0;
   foreach (int a in i)
   {
    i1 += a;
   }
   o[0] = i1;
   //遍离double数组。
   double d1 = 0;
   foreach (double b in d)
   {
    d1 += b;
   }
   o[1] = d1;
   return o;
  }
  [AjaxPro.AjaxMethod]
  public DateTime GetDateTime(DateTime d)
  {
     //把传来的时间加四个小时返回
   return d.AddHours(4);
  }
  [AjaxPro.AjaxMethod]
  public string GetXml(IJavaScriptObject o)
  {
      //客户端的object对象被他搞成IJavaScriptObject类型
   //把他转换成xml dom,用JavaScriptUtil的那个方法注意要using AjaxPro
   XmlDocument xml = JavaScriptUtil.ConvertIJavaScriptObjectToXml(o);
   return xml.OuterXml;
  }
 }
}
运行结果如下：

private void Page_Load(object sender, EventArgs e)
{
    AjaxPro.Utility.RegisterTypeForAjax(typeof(LoadingDemo));
}

[AjaxPro.AjaxMethod]
public DateTime LongOperation()
{
    System.Threading.Thread.Sleep(2000);
    return DateTime.Now;
}

</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Ajax.NET - OnLoading Example</title>
    <link rel="stylesheet" type="text/css" href="../../css/main.css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  </head>
  <body>
 
<form id="Form1" method="post" runat="server"></form>

<div class="content">

<h1>OnLoading Examples</h1>

<p>Click <a href="javascript:doTest1();void(0);">here</a> to start a long operating method (2 seconds). After you have clicked on the link you should see a <i>Loading...</i> message in the upper left corner.</p>

</div>

<div id="loadinfo" style="visibility:hidden;position:absolute;left:0px;top:0px;background-color:Red;color:White;">Loading...</div>

<p class="footer">Last updated: November 2, 2005 by <a href="http://weblogs.asp.net/mschwarz/contact.aspx" target="_blank">Michael Schwarz</a></p>
<p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a></p>

<script type="text/javascript" defer="defer">

ASP.LoadingDemo.onLoading = function(b) {
    var l = document.getElementById("loadinfo");
    l.style.visibility = b ? "visible" : "hidden";
}

function doTest1() {
    ASP.LoadingDemo.LongOperation(doTest1_callback);
}

function doTest1_callback(res) {
    alert(res.value);
}

</script>
  </body>
</html>