AjaxPro框架使用整理(二) 客户端与服务器端自定义对象交互

本次示例将从服务器端得到对象后经过客户端与服务器端修改后再次发回客户端,费话不多说,赶快进入主题,呵呵
1.创建自己的对象 "雇员"

public   class  Employee
... {
    private string name;
    public string Name  //姓名
    ...{
        get ...{ return name; }
        set ...{ name = value; }
    }

    private int age;
    public int Age  //年龄
    ...{
        get ...{ return age; }
        set ...{ age = value; }
    }
}

2.在页面cs文件中添加两个Ajax方法特客户端调用

public   partial   class  _Default : System.Web.UI.Page
... {
    protected void Page_Load(object sender, EventArgs e)
    ...{
        //注册Ajax类
        AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
    }
    [AjaxPro.AjaxMethod]
    public Employee getEmployee()   //返回一个雇员对象
    ...{
        Employee employee = new Employee();
        employee.Name = "Bill";
        employee.Age = 20;
        return employee;
    }

    [AjaxPro.AjaxMethod]
    public Employee updateEmployee(Employee e)  //修改雇员姓名
    ...{
        e.Name = "ServerChanged Bill";
        return e;
    }
}

页面前台代码如下:

<% ... @ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"  %>
<! 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 >Class Example </ title >
     < script  type ="text/javascript" > ...
    function CallServerMethod()
    ...{
        //调用服务器端方法
        var employee=_Default.getEmployee().value;
        alert("Name="+employee.Name+" Age="+employee.Age);
        alert("点击确定将在客户端修改对象的Age属性并且在服务器端修改对象的Name属性!");
        //在客户端修改对象属性
        employee.Age=30;
        _Default.updateEmployee(employee,callback);       
    }
    
    function callback(res)
    ...{   
        var employee=res.value;
        alert("Name="+employee.Name+" Age="+employee.Age);
    }
     </ script >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < div >
         < p > 点击 < a  href ="javascript:CallServerMethod();void(0);" > 这里 </ a > 开始我们的测试吧! </ p >
     </ div >
     </ form >
</ body >
</ html >