[C#] 一個方便使用 jquery ajax + .net WebService(.asmx) 的小工具-NO2AjaxGenerator
2013-06-17
.net WebService 一直是我覺得很方便的東西，手邊很多專案的Service 端都採用這技術
近幾年ajax 技術也使用的很頻繁，一直在想，如何才能讓前端呼叫web service(.asmx) 可以更加的快速
所以這支 NO2AjaxGenerator就誕生了
他的方便優點如下
1.快速產生 javascript 端可呼叫.net webservice 的code
2.在 Visual Studio 2012 下在 javascript 端可以支援您自訂物件的 intelligent sense
3.使用簡單，中間傳遞皆使用 json
4.讓你在javascript 可以有類似於C# 端開發的體驗
現在來看看案例，這是Service side 端的 .net webserice (.asmx) 程式
自訂的User 物件
User.cs :
namespace SimpleUserService{public class User
{public int Id { get; set; }
public string Name { get; set; }
public System.DateTime Birth { get; set; }}
}
Web Service 的部分
UserService.asmx:
using System;using System.Collections.Generic;using System.Web.Script.Services;using System.Web.Services;namespace SimpleUserService{ /// <summary> /// Summary description for UserService /// </summary> [WebService(Namespace = "http://tempuri.org/")][WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)][ScriptService]
public class UserService : WebService
{ [WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public User[] GetAllUsers() {var res = new List<User>();
for (int i = 1; i <= 10; i++)
{ res.Add(new User {Id = i,
Birth = new DateTime(2012, 1, 1).AddDays(i), Name = "User " + i});
}
return res.ToArray();}
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public User AddUser(User user) {user.Id = 1946;
return user;}
}
}
因為希望輸出端並非XML，而是可以使用json 所以紅色的部分是跟一般平常寫.asmx 的時候需要多加的
可以參考: http://www.dotblogs.com.tw/junegoat/archive/2012/10/08/c-sharp-dot-net-web-service-by-json-test-with-jquery.aspx
執行起來後，可以看到是一個很正常的 web service
再來我們可以到這裡下載 NO2AjaxGenerator 這工具 https://github.com/donma/JqueryAjaxGenerator
執行起來後，我們可以看到
1 : 輸入 web service 的位置
2 : 設定 client(.html) 呼叫產生後的 .js 檔案的相對位置
3 : 按下分析 就會產生出 該web service 會用到的物件模型還有methods
4 : web service 中所有用的物件
5 : web service 中所有的methods
6 : 預覽產出的Code
7 : 將產出的 javascript 的 code 存檔，此案例我存檔為 jq.data.js我們來看看如何使用
test.html :
step1: 首先，當然要先引入 jquery, 還有產出的 jq.data.js
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="jq.data.js"></script></head>
step2 : 直接可以呼叫 你在 test.html 中直接呼叫 GetAllUsers , AddUser 這兩隻 methods 囉，我們來看 code ，可以看一下code 的部分可以簡化多少
<body>
<div id="div_allusers" style="background-color: #EEFCFC">
</div>
<div id="div1" style="background-color: #FFCDE5">
<input type="button" value="Add User" onclick="btnaddUser_click()"></input>
</div>
<script>
//測試 GetAllUsers() 是否運作正確 //Sample for GetAllUsers function and get User[]. var allUsers = GetAllUsers();for (var i = 0; i < allUsers.length; i++) {
$('#div_allusers').append(allUsers[i].Id + "," + allUsers[i].Name + "," + ConvertToDate(allUsers[i].Birth).toString() + "<br />");
}
//測試 AddUser(UserObject) 傳入物件且回傳物件 //Sample for AddUser(UserObject) function and get result. function btnaddUser_click() {var userA = new User();
userA.Name = "I'm userA.";userA.Birth = new Date("2012/12/21");
var res = AddUser(userA);alert("Id:" + res.Id + "," + "Name:" + res.Name + "," + "Birth:" + ConvertToDate(res.Birth).toString());
}
//轉換 .net Datetime ojbect 成為javascript 用的Date 物件 //Convert .net Datetime object to javascript Date function ConvertToDate(srcDate) { var ms = parseInt(srcDate.match(/\((\d+)\)/)[1]);return new Date(ms);
}
</script>
</body>
結果:
中間傳遞皆為json
其中在 Visual Studio 2012 中，宣告一個User 物件都支援 intelligent sense
包含自訂物件 User 的屬性
呼叫時可以知道需要的parameters ，和 web service (.asmx) 幾乎是相對應的
試試看吧，看看會不會開發變得更加的快速 :)
注意:
1. 關於時間問題 如果web service 端傳回物件型態為 DateTime ，則可以透過此function 來轉換
//轉換 .net Datetime ojbect 成為javascript 用的Date 物件//Convert .net Datetime object to javascript Datefunction ConvertToDate(srcDate) { var ms = parseInt(srcDate.match(/\((\d+)\)/)[1]);return new Date(ms);
}
因為保留其彈性，所以並沒有在產生時候附上
2. 每支產出的function 接有scucessFuc 以及 errorFunc 方便處理，如果沒有用到就可以不必傳入.
3. https://github.com/donma/JqueryAjaxGenerator 有更完整範例跟使用方式