[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
 
2013-06-17_144223
再來我們可以到這裡下載 NO2AjaxGenerator 這工具 https://github.com/donma/JqueryAjaxGenerator
執行起來後,我們可以看到
2013-06-17_144444 - 複製

1 : 輸入 web service 的位置
2 : 設定 client(.html) 呼叫產生後的 .js 檔案的相對位置
3 : 按下分析 就會產生出 該web service 會用到的物件模型還有methods
4 : web service 中所有用的物件
5 : web service 中所有的methods
6 : 預覽產出的Code

2013-06-17_144918 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

2013-06-17_153436
其中在 Visual Studio 2012 中,宣告一個User 物件都支援 intelligent sense

2013-06-17_150235

包含自訂物件 User 的屬性

2013-06-17_150333

呼叫時可以知道需要的parameters ,和 web service (.asmx) 幾乎是相對應的

2013-06-17_150446

試試看吧,看看會不會開發變得更加的快速 :)

注意:

1. 關於時間問題 如果web service  端傳回物件型態為 DateTime ,則可以透過此function  來轉換
//轉換 .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);
}

因為保留其彈性,所以並沒有在產生時候附上
2. 每支產出的function 接有scucessFuc 以及 errorFunc 方便處理,如果沒有用到就可以不必傳入.
3. https://github.com/donma/JqueryAjaxGenerator 有更完整範例跟使用方式


當麻許的超技八 2014 | Donma Hsu Design.