iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 4
0
Modern Web

ASP.NET Web Form 入門30天系列 第 4

[ASP.NET] 如何使用 「開放資料( Open Data ) 」? + (第一篇,建立介接新類別的三種方法 + 了解JSON 格式 )

本篇擷取重點:

  1. 首先我們要先了解什麼是 JSON 格式 ?
  2. 如何建立相對應的「類別(class)」在程式碼中介接Json格式字串

1. 首先我們要先了解什麼是 JSON 格式 ?

JSON 是 JavaScript Object Notation 的縮寫,是一種簡單輕量的資料交換格式,它實質上仍為字串。可用 陣列 [ ] 與 物件 { } 來寫入資料,你可以想成本來一份長長的純文字資料,透過結構化的方式,讓你在程式中可以方便的物件化,並以物件的方式去做資料的存取。( 關於 陣列 與 物件 將於下方補充 )

而當你有了 JSON 檔之後,你需要有相對應的「類別(class)」在程式碼中,這樣才能在讀 JSON 檔時( Deserialize )時,直接轉成對應的物件。

下方為JSON格式的基本型態,物件(object)用大括號 { } 、 陣列(array)用中括號 [ ]

{
    students: [
      {
        "Name": "Jason",
        "Age": 18,
        "Gender": "male"
      },
      {
        "Name": "Wendy",
        "Age": 30,
        "Gender": "female"
      },
      {
        "Name": "Alex",
        "Age": 50,
        "Gender": "male"
      },
      {
        "Name": "Amanda",
        "Age": 21,
        "Gender": "female"
      }
    ]
}

陣列 (students) 裡面有四個物件,每個物件內有三個屬性,
以第一個物件的第1個屬性為例,KEY為 Name、VALUE 為 Jason。
以第一個物件的第2個屬性為例,KEY為 Age、VALUE 為 18。
以第一個物件的第3個屬性為例,KEY為 Gender、VALUE 為 male。

==================================================================
貼心小補充:

物件
-宣告方式,如下
其中Name為類別,建立一個Name類別的物件叫做mark。

Name mark = new Name();

陣列
-用中括號 [ ]
-儲存內容是指標(即存記憶體位址)
-宣告一維陣列的兩種方式,如下
a. 直接加入內容。(由內容多少決定大小)

string[] arrStringA = { "A1", "A2", "A3", "A4" };

b. 先設定大小後再加入內容。

string[] arrStringB = new string[4];
arrStringB[0] = "B1"; arrStringB[1] = "B2"; arrStringB[2] = "B3"; arrStringB[3] = "B4";

參考資料:
https://dotblogs.com.tw/wesley0917/2010/12/21/20293

==================================================================


2. 如何建立相對應的「類別(class)」在程式碼中介接Json格式字串

而當你有了 JSON 檔之後,你需要有相對應的「類別(class)」在程式碼中,這樣才能在讀 JSON 檔時( Deserialize )時,直接轉成對應的物件。

首先,我們要先在專案中加入新類別 -專案(test123) -右鍵 -加入 -類別
https://ithelp.ithome.com.tw/upload/images/20190904/20120056uxhUzg4Go1.png
Web -程式碼 -類別 -輸入類別名稱 -新增
https://ithelp.ithome.com.tw/upload/images/20190904/20120056h6D8zRUvL1.png
建置成功,在專案底下出現類別檔案(CLASS)
https://ithelp.ithome.com.tw/upload/images/20190905/20120056NbwY32Cn0p.png


新增類別完成後,我們將於下方為您介紹三種建構介接JSON格式類別的方法

1.逐步踏實法:從整理後的JSON格式去分層建置,如上方範例所示
(最外層{}、第二層student[]、第三層分別為三個屬性"Name"/"Age"/"Gender")

namespace test123
{
    public class Data
    {
        public Student[] students { get; set; }
    }

    public class Student
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public string Gender { get; set; }
    }
}

筆者嘗試解釋一下,若有錯誤歡迎下方留言告知Orz..,感謝您!!

test123為專案名稱 /
第一層的類別名稱Data為新設類別檔名稱 /
第二層陣列名稱為students,並將其類別設定為Student類別,而且為陣列型態 /
而第三層物件是在第二層students陣列之下,故第三層的外層類別就是剛才設定的Student類別


  1. 善用網路資源法:我們可以將 JSON格式字串 丟進去線上類別生產器Json2Csharp
    網頁將自動產生相對應在 C# 中的類別。例如我們將上面範例丟進去,將會得到如下的類別
    https://ithelp.ithome.com.tw/upload/images/20190904/20120056LJgozqdeE1.jpg
    最後我們再將下方程式碼複製回專案新增的類別檔案中即可。

  1. 超級偷懶法:先複製原始的JSON格式字串,打開我們剛創建完成的類別檔(Data.cs),將遊標移至你要產生類別的位置上。編輯 -選擇性貼上 -貼上JSON做為類別
    https://ithelp.ithome.com.tw/upload/images/20190905/20120056AeoFnAfcbF.png
    登登登,完成惹!!
    https://ithelp.ithome.com.tw/upload/images/20190905/20120056KWC7grW9rz.png

參考資料:

  1. https://dotblogs.com.tw/berrynote/2016/08/18/200338
  2. https://kw0006667.wordpress.com/2016/11/29/uwp-%E9%80%8F%E9%81%8E-newtonsoft-json-%E8%AE%80%E5%AF%AB-json-%E6%AA%94/

==================================================================
貼心小補充:

若以2.3種方法來產生介接類別,需要特別注意,陣列及物件的名稱是否含有不允許字元(如$...等),若名稱中含有不允許字元,在自動產生介接類別時,該符號可能會被直接省略,導致資料無法介接成功。

解決的方法為,在.aspx.cs建立字串變數來匯入JSON格式字串後,先針對此變數的內容進行字元替代(字串名稱.replace(欲取代字元,新的替代字元)),再進行新類別的介接(類別中也要同步更新名字)。

==================================================================

有沒有好簡單,覺得天空晴朗空氣清晰又有大太陽?

我們將於明天的課程中,正式進入程式的部分囉~ >///<


上一篇
[ASP.NET] 如何使用 「開放資料( Open Data ) 」? + (預備篇:介接前,應該準備好的三件事情) + 如何簡單解釋 API ?
下一篇
[ASP.NET] 使用開放資料( Open Data ) 實作篇,以"高雄市政府相關求才資訊發佈"為例 (一)
系列文
ASP.NET Web Form 入門30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
CynthiaChuang
iT邦新手 5 級 ‧ 2019-09-05 01:16:30

超級偷懶法自動生成JSON類別完全是救星!!!!

/images/emoticon/emoticon07.gif

1
YoChen
iT邦研究生 1 級 ‧ 2019-09-05 09:49:33

陣列 (students) 裡面有四個物件,每個物件內有三個屬性,
以第一個問件的第1個屬性為例,KEY為 Name、VALUE 為 Jason。
以第一個問件的第2個屬性為例,KEY為 Age、VALUE 為 18。
以第一個問件的第3個屬性為例,KEY為 Gender、VALUE 為 male。

有錯字哦~XDDD
喜歡超級偷懶法,又學到一招,謝謝大大~XDDD

馬上修正!! 桑Q >///<

我要留言

立即登入留言