欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用AjaxPro.Net框架实现在客户端调用服务端的方法

程序员文章站 2024-03-07 09:06:32
此文档将使用ajaxpro.net框架实现ajax功能:在客户端异步调用服务端方法。ajaxpro.net是一个优秀的.net环境下的ajax框架,用法很简单,可以查阅相关...

此文档将使用ajaxpro.net框架实现ajax功能:在客户端异步调用服务端方法。ajaxpro.net是一个优秀的.net环境下的ajax框架,用法很简单,可以查阅相关资料,本文档是一个简单的实例讲述使用ajaxpro的几个关键点。

1、下载ajaxpro 组件。并将ajaxpro.dll引用到网站(或项目)。下载:download latest version 7.7.31.1.
2、修改web.config。在 <system.web> 元素中添加以下代码。
  <configuration><system.web> <httphandlers> <!-- 注册 ajax handler,2.0以上框架用ajaxpro.2 -->
    <add verb="post,get" path="ajaxpro/*.ashx" type="ajaxpro.ajaxhandlerfactory, ajaxpro.2"/>
  </httphandlers> </system.web> </configuration>
3、对ajaxpro在页page_load事件中进行运行时注册。如:
  //ajaxpro.utility.registertypeforajax(typeof(所在类的类名));类的类名。如是放在命名空间,则需要写上完整的命名空间(如:namespaces._default)
ajaxpro.utility.registertypeforajax(typeof(testpro1));
4、创建服务器端方法。只要给一个方法加上[ajaxpro.ajaxmethod]标记,该方法就变成一个ajaxpro可进行影射调用的方法。如下:(我现在是新建一个testpro1.aspx页面,在它的cs代码中加入)

复制代码 代码如下:

[ajaxpro.ajaxmethod]
public string getstring()
{
return "hello ajaxpro";
}
[ajaxpro.ajaxmethod]
public string getservertime()
{
return datetime.now.tostring();
}

5、客户端调用:
复制代码 代码如下:

<script type="text/javascript">
function gettime() {
alert(testpro1.getservertime().value);
}
function getserverstr() {
//ajaxpro_guide.getstring(getstring_callback); // asynchronous call
//var p = classpro.getservertime().tostring();
alert(testpro1.getstring().value);
}
</script>

页面中加入以下代码:
    <input id="button1" type="button" value="获是服务器时间" onclick="gettime()" />
    <input id="button3" type="button" value="获是服务器对象" onclick="getstudent()" />

二、扩展,客户端访问服务器对象
  1、在app_code中新建类:
复制代码 代码如下:

public class student
{
private string _name = "郑伯城";
public int age = 30;
public string name
{
get { return this._name; }
set { this._name = value; }
}
}

2、在测试页面testpro1.aspx页面,在它的cs代码中加入
复制代码 代码如下:

[ajaxpro.ajaxmethod]
public student getstudent()
{//服务端添加getstudent方法
return new student();
}
private student student = null;
[ajaxpro.ajaxmethod]
public void setstudent(student stu)
{
this.student = stu;
string name = this.student.name;
}

3、aspx页面的javascript脚本
测试aspx页面中的脚本
复制代码 代码如下:

<head id="head1" runat="server">
<title>ajaxpro测试</title>
<script type="text/javascript">
function getstudent() {
var stu = testpro1.getstudent().value;
alert(stu.name + " " + stu.age); //客户js可以访问服务端返回的对象
}
function putstudent() {
var stu = testpro1.getstudent().value;
stu.name = "刘宁";
testpro1.setstudent(stu); //客户提交对象,并且对象的name字段已经改变为“刘宁”了。
alert(stu.name + " " + stu.age); //客户js可以访问服务端返回的对象
}
</script>
</head>

<div><input id="button3" type="button" value="获是服务器对象" onclick="getstudent()" />
<input id="button4" type="button" value="客户端提交对象给服务器" onclick="putstudent()" />
</div>
参考:官网