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” οnclick=btnRead_onclick>读取数据</button>
<button id=”btnSubmit” οnclick=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插件与服务器之间数据读取与写入的功能。