利用AjaxPro实现cell插件与服务器的数据交互

Cell插件是纯客户端的控件，如何从服务器读取数据并设置到Cell，以及提取Cell中的数据并提交到服务器，这两个问题是我们今天需要探讨的。

         今天，我们探讨使用Ajax技术来实现这两项需求的解决方案。

简单介绍：

Ajax(Asynchronous Javascript and XML)应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其他一些基于XML的Web Service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多处理工作可以在发出请求的客户机上完成，所以Web服务器的处理时间也减少了。

使用Ajax编程时有很多麻烦事。如果你要支持多个浏览器（现在还有谁只支持一个浏览器呢？），无疑会遭遇不兼容问题。单看一个简单的动作，比如说创建XMLHttpRequest对象的一个实例，这需要先进行浏览器测试。一旦开始尝试使用Ajax技术，你很快就会注意到要反复地完成同样的一些任务。当然，你可以收集一些常用代码库，甚至创建自己的框架。不过，做这个工作之前，需要先了解一下现在已经有些什么了。

与所有优秀技术一样，Ajax已经催生出大量框架，有了这些框架，我们实现起来就简单多了。

目前比较流行的Ajax框架有：

Microsoft Ajax

AJAX.net

Echo2

MagicAjax

…….等等。

今天，我们介绍一种使用AjaxPro的来实现这我们的需求。AjaxPro也就是AJAX.NET (Professional), 它是ASP.NET平台上著名的AJAX框架，诞生于2005年2月（虽然正式命名为AJAX.NET则是在两个月之后），作者为Michael Schwarz。同年10月，Michael为AJAX.NET提供了更丰富的功能（主要是安全性方面），并将其改名为AJAX.NET Professional。AJAX.NET提供的最主要的（也是唯一）的功能就是异步调用服务器端方法，可谓非常纯粹的“基于数据”的AJAX使用方式。这个框架是一个个人作品，有支持.NET 1.1和2.0的版本，它并不属于微软官方，目前已经停止更新。里面的两个dll， ajaxpro.dll 是用于.net 1.1 版本的组件 AjaxPro.2.dll 是用于.net 2.0的。

配置:

1.   在Web.config中：

< add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>

2.      调用服务器方法需要加命名空间，

<% Page language=”C#” CodeBehind=”Default.aspx.cs” AutoEventWireup=”false” Inherits=”Web.Default”%>

 

3.         客户端调用方式

 

var response=web.default.GetServerMethod();

alert(response.value);

具体使用步骤:

接下来，简单的介绍它的用法：

1.   在项目中添加引用，浏览找到AjaxPro.2.dll。

2.   在Web.Config中的System.Web里面写入以下代码:

<configuration>

      < system.web>

           < httpHandlers>

< add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>

          </ httpHandlers>

      </system.web>

</configuration>

3.   编写服务器端方法，只要给一个方法加上[AjaxPro.AjaxMethod]标记，该方法就变成一个AjaxPro可进行影射调用方法。

//在后台写服务器端方法,用于从数据库取出数据并返回给客户端

namespace fisha. DAL

{

      public class PersionDao

{

      //标识为可用的ajax方法，才可以在客户端被调用

      [AjaxPro. AjaxMethod]

      Public DataTable getDataFromDB()//从数据库读取数据集

{

           ……读取数据逻辑…………

           Return dt;

}

[AjaxPrp.AjaxMethod]

Pulblic void saveDataFromCell(string xmlstr)//分析数据集字符串并保存到数据库

{

           ………分析xml字符串并保存到数据库…….

}

}

}

4.   对AjaxPro在页PageLoad事件中进行运行时注册。

 

public class default:Page

{

      Protected override void OnLoad(EventArgs e)

{

      AjaxPro.Utility.RegisterTypeForAjax(typeof(fisha.DAL. PersionDao), this.Page); //注册上面的类在本页面，才可使用里面的方法

}

}

 

5.   编写前段客户端调用代码

======Default.aspx代码======

引用cell插件：

<object id=”Cell1” Classid=”clsid:D69CD8A2-C02E-44DC-872D-A901FF75005F” CodeBase=”CellWeb.cab” width=”500px” height=”450px”>

      <span style="color:red">不能装载文档控件。请在检查浏览器的选项中检查浏览器的安全设置。</span>

</object>

引入bttuon控件:

<button id=”btnRead” onclick=btnRead_onclick>读取数据</button>

<button id=”btnSubmit” onclick=btnSubmit_onclick>保存</button>

书写读取数据按钮的click事件进行数据读取：

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

      function btnRead_onclick()

{

         //调用服务器端写好ajax方法得到数据集(调用方式：命名空间.类名.方法名)

var res=fisha.DAL.PersionDao. getDataFromDB ().value;

          //获取当前cell对象

var cell=document. getElementById(“Cell1”);

       //获取cell当前页

var cursheet=cell.GetCurSheet();

           if(res)

           {

                 //res是服务器返回的一个datatable集合

                 for(var i=0;i<res.rows.length;i++)

{

    For(var j=0;j<res. Columns.length;j++)

{

         //往cell中填充值

    Cell. SetCellString(j,i,cursheet,res.rows[i].columns[j].value);

}

}

}

     

}

function btnSubmit_onclick()

{

           //获取当前cell对象

           Var cell=document. getElementById(“Cell1”);

           //获取cell的当前页

           Var cursheet=cell.GetCurSheet();

           //遍历cell当前页，读取单元格的值

           for(var i=0;i<cell.GetRows(cursheet);i++)

{

           for(var j=0;j<cell.GetCols(cursheet);j++)

{

fisha.DAL.PersionDao. saveDataFromCell(j,i,cell,GetCellString(j,i,curshee());

}

}

}

</script>

这样，就实现了cell插件与服务器之间数据读取与写入的功能。