iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 5
1
Modern Web

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

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

本篇擷取重點:
一、建立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)/

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

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

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


四、作法概述

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;
}


五、成果

https://ithelp.ithome.com.tw/upload/images/20190906/201200561POpIgWmyQ.png

完成了!! 有沒有國小電腦課下載"小朋友騎打交遊戲"的那個網站,

史萊姆的第一個家,那種陽春網頁的既視感 (好像透露太多年紀惹)

上一個看到成品的人對我說,這個美感太優秀,還好你不是走前端... 幫QQ


後記:

  1. 本網頁是直接連結市政府 開放資料(Open Data) 之API,故會隨著市政府資料庫的更新而變動。
  2. 今天時間不夠完整的解釋,故僅先貼上程式碼,細節部分待明日一併解釋,若人客欸有什麼特別想問的,也歡迎下方留言給我們知道~

上一篇
[ASP.NET] 如何使用 「開放資料( Open Data ) 」? + (第一篇,建立介接新類別的三種方法 + 了解JSON 格式 )
下一篇
[ASP.NET] 使用開放資料( Open Data ) 實作篇,以"高雄市政府相關求才資訊發佈"為例 (二) - 程式碼解析(A篇)
系列文
ASP.NET Web Form 入門30天30

尚未有邦友留言

立即登入留言