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

第 11 屆 iThome 鐵人賽

DAY 6

Modern Web

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

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

11th鐵人賽

碼屋( MARK WU )

團隊火箭隊

2019-09-07 19:31:18

7183 瀏覽

分享至

本篇擷取重點：

(.aspx.cs)之主程式的程式碼逐步詳盡解析
InnerHtml屬性及 InnerText屬性的使用方法及差異
呼叫陣列內物件之值及物件內屬性之值的方式

備註：副程式的程式碼，待下篇解析。

下方，為介接JSON字串的程式碼分段解析(.aspx.cs)，若有錯誤的地方，還請各位大大協助糾正

首先我們來看看程式碼全文，如下

protected void Page_Load(object sender, EventArgs e)
    {
        string content = index.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;
    }

可以發現，有兩段程式碼處在平行的位置，分別為主程式(Page_Load) 及副程式(GetJsonContent)，

註明：副程式擺放的位置就在主程式之後的平行位置。

第一部分為主程式(Page_Load)，Page_Load 事件會在頁面加載時被觸發執行

string content = GetJsonContent("https://www.ktec.gov.tw/ktec_api.php?type=json");

設立字串 content 來接，將網址字串(丟入)副程式GetJsonContent(回傳)的字串，

Data data = JsonConvert.DeserializeObject<Data>(content);

Data類別為是我們為介接此JSON格式字串所創建的新類別，

如果還是沒有印象，請看上篇點我

但由於網路傳遞時是以json格式的字串傳遞，所以物件在傳遞的過程中間需要多一個轉換的程序，即為反序列化及序列化。而這邊為接收資料，故使用的是反序列化DeserializeObject，即將JSON格式字串轉為物件。

反序列化DeserializeObject是JSON.NET類別庫的指令，故使用前，除了需於專案下載Newtonsoft.Json套件外，還須於(.aspx.cs)上方進行引用using Newtonsoft.Json;

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++;
    }
    // a 不能包 td
    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>";

message為(.aspx的span標籤的ID)，在這邊單純作，將在(.aspx.cs)生成HTML語法傳至(.aspx)的接口。

意即，在(.aspx.cs)生成有意義的HTML語法字串傳回(.aspx)，於(.aspx)產生效果。

屬性InnerHtml，不會自動對 HTML語法進行特殊字元的編碼。

意即，(.aspx.cs)傳輸的字元中若包含HTML語法，(.aspx)將會對該HTML語法產生作用。

下方舉個簡單的例子：

(.aspx.cs)：

message.InnerHtml += "<b>粗體</b>";

(.aspx)：

<span id="message" runat="server"><b>粗體</b></span>;

網頁顯示：
粗體

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

但若我們希望的效果是在網頁顯示< b > 粗體 < /b > 呢?

則應該選用，另一個屬性InnerText , 會自動對 HTML語法進行特殊字元的編碼。

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

接下來，我們用到了HTML語法的TABLE表格，

< caption >< /caption >為表格外的上方標題
< table >< /table >包住所有的表格元素，如< tr >< th >< td >
< tr >< /tr >代表表格的一橫列，包住< th >或< td >
< th >< /th >代表表格內的上方欄位
< td >< /td >代表表格內的一格

這部分比較容易理解且繁瑣就不另外逐行解釋了。

接下來，進入迴圈的部分

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++;
    }
    // a 不能包 td
    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++;
    }
}

大家的第一個疑問可能會是 data.entries 是什麼?

ANS：這邊即是我們新建類別中，data類別下的entries。

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

物件呼叫值的方式：物件名.屬性名，如本例 data.entries
陣列呼叫值的方式：陣列名[儲存位置編號]，從0開始

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

這邊是一個foreach()的迴圈，此方法會將陣列內的每個元素，皆傳入並執行給定的函式一次。

意即，data.entries陣列內的每個元素皆會被丟進該函式一次，而該元素在函式期間是以變數item代表。

if (item.title.Length > 35){
    //程式碼....
}
else{
    //程式碼....
}

此條件判斷式，代表當變數item(data.entries)下的title屬性的值的長度，大於35時會進入此函式。不大於35時會進入else函式。

    item.title = item.title.Substring(0, 35);
    item.title += "...<詳情請點>";

為避免標題長短不一導致表格混亂，故針對標題進行長度限制，
先定義變數item下的title屬性之值，只顯示前面35個字，並於後方加上...<詳情請點>
使用的就是 Substring(起始字元位置, 字元長度) 這個方法。

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

這部分是在組合table表格，其中有三個重點：

什麼是 += ? 直接以例子來說明，a += 1 等同 a = a+1 。
因為希望table表格的標題是可以點選的超連結，故放一個HTML語法的a連結包在< td >裡面，需要注意的是a連結不能直接放在< td >標籤上。
字串的組合方式：

a.最基本的方式："字串1"+ 變數 +"字串2"，此法每個字串皆要用"雙引號"包起來而且需要判斷程式碼的斷行位置，很麻煩
b.進階的方式：$"字串1+{變數}+字串2"，若在字串前加上$錢字號，則只需輸入前後一對"雙引號"，而變數直接用大括號包起來即可，這個方式比較直觀好用，推薦。

else函式的概念相同，筆者這邊就不多作說明了，讀者可以試著解釋看看 >///<

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

今天的進度就先到這邊，明天同一時間請準時收看下集

明日預定內容：