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 則留言 :

  1. 很簡明易學, 謝謝blog主好文!

    回覆刪除
  2. DATATABLE轉JASON可以不用這麼麻煩
    用Newtonsoft.Json
    只要一行就可以搞定了
    string Json = JsonConvert.SerializeObject(newDataTable, Formatting.Indented);

    回覆刪除
    回覆
    1. 很感謝您的建議,目前.Net4.0已有Json序列化物件(System.Web.Script.Serialization),不需再另外使用第三方物件了
      string Json = JavaScriptSerializer.Serialize(object);

      刪除

Related Posts Plugin for WordPress, Blogger...