[ASP.NET] 使用開放資料( Open Data ) 實作篇，以"高雄市政府相關求才資訊發佈"為例 (一)

第 11 屆 iThome 鐵人賽

DAY 5

Modern Web

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

[ASP.NET] 使用開放資料( Open Data ) 實作篇，以"高雄市政府相關求才資訊發佈"為例 (一)

11th鐵人賽 asp.net c# open data

碼屋( MARK WU )

團隊火箭隊

2019-09-06 17:37:56

9979 瀏覽

分享至

本篇擷取重點：
一、建立Web表單
二、下載Newtonsoft.Json套件
三、建立介接類別
四、作法概述 ( .aspx /.aspx.cs /.css )
五、成果

零、找到欲使用的Open Data之API(以JSON為例)

【高雄市政府開放資料平台】-進去後再點選右上角綠色方塊【前往存取資源】

或直接點選訓練就業中心最新資訊公告JSON格式，兩者皆是相同的。

一、建立Web表單

在先前的文章已有詳細的步驟，今天就不再贅述，並在此附上文章連結，有需要的客官再點進去看囉。
-[ASP.NET] 新增Web表單(網頁)實例 + 網頁畫面如何產生?(在伺服器中的處理流程)

Web表單建立後，將於專案下方出現index.aspx及index.aspx.cs，後方我們將分開針對這兩檔案進行程式碼的編寫，以方便閱讀。

二、下載NUGET套件-Newtonsoft.Json

在下方文章中，有詳細的下載Newtonsoft.Json套件的步驟，方便尚未看過的新讀者點選閱讀。
-[ASP.NET] 如何使用「開放資料( Open Data ) 」? + (預備篇：介接前，應該準備好的三件事情)

三、建立介接類別

在下方文章中，有詳細的新建類別步驟，附上連結方便尚未看過的新讀者點選閱讀。
-[ASP.NET] 如何使用「開放資料( Open Data ) 」? + (第一篇，建立介接新類別的三種方法)

詳細作法，已放在上方連結中，故在本篇就不再次琢磨，直接將結果顯示在下方。

namespace test123
{
    public class Data
    {
        public Paging paging { get; set; }
        public Entry[] entries { get; set; }
    }

    public class Paging
    {
        public int limit { get; set; }
        public int offset { get; set; }
        public int total { get; set; }
    }

    public class Entry
    {
        public string title { get; set; }
        public string category { get; set; }
        public int top { get; set; }
        public string publication_date { get; set; }
        public string takendown_date { get; set; }
        public string app_publication_date { get; set; }
        public string app_takendown_date { get; set; }
        public string contents { get; set; }
        public string remark { get; set; }
        public string id { get; set; }
        public Link[] links { get; set; }
        public File[] files { get; set; }
    }

    public class Link
    {
        public string title { get; set; }
        public string url { get; set; }
    }

    public class File
    {
        public string filename { get; set; }
        public string url { get; set; }
    }

    
}

第一層的類別名稱Data為新設類別檔名稱 /
第二層有兩個，分別是 Paging類別的物件paging及 Entry類別的陣列entries/
第三層分別在物件paging之下(故類別為Paging)及陣列entries之下(故類別為Entry)/
第四層分別在陣列links之下(故類別為Link)及陣列files之下(故類別為File)/

==================================================================
貼心小補充：

類別名稱 / 該物件名稱(陣列也是一種物件) / 物件型態(物件或陣列)要釐清
EX：(Paging / paging / 物件)、(Entry / entries / 陣列)
當該物件的子層有其他物件時，我們會新創一個新類別，並以該物件名稱命名，但開頭字母改大寫。
另外，新創的類別名稱習慣使用是單數，且若為陣列型態，會在後方加上[]中括號表示。

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

四、作法概述

step1. 在管理版面配置的(.aspx)建立(.aspx.cs程式碼)的輸出接口。
step2. 在(.aspx.cs)輸入介接JSON格式字串的程式碼。
step3. 建立樣式表(.css)對最終頁面輸出進行調整。

step1、.aspx

<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="Style-test123.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <span id="message" runat="server"></span>
        </div>
    </form>
</body>
</html>

step2、.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    string content = GetJsonContent("https://www.ktec.gov.tw/ktec_api.php?type=json");
    Data data = JsonConvert.DeserializeObject<Data>(content);
    message.InnerHtml += "<CAPTION><h1>高雄市政府相關求才資訊發佈</h1></CAPTION>  ";
    message.InnerHtml += "<table><TR><TH>類型</TH><TH>主題</TH><TH>發表日期</TH></TR>";
    int i = 0;
    foreach (var item in data.entries)
    {
        if (item.title.Length > 35)
        {
            item.title = item.title.Substring(0, 35);
            item.title += "...<詳情請點>";
            message.InnerHtml += "<tr>" + "<td>" + item.category + "</td>" + 
            "<td><a href=\"detail.aspx?i=" + i + "\">" + item.title +
            "</a></td>" + "<td>" + item.publication_date + "</td></tr>";
            i++;
        }
        else
        {
            message.InnerHtml += "<tr>" + "<td>" + item.category + "</td>" + 
            "<td><a href=\"detail.aspx?i=" + i + "\">" + item.title +
            "</a></td>" + "<td>" + item.publication_date + "</td></tr>";
            i++;
        }
    }
    message.InnerHtml += "</table>";
}
private static string GetJsonContent(string Url)
{
    string targetURI = Url;
    var request = System.Net.WebRequest.Create(targetURI); 
    request.ContentType = "application/json; charset=utf-8";
    var response = request.GetResponse();
    string text;
    using (var sr = new StreamReader(response.GetResponseStream()))
    {
        text = sr.ReadToEnd();
    }
    return text;
}

由於今天時間不夠完整的解釋，故僅先貼上程式碼，細節部分待明日一併解釋，並補上連結

主程式之程式碼解析：
[ASP.NET] 使用開放資料( Open Data ) 實作篇，以"高雄市政府相關求才資訊發佈"為例 (二) - 程式碼解析(A篇)
副程式之程式碼解析：
[ASP.NET] 使用開放資料( Open Data ) 實作篇，以"高雄市政府相關求才資訊發佈"為例 (三) - 程式碼解析(B篇)

step2、.css

body {
    background-color:lemonchiffon;
}
h1 {
    width:830px;
    display:inline-block;
}
div {
    margin: auto;
    max-width: 830px;
}
tr, td, th {
    border: 2px solid black;
    border-radius: 5%;
    padding: 10px 5px 10px 5px;
}

五、成果