ExtJs學習筆記(20)-利用ExtJs的Ajax與服務端WCF互動

ExtJs是一套非常不錯的javascript UI庫(第一次接觸ExtJs的，可到官方網站http://www.extjs.com/deploy/dev/examples/samples.html看下樣本。相信不少人會心動的)，不僅組件豐富，效果漂亮，而且ExtJs整合的Ajax功能可以方便的與.Net的WCF進行互動.

這裡我們將示範ExtJs的FormPanel從WCF載入資料，以及如何提交資料到WCF服務端

1.首先來定義一個用於傳輸資訊的Class（實際開發中，可以是Linq to Sql的Class或任何可序列化的實體類）

[DataContract]
　　public class MyData
　　{
　　　　[DataMember]
　　　　public string id;
　　　　[DataMember]
　　　　public string text;
　　}

非常簡單，MyData中僅定義了二個成員id,text，加上[DataContract]與[DataMember]表明該類可以序列化

2.再定義幾個用於跟ExtJs互動的方法(初次接觸Ajax與WCF互動的同志，建議參考一下老張的"Ajax與WCF互動-WCF之美(http://www.cnblogs.com/jillzhang/archive/2008/06/13/1219201.html)")

[ServiceContract(Namespace = "")]
　　[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
　　public class MyService
　　{
　　[OperationContract]
　　　　[WebInvoke(ResponseFormat = WebMessageFormat.Json, Method = "*", UriTemplate = "GetMyData")]
　　　　public MyData GetMyData()
　　　　{
　　　　　　System.Threading.Thread.Sleep(1000);
　　　　　　MyData _Node = new MyData() { id = "1", text = "test text" };
　　　　　　return _Node;
　　　　}

　　 /**//// <summary>
　　　　/// RESTFul WCF用於Get方式取得ExtJs提交的資料(Json)
　　　　/// </summary>
　　　　/// <param name="id"></param>
　　　　/// <param name="text"></param>
　　　　/// <returns></returns>
　　　　[OperationContract]
　　　　[WebInvoke(Method = "*", ResponseFormat = WebMessageFormat.Json, UriTemplate = "SaveMyData?id={id}&text={text}")]
　　　　public MyData SaveMyData(string id,string text)
　　　　{
　　　　　　System.Threading.Thread.Sleep(1000);
　　　　　　MyData _Node = new MyData() { id = id, text = text };
　　　　　　return _Node;
　　　　}

/**//// <summary>
　　　　/// Post方法處理ExtJs提交的資料(Json格式)
　　　　/// </summary>
　　　　/// <param name="input"></param>
　　　　/// <returns></returns>
　　　　[OperationContract]
　　　　[WebInvoke(Method = "*", ResponseFormat = WebMessageFormat.Json, UriTemplate = "SaveMyData2")]
　　　　public MyData SaveMyData2(Stream input)
　　　　{
　　　　　　string s = "";
　　　　　　using (StreamReader sr = new StreamReader(input))
　　　　　　{
　　　　　　　　s = sr.ReadToEnd();
　　　　　　}
　　　　　　NameValueCollection qs = HttpUtility.ParseQueryString(s);
　　　　　　string id = qs["id"];
　　　　　　string text = qs["text"];

　　　　　　System.Threading.Thread.Sleep(1000);
　　　　　　MyData _Node = new MyData() { id = id, text = text };
　　　　　　return _Node;
　　　　}
}