温故AjaxPro系列之三（类型处理）

AjaxPro支持的类型有：Interger,String,Dobule,boolean,DateTime,DateSet,DateTable还有客户自定义的类和数组。

例子：AjaxPro返回DateSet回客户端处理。

首先我们新增一个页面叫：DtaSet,代码如下：

代码

using System;
using System.Data;
using System.Data.SqlClient;
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;
using Ajax;

namespace AjaxProDemo
{
    public partial class DtaSet : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Ajax.Utility.RegisterTypeForAjax(typeof(DtaSet));
        }
        [Ajax.AjaxMethod]
        public DataSet GetDataSet()
        {
            DataSet ds = new DataSet();

            DataTable dt = new DataTable();
            dt.Columns.Add("CUS", typeof(System.String));

            ds.Tables.Add(dt);

            DataRow row;

            row = ds.Tables[0].NewRow();
            row["CUS"] = "PERSON0";
            dt.Rows.Add(row);

            row = ds.Tables[0].NewRow();
            row["CUS"] = "PERSON1";
            dt.Rows.Add(row);

            row = ds.Tables[0].NewRow();
            row["CUS"] = "PERSON2";
            dt.Rows.Add(row);

            row = ds.Tables[0].NewRow();
            row["CUS"] = "PERSON3";
            dt.Rows.Add(row);

            row = ds.Tables[0].NewRow();
            row["CUS"] = "PERSON4";
            dt.Rows.Add(row);

            return ds;
        }
    }
}

页面代码如下：

代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DtaSet.aspx.cs" Inherits="AjaxProDemo.DtaSet" %>

<!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>无标题页</title>
    <script type="text/javascript" src="Js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
         function GetDataSet()
         {
              DtaSet.GetDataSet(Cus_Cb);
         }

         function Cus_Cb(rep)
         {
           if (rep.error != null)
           {
               alert(rep.error);
           }
           else
           {
             //加载客户名称
             var ds = rep.value;
             //返回数据存在
             if(ds != null && typeof(ds) == "object" && ds.Tables != null)
             {
                   var table=$("#Ht_tl0");
                   $.each(ds.Tables[0].Rows, function(idx, obj){
                       if (idx == 0)
                       {
                            table.append("<tr><tH>客户姓名</tH></tr>");
                       }
                       table.append("<tr><td>" + obj.CUS + "</td></tr>");
                   }
                   );
             }
             else
              {
                 alert("返回数据为空！");
              }
           }
         }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="Hl_Bth1" type="button" value="加载客户名称" onclick="GetDataSet();"/>
        <br />
        <table id='Ht_tl0'>

    </table>
    </div>
    </form>

</body>
</html>

以上代码，说明了AjaxPro基本的返回DataSet的基本过程和客户端处理方法。

AjaxPro返回DataTable的做法可以仿照本例子做。下面，我将讲解AjaxPro返回自定义对象。

下面，我们首先新建一个页面：CusTyp

页面代码如下：

代码

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript" src="Js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    function GetUserInfo()
    {
        User.GetUser(User_Cb);
    }

    function User_Cb(rep)
    {
       if (rep.error != null)
       {
            alert(rep.error);
       }
       else
       {
            $("#id").attr("innerText", rep.value.Id);
            $("#name").attr("innerText",rep.value.Name);
       }
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">

        <table>
            <tr>
                <td>
                用户号：
                </td>
                <td>
                <span id='id'></span>
                </td>

            </tr>
            <tr>
                <td>用户名：

                </td>
                <td>
                <span id='name'></span>
                </td>

            </tr>

        </table>
        <br />
        <div>
            <input id="Hl_bth1" type="button" value="取得用户数据" onclick="GetUserInfo();"/>

        </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;
using Ajax;

namespace AjaxProDemo
{
    public partial class CusType : System.Web.UI.Page
    {

        protected void Page_Load(object sender, EventArgs e)
        {
            Ajax.Utility.RegisterTypeForAjax(typeof(User));

        }
    }
    [Serializable]
    public class User
    {
        private string _Name;

        private int _Id;

        public string Name
        {
            get { return _Name; }
            set { _Name = value; }
        }

        public int Id
        {
            get { return _Id; }
            set { _Id = value; }
        }

        public User(int id, string Name)
        {
            this._Id = id;

            this._Name = Name;
        }

        public User()
        {
        }

        [Ajax.AjaxMethod]
        public User GetUser()
        {
            return new User(20100101, "TESTER");
        }
    }
}

上述代码值得注意的地方是，我通过属性[Ajax.AjaxMethod]声明了User类的GetUser方法是可以被异步调用的。运行后，点击按钮后，数据从服务器端传到客户端了。