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

时间:2022-09-10 09:22:58

此文档将使用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>
参考:官网