[ASP.NET] 如何從Server端將資料轉換成JSON格式傳至Client端

摘要:[ASP.NET] 如何從Server端將資料轉換成JSON格式傳至Client端

前言


  有朋友問到該如何將 Server 端處理好的資料轉換成 JSON 格式傳送到 Client 端的 JavaScript 做處理,這在簡單說明一下該如何處理,我一般搭配 Ajax 處理 Server 資料時是使用泛型處理常式 (.ashx),泛型處理常式其實就很像 aspx 頁面,差別在於 ashx 是沒有 UI 介面的,只專門在處理 http request。

 

  而對於資料轉換成 JSON 格式的方法 .Net 本身提供 DataContractJsonSerializer 類別可以進行使用,DataContractJsonSerializer 類別可提供將資料序列化至 JSON 格式和還原 JSON 格式的物件,要使用 DataContractJsonSerializer 類別必須要載入 System.Runtime.Serialization.Json 命名空間。

 

範例


  首先建立 aspx 頁面,以下將有兩種轉換 JSON 的範例,ASPX:


         $(function () {
            $('#form1').submit(function () {
                var params = $(this).serialize();   //jquery.serialize() 可將表單提交的內容序列化為URL參數編碼
                $.ajax({
                    type: 'post',
                    url: 'DataHandler.ashx',
                    datatype: 'json',
                    data: params,
                    success: function (result) {
                        $("#result1").text(result);
                    },
                    error: function (ex) {
                        alert('error');
                    }
                });
                return false;
            });
         });

<form id="form1">
    <div>
        <input id="txtID1" name="id" type="text" />
    </div>
    <div>
        <input id="txtName1" name="name" type="text" />
    </div>
    <input id="btnSend1" type="submit" value="取得JSON格式" />
    <div id="result1">
    </div>
</form>

 

  Client端利用Ajax將資料POST至Server端處理,在這裡使用.serialize()方法可以簡單的將表單內的欄位序列化為URL參數,如  a=123&b=qwe 這樣,而 .ashx 程式則需對取得的資料做處理後轉換成 JSON,.ashx 程式碼如下:


    public void ProcessRequest (HttpContext context) {
        string id = context.Request["id"];
        string name = context.Request["name"];
        result rlt = new result() { id = id, name = name };
        DataContractJsonSerializer json = new DataContractJsonSerializer(rlt.GetType());
        json.WriteObject(context.Response.OutputStream, rlt);
    }
 
    public class result
    {
        public string id { get; set; }
        public string name { get; set; }
    }
    
    public bool IsReusable {
        get {
            return false;
        }
    }

 

  這段程式碼中使用到了巢狀型別,即類別中包含了一個自訂的類別,而剛剛在 DataContractJsonSerializer 中有提到,DataContractJsonSerializer 可以將型別序列化成 JSON ,所以在這我們才需要這樣做,我在 result 這個型別內定義了所要用到的屬性後回到 ProcessRequest()  內可以看到我先取得傳來的參數,將物件建立並且賦予對應的屬性值,透過 DataContractJsonSerializer 類別的方法回寫JSON資料。

 

  這樣就可以簡單的轉換 JSON 格式而不需要自己在寫組字串 "{ id:" + id + "}" 這種方式了,結果:

  另外如果你的 JSON 需要多層的話,可以使用巢狀型別的方式做,.ashx 程式碼如下,


    public void ProcessRequest (HttpContext context) {
        string id = context.Request["id"];
        string name = context.Request["name"];
        string work = context.Request["work"];
        Result rlt = new Result()
        {
            id = id,
            name = name,
            work = new List() { new Work() { work1 = work } }
        };
        DataContractJsonSerializer json = new DataContractJsonSerializer(rlt.GetType());
        json.WriteObject(context.Response.OutputStream, rlt);
    }

    public class Result
    {
        public string id { get; set; }
        public string name { get; set; }
        public List work { get; set; }
    }
    
    public class Work
    {
        public string work1 { get; set; }
    }
    
    public bool IsReusable {
        get {
            return false;
        }
    }

  結果:

 

範例程式碼


WebJSON.rar

 

參考資料


HTTP 處理常式和 HTTP 模組概觀

DataContractJsonSerializer 類別

巢狀型別 (C# 程式設計手冊)

 

 


以上文章敘述如有錯誤及觀念不正確,請不吝嗇指教
如有侵權內容也請您與我反應~謝謝您 :)