JQuery 讀取 ASP.NET 傳遞 Json 格式資料

2010年11月9日星期二

JQuery 讀取 ASP.NET 傳遞 Json 格式資料

JSON (JavaScript Object Notation) 為一傳遞資料的格式，ajax 傳遞資料皆使用 Json 格式，維基 (wiki) 上稱它為一種輕量級的資料交換語言，易於閱讀。與 xml 最大的不同就是，xml 有絕佳的延展性，Json 目的在於資料的交換。

若 xml 資料為以下結構：

<item>
    <ID>1</ID>
    <Name>DavidKuo</Name>
</item>

而Json 資料結構就為：

{
    item:{
        id:1,
        name:'DavidKuo'
    }
}

提供大家一個 xml 轉換 Json 的網址 http://www.thomasfrank.se/xml_to_json.html
此次要提供的就是「從資料表製作一個 Json 格式資料，使用 JQuery 函式 .getJSON() 讀取回傳資料並顯示在網頁上」。基於 google 搜尋引擎的幫助，很快就找到了參考網址，約略1 ~ 2小時漸有融會貫通的感覺，這表示我網頁爬文功力更上一層樓。

首先，網頁只需留下<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 等字樣，其餘皆不要存在。

下達 SQL 查詢指令將資料塞進 DataTable，並將 DataTable 轉換成 Json 字串。
假設資料庫為有下圖資料：

而程式碼中，ID 為參數，若無參數，則全部列出：

using System;
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
using System.Text;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string connString = ConfigurationManager.ConnectionStrings["Member.Properties.Settings.ConnectionString"].ConnectionString; 
        DataTable dt = new DataTable();

        if (!string.IsNullOrEmpty(Request.QueryString["id"]))
        {
            string id = Request.QueryString["id"];
            SqlDataAdapter adapter = new SqlDataAdapter(new SqlCommand("SELECT * FROM Member WHERE id=" + id, new SqlConnection(connString)));
            adapter.Fill(dt);
        }
        else
        {
            SqlDataAdapter adapter = new SqlDataAdapter(new SqlCommand("SELECT * FROM Member", new SqlConnection(connString)));
            adapter.Fill(dt);
        }

        Response.Write(DataTableToJsonString(dt));
    }

    public string DataTableToJsonString(DataTable dt)
    {
        StringBuilder JsonString = new StringBuilder();

        if (dt != null && dt.Rows.Count > 0)
        {
            JsonString.Append("{");
            JsonString.Append(@"""item"":[");

            for (int i = 0; i < dt.Rows.Count; i++)
            {
                JsonString.Append("{");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    JsonString.Append(string.Format(@"""{0}"":""{1}""", dt.Columns[j].ColumnName, Convert.ToString(dt.Rows[i][j])));
                    if (j != dt.Columns.Count - 1) JsonString.Append(",");
                }
                JsonString.Append("}");
                if (i != dt.Rows.Count - 1) JsonString.Append(",");
            } 
            JsonString.Append("]}");
        }
        return JsonString.ToString();
    }
}

網頁開啟後如同下圖：

最後建立另依 *.apsx 頁面，匯入 jquery 的 js 檔，使用 .getJSON() 函式將資料一筆一筆讀出。程式碼如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>未命名頁面</title>
    <script type="text/javascript" src="jquery-1.4.3.min.js"></script>
    <script type="text/javascript" src="App_Data/jquery-1.2.6.pack.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $.getJSON("Default.aspx?id=1",
                function(data){
                    $.each(data.item, function(i,item){
                    $("#member").append(item.ID + ' / ' + item.Name + '<br />');
                    
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="member"></div>
    </form>
</body>
</html>

最後執行後頁面圖：

參考網址：http://chrisbalboa.pixnet.net/blog/post/30161616
http://zh.wikipedia.org/zh/JSON

回目錄
回首頁

3 則留言 :

匿名2012年2月5日下午2:48
很簡明易學, 謝謝blog主好文!
回覆刪除
回覆
Wayne2012年11月28日上午10:33
DATATABLE轉JASON可以不用這麼麻煩
用Newtonsoft.Json
只要一行就可以搞定了
string Json = JsonConvert.SerializeObject(newDataTable, Formatting.Indented);
回覆刪除
回覆

新增留言

2010年11月9日 星期二