用jQuery調用.NET web service，傳參數和回傳資料的方法

2010-02-07

30690
0
2010-03-25

UpdatePanel不夠好用，ASP.NET的控制項太醜，最好就是可以jQuery處理client，後端用web service。這裡沒有用REST，但方法其實大同小異，最主要是想搞清楚怎樣傳參數和取回結果。看了很多教學，都沒有一遍是完整的把這部份解釋出來，一個不能傳參數和取得回傳值的服務可以說沒甚麼用。我選擇用POST方法，參數和回傳都用JSON。

這裡假設有接觸過jQuery和.NET的web service，不談其實作，集中在參數的傳遞和回傳值的討論。

jQuery呼叫web service的低層方法

$.ajax({
                    type: "POST",            //HTTP POST 方法
                    url: Url,                //web service的URI
                    cache: false,            
                    contentType: "application/json; charset=utf-8", //一定要,防止IE7的XHR bug  
                   data: Param,     //參數,JSON字串型態
                    dataType: "json",
                    success: SuccessCallback, //成功時的Callback方法
                    error: ErrorCallback      //錯誤處理Callback方法
                });
在這裡最重要的就是傳入參數Param，一般都是用這樣的方法建立JSON
{ "Property1" : Value1, "Property2" : Value2 }

但是這樣傳進去的話，.NET web service接到後會告訴你型態錯誤，原因為.NET的web service會把傳入和回傳的東西序列化。也就是說他會假設你傳進來的內容需要反序列化。所以我們這裡要把JSON序列化再指定給data。由於jQuery本身沒有JSON的功能，我用的是蠻受歡迎的轉換器，把JSON轉換成字串。

var data = { "Property1" : Value1, "Property2" : Value2 };
var datastr =JSON.stringify(data);

然後再指定給$.ajax裡的data。還有一個重點，如果沒有要傳入的參數的話，請把data設定為字串"{}"，而不是不設定data，不然.NET那邊會產生錯誤。

在.asmx裡要做下面的事情來接受ajax調用和取得參數。

加入[System.Web.Script.Services.ScriptService]讓此web service可以被script調用。然後按照剛才的JSON例子，就可能會這樣寫。

[WebMethod]
        public string Hello World(string Property1, string Property2)
        {
            return Property1+Property2; 
        }

暫時不管他回傳甚麼，取後參數的方法就是用JSON裡相同的名稱，來取得其值。不過這個JSON framework對.NET的Date處理是有問題的，可以去Rick Strahl的blog看這方面的處理。

如果你想你的web service回傳JSON，只需要直接把物件return就可以，.NET會自動處理序列化的部份。然後你再在SuccessCallback裡把得到的字串再parse成JSON就可以。

function handleReturn(data, status) {
               // parse to JSON
                var result = JSON.parse(data.d);
}

這裡有一個地方要注意，因為我用的是.NET 3.5，所以回傳值是被放在data.d，如果是.NET 2.0的話，則data就是你要的回傳值。

My WP Blog with english technical docs.

回首頁