Ajax.Net之入阶篇

前两天写了那篇Ajax.Net的体会,有朋友问题这个东东应该怎么配置,代码应该怎么写。其实在它的example里面有一个QuickGuide.txt说的比较清楚,但是我还是这里来根据我的亲身体验来一步一步的演示一下。我的开发环境是Windows XP SP2,VS.Net 2005 Beta2。

首先到http://ajax.schwarz-interactive.de/download/AjaxSample.zip 下载Demo包,或者在这儿http://ajax.schwarz-interactive.de/download/ajax.zip 直接下载ajax.dll。

1、在VS.Net中新建一个Web Project,引用ajax.dll。
2、修改web.config,在里面增加
<configuration>
  <system.web>
    <httpHandlers>
    <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
    </httpHandlers> 
    ...
  <system.web>
</configuration>
这是利用HttpHandlers来动态生成Javascript用的。

3、我们新建一个实现业务逻辑的类,并在里面增加一个方法。
public class class1
{
 [Ajax.AjaxMethod()]
 public int ServerSideAdd(int firstNumber, int secondNumber)
 {
  return firstNumber + secondNumber;
 }
}
4、在default.aspx.cs的Page_Load事件中增加一行
    protected void Page_Load(object sender, EventArgs e)
    {
        Ajax.Utility.RegisterTypeForAjax(typeof(class1));
    }
5、在default.aspx页面文件中,写上这如下Javascript代码
<script>
function f1(a,b)
{
  alert(class1.ServerSideAdd(a,b).value);
}
</script>
意思是调用class1的ServerSiderAdd函数,并显示出来
6、在页面中再增加一个链接来触发这个函数
<a href="javascript:f1(2,3);">calculate</a><br>
好,现在编译运行一下看看。当你点击页面上的“calculate”链接时,是不是如你所愿的出现了5?
而这一切都是后台计算,并且浏览器页面没有刷新。

后记:
如果所有步骤做完,你会在生成页面的源代码中发现如下代码:
<script type="text/javascript" src="/WebSite1/csharpwrapper/common.ashx"></script>
<script type="text/javascript" src="/WebSite1/csharpwrapper/class1,App_Code.94psvga2.ashx"></script>
你可以把这两个script下载并打开看看,Ajax.Net到底在里面做了些什么,而有如此神奇的功能。

posted on 2005-08-19 12:09 kane 阅读(2560) 评论(23) 编辑 收藏

评论

#1楼  回复 引用 查看   

偶都不知道什么什么力量促使你把这么简单的问题搞的这么复杂,又是引入DLL,又是修改page_load,又是服务端又是客户端的,我比较关心ajax适合用什么什么项目下,有空给介绍介绍什么项目用ajax比较好吧。
2005-08-19 12:33 | 蛙蛙池塘      

#2楼[楼主]  回复 引用 查看   

这个···Ajax的构架就是如此,俺也没有办法,只是按部就班的做个介绍了。至于什么项目下适合用Ajax,我想当所有人都在用Ajax的时候,估计就不得不用了吧。
2005-08-19 12:39 | kane      

#3楼  回复 引用   

还好,文章很实用。

我觉得再简单的问题,如果有可以把它说得很清楚,也会帮助我们节省不少时间。

谢谢!
2005-08-19 19:26 | commenter[未注册用户]

#4楼  回复 引用   

不错啊.以前在ASP的时候我都是自己写代码的.
不过有一个问题
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
这个应该只有控制ashx的.不会对其它的东西造成影响吧
2005-08-20 08:55 | lovebanyi[未注册用户]

#5楼  回复 引用   

另外发现.原来你只是把人家的中文翻译成英文罢了
2005-08-20 08:57 | lovebanyi[未注册用户]

#6楼  回复 引用   

还发现了
Ajax.Utility.RegisterTypeForAjax(typeof(class1));
你的这个使用跟它不同.
2005-08-20 09:00 | lovebanyi[未注册用户]

#7楼[楼主]  回复 引用 查看   

那个处理ashx不会影响其他的,你可以参考一下MSDN的HTTPHANDLER。我前面说了,他有个QUICKGUIDER的,只是我亲身体验了一下,另外做了一些解释而已,呵呵。
2005-08-21 14:16 | kane      

#8楼  回复 引用   

请教基于数据集的开发模式如何使用Ajax技术?
比如ASP.NET的DataGrid,我在WebForm1.aspx上放置了一个DataGrid,在WebForm1.aspx.cs文件中申明如下:
[Ajax.AjaxMethod()]
public void BindDataToDataGrid()
{
DBInterface DBI = DBFactory.GetDBInterface();
DataGrid1.DataSource = DBI.Execute("select * from sys_workflow",true);
DataGrid1.DataBind();
}
同时在WebForm1.aspx.cs的Page_load中加入Ajax.Utility.RegisterTypeForAjax(typeof(WebForm1));申明。
在客户端放置一个Html按钮,调用以下客户端函数:
<script>
function BindData()
{
WebForm1.BindDataToDataGrid()
}
</script>
客户端函数BindData触发后,可以跟踪到WebForm1类的BindDataToDataGrid方法已经开始执行,但是DataGrid1被认为没有实例化,不知道这是什么原因?
2005-08-27 13:48 | 雪叶丹枫

#9楼[楼主]  回复 引用 查看   

这个···你似乎不能这么做,你在AJAX后台函数中对页面对象进行处理,但没有对整个页面进行刷新,而且也没有办法把你所操作的对象通过AJAX传到浏览器上。你可以通过AJAX远程获取数据,然后通过本地的JSCRIPT进行DBGRID的填充。
2005-08-29 13:14 | kane      

#10楼  回复 引用   

好文章!
2005-08-30 14:22 | 仓木泽[未注册用户]

#11楼  回复 引用 查看   

我又学到了东西了,现在的Ajax非常流行,只是市面上几乎没有综合.net的书籍,感觉非常难过,如果有的话,我会第一个买
2005-09-06 21:11 | 徐灿钊Asp.net专栏      

#12楼  回复 引用 查看   

按照你的步骤写,我的网页会出现js错误
错误是:class1未定义,
请你你通过了自己的测试的吗?
2005-09-08 19:03 | 徐灿钊Asp.net专栏      

#13楼[楼主]  回复 引用 查看   

通过了,请检查一下哪里没有做到或者环境有什么问题
2005-09-08 19:07 | kane      

#14楼  回复 引用   

注册class1的大小写
2005-09-10 14:15 | pesci[未注册用户]

#15楼  回复 引用   

关于DataGrid的数据问题,你不能去用server端的方法更新DataGrid,因为在客户端DataGrid根本就不存在,它是以table形式表现的,所以你应该放弃采用DataGrid控件,而使用server短的方法返回要显示的DataSet对象,然后在客户端使用javascript调用DataSet的属性,使用for循环等形式展现数据表格,大致方法如下:

<script language="JavaScript">
//Asynchronous call to the mythical "GetDataSet" server-side function
function getDataSet(){
AjaxFunctions.GetDataSet(GetDataSet_callback);
}
function GetDataSet_callback(response){
var ds = response.value;
if(ds != null && typeof(ds) == "object" && ds.Tables != null){
var s = new Array();
s[s.length] = "<table border=1>";
for(var i=0; i<ds.Tables[0].Rows.length; i++){
s[s.length] = "<tr>";
s[s.length] = "<td>" + ds.Tables[0].Rows[i].FirstName + "</td>";
s[s.length] = "<td>" + ds.Tables[0].Rows[i].Birthday + "</td>";
s[s.length] = "</tr>";
}
s[s.length] = "</table>";
tableDisplay.innerHTML = s.join("");
}
else{
alert("Error. [3001] " + response.request.responseText);
}
}
</script>
2005-10-19 12:38 | 虻[未注册用户]

#16楼[楼主]  回复 引用 查看   

这是个好方法。关键还是要理解AJAX和.Net页面对面之间的关系。
2005-10-19 16:59 | kane      

#17楼  回复 引用   

我也碰到调试错误问题,如下可以解决:
将 path="ajax/*.ashx" 中的ajax去掉或换成你自己的目录路径。
2005-11-09 09:28 | Robertyuan[未注册用户]

#18楼  回复 引用   

怎么用Ajax去取得URL后面传递过来的值呢?高手教我一下。搞了N天了。
2005-11-16 11:47 | Ruanwj[未注册用户]

#19楼  回复 引用   

很不错,作者写的简单易懂,鼓励一下。加油
2006-02-17 10:31 | 陈志华[未注册用户]

#20楼  回复 引用   

按照你的步骤写,我的网页也会出现js错误
错误是:Class1未定义,
我仔细检查过了大小写,没有错误

2006-02-17 11:01 | toger-兔哥[未注册用户]

#21楼[楼主]  回复 引用 查看   

@toger-兔哥
我确实验证过了,可以通过,实在不行的话,我就把我的例子发给你。另外MS也出了ATLAS,也可以去看看。
2006-02-17 11:09 | kane      

#22楼  回复 引用   

<script>
function f1(a,b)
{
alert(class1.ServerSideAdd(a,b).value);
}
</script>

注意这一段里面的class1要大写

你直接复制过去就会报错
2006-04-17 10:42 | rthy[未注册用户]

#23楼[楼主]  回复 引用 查看   

需要大写么?
2006-04-17 12:57 | kane      

导航

<2005年8月>
31123456
78910111213
14151617181920
21222324252627
28293031123
45678910

公告

昵称:kane
园龄:7年8个月
粉丝:2
关注:1

搜索

 
 

常用链接

我的标签

随笔档案

博客收藏

最新评论

阅读排行榜

评论排行榜

推荐排行榜