文檔將使用AjaxPro.Net框架實現Ajax功能:在客戶端異步調用服務端方法。AjaxPro.Net是一個優秀的.net環境下的Ajax框架,用法很簡單,可以查閱相關資料,本文檔以一個簡單的實例講述使用AjaxPro的幾個關鍵點,本例實現一個簡單的功能,服務器端將頁面中輸入的數字加1後的結果返回給客戶端(注意,必須有AjaxPro包,即AjaxPro.dll文件,可以在VSS上下載)。
2.1.1用VS打開項目,在其資源管理器中,右擊引用,左擊"添加引用",如圖1_1所示
圖1-1
2.1.2出現如圖1_2所示的對話框,點擊瀏覽,找到AjaxPro.dll文件所在的位置,雙擊AjaxPro.dll,然後點擊確定。
圖1-2
2.1.3在資源管理器的引用文件夾下,就可以看到AjaxPro了,說明添加引用成功,如圖1_3所示。
圖1-3
2.2、配置web.config
這一步的作用是保證客戶端向"ajaxpro/*.ashx"的請求(POST和GET)都被AjaxPro.AjaxHandlerFactory攔截。
打開web.config文件,在<configuration><system.web>後添加以下代碼,
<add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>
AjaxPro.2 dll的名稱
<httpHandlers> <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/> </httpHandlers> |
如圖2_1所示。
圖2-1
2.3、添加服務端方法
2.3.1打開後臺代碼,在Page_Load方法體內加上如下代碼,
AjaxPro.Utility.RegisterTypeForAjax(typeof(所在類的類名));
如圖3-1所示。
圖3-1
其作用是向客戶端輸出下面的代碼:
<script type="text/javascript" src="/ch33/ajaxpro/core.ashx"></script> <script type="text/javascript" src="/ch33/ajaxpro/ch33.Verify,ch33.ashx"></script> |
2.3.2、添加數字加一的方法,首先在方法前加[AjaxPro.AjaxMethod],然後像寫C#方法一樣寫方法,如圖3-2
圖3-2
注意:需要加上[Ajax.AjaxMethod]標識,這樣才能夠被客戶端訪問
2.4、添加前臺代碼
在前臺添加JS腳本,調用服務器端方法,如圖4-1所示(Try.AjaxTest.Add(num),Try爲頁面類,即AjaxTest類所在的命名空間,這裏是Try;而AjaxTest即爲類名,Add爲方法名)
圖4-1