通過 Parameter 對象添加 Ajax 請求時的參數

之前寫了很多 JQueryElement 的文章, 在 JQueryElement 的控制項中有很多 Ajax 調用, 為了方便大家的理解, 寫了這篇解釋 Parameter 對象是如何為 Ajax 添加設定參數的.

範例程式碼下載: http://zsharedcode.googlecode.com/files/JQueryElementDemo.rar

本文將說明 JQueryElement 當中的 Parameter 對象的作用和使用方法:

* 準備

* 文法

* 參數名

* 參數擷取方式

* 預設值

* 資料類型

* 自訂轉換函式

* 自動添加的參數

準備

在此之前, 請確保已經瞭解 JQueryElement 中一些控制項的使用.

文法

通過添加 Parameter, 可以為 Ajax 調用增加參數:

代碼如下	複製代碼
<je:Parameter     Name="<參數名>" Type="<參數擷取方式>"     Value="<參數運算式>" Default="<預設值>"     DataType="<資料類型>" Provider="<自訂轉換函式>"/> <je:Parameter Name="name" Type="Selector"     Value="'#txtAName'" DataType="String"/>

每一個 Parameter 都需要包含在 ParameterList 中, 而 ParameterList 是所有 Async 對象的屬性, 下面在點擊的事件中, 增加了一個名為 name 的參數.

代碼如下	複製代碼
<ClickAsync Url="webservice.asmx" MethodName="Save" Success=" function(data){     alert(data.d.message); } ">     <ParameterList>         <je:Parameter Name="name" Type="Selector" Value="'#txtWName3'"/>     </ParameterList> </ClickAsync>

 

參數名

如果調用 WebService, 則參數名和伺服器端的參數名是一致的, 比如:

代碼如下	複製代碼
<je:Button ID="cmdWNet3" runat="server">     <ClickAsync Url="webservice.asmx" MethodName="Save">         <ParameterList>             <je:Parameter Name="name" Type="Selector" Value="'#txtWName3'"/>         </ParameterList>     </ClickAsync> </je:Button>

代碼中 Parameter 的 Name 屬性設定的參數名為 name, 因此 Save 方法需要一個名為 name 的參數:

代碼如下	複製代碼
[WebMethod] [ScriptMethod] public SortedDictionary<string, object> Save ( string name ) { }

如果使用 ashx 來接收參數, 則使用 Request['name'] 即可.

參數擷取方式

參數擷取方式有兩種, 一種是 Selector, 這表示 Value 屬性是一個選取器, 通過選取器將選擇頁面上的一個元素, 通常是 input 元素, 將取此元素的值作為參數的值, 另一種是 Expression, 表示 Value 中的是一個 javascript 運算式, javascript 運算式計算的值將作為參數的值:

代碼如下	複製代碼
<je:Parameter Name="name" Type="Selector" Value="'#txtWName3'"/> <je:Parameter Name="value" Type="Expression" Value="123 + 321" DataType="Number"/> <je:Parameter Name="value" Type="Expression" Value="add(123, 321)" DataType="Number"/>

代碼中的選取器 #txtWName3 使用了單引號, 因為選取器需要是一個字串, 如果改成 Value="myselector", 則表示將 javascript 變數 myselector 的值作為選取器.

Value 作為 javascript 運算式, 則形式是多樣的, 在代碼中, 還調用了 javascript 函數 add.

預設值

通過 Default 屬性, 可以設定當參數值為空白時的預設值, 是一個 javascript 運算式.

資料類型

可以通過 DataType 轉化參數的類型, 比如轉化文字框中的字串為數實值型別:

代碼如下	複製代碼
<je:Parameter Name="name" Type="Selector" Value="'#txtAge'" DataType="number"/>

DataType 屬性可以設定為 number, boolean, string, date, 其實, 在伺服器端 WebService 自身也會進行一些轉化, 詳細可以參考 Ajax 與 WebService 之間日期等資料類型的轉換.

自訂轉換函式

如果設定了 DataType, 則可以另外的設定 Provider 來提供自訂轉換函式, 自訂轉換函式將在不能正常轉換時調用, 比如:

代碼如下	複製代碼
<je:Parameter Name="name" Type="Selector" Value="'#txtAge'" DataType="number" Provider=" function(value){     if(value == '不惑')         return 40;     else         return 18; } "/>

上面的代碼中, 如果使用者輸入的年齡為 不惑 則將轉化為 40, 否則為 18. 

自動添加的參數

在一些控制項的事件中, 會自動的添加一些參數, 比如 Repeater 的 FillAsync 中會添加 pageindex, pagesize 來表示頁碼等資訊.

JQueryElement 是開源共用程式碼, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 頁面下載 dll 或者是原始碼.

 

歡迎訪問 panzer 開源項目, http://zsharedcode.googlecode.com/ , 其中包含了 IEBrowser 控制 WebBrowser 執行各種 js 和 jQuery 指令碼以及錄製功能 和 jQueryUI 的 Asp.net 控制項 JQueryElement