此文檔將使用AjaxPro.Net框架實現(xiàn)Ajax功能:在客戶端異步調(diào)用服務(wù)端方法。AjaxPro.Net是一個優(yōu)秀的.net環(huán)境下的Ajax框架,用法很簡單,可以查閱相關(guān)資料,本文檔是一個簡單的實例講述使用AjaxPro的幾個關(guān)鍵點。
1、下載AjaxPro 組件。并將AjaxPro.dll引用到網(wǎng)站(或項目)。下載: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事件中進(jìn)行運行時注冊。如:
//AjaxPro.Utility.RegisterTypeForAjax(typeof(所在類的類名));類的類名。如是放在命名空間,則需要寫上完整的命名空間(如:namespaces._Default)
AjaxPro.Utility.RegisterTypeForAjax(typeof(testPro1));
4、創(chuàng)建服務(wù)器端方法。只要給一個方法加上[AjaxPro.AjaxMethod]標(biāo)記,該方法就變成一個AjaxPro可進(jìn)行影射調(diào)用的方法。如下:(我現(xiàn)在是新建一個testPro1.aspx頁面,在它的cs代碼中加入)
[AjaxPro.AjaxMethod]
public string GetString()
{
return "Hello AjaxPro";
}
[AjaxPro.AjaxMethod]
public string GetServerTime()
{
return DateTime.Now.ToString();
}
5、客戶端調(diào)用:
<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="獲是服務(wù)器時間" onclick="getTime()" />
<input id="Button3" type="button" value="獲是服務(wù)器對象" onclick="getStudent()" />
二、擴展,客戶端訪問服務(wù)器對象
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()
{//服務(wù)端添加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可以訪問服務(wù)端返回的對象
}
function putStudent() {
var stu = testPro1.GetStudent().value;
stu.Name = "劉寧";
testPro1.SetStudent(stu); //客戶提交對象,并且對象的Name字段已經(jīng)改變?yōu)?ldquo;劉寧”了。
alert(stu.Name + " " + stu.Age); //客戶js可以訪問服務(wù)端返回的對象
}
</script>
</head>
<div><input id="Button3" type="button" value="獲是服務(wù)器對象" onclick="getStudent()" />
<input id="Button4" type="button" value="客戶端提交對象給服務(wù)器" onclick="putStudent()" />
</div>
參考:官網(wǎng)