本篇擷取重點:
一、建立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)/
==================================================================
貼心小補充:
==================================================================
四、作法概述
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;
}
五、成果
完成了!! 有沒有國小電腦課下載"小朋友騎打交遊戲"的那個網站,
史萊姆的第一個家,那種陽春網頁的既視感 (好像透露太多年紀惹)
上一個看到成品的人對我說,這個美感太優秀,還好你不是走前端... 幫QQ
後記: