iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 6
0
Modern Web

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

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

本篇擷取重點:

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

備註:副程式的程式碼,待下篇解析。


下方,為介接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表格,其中有三個重點:

  1. 什麼是 += ? 直接以例子來說明,a += 1 等同 a = a+1 。

  2. 因為希望table表格的標題是可以點選的超連結,故放一個HTML語法的a連結包在< td >裡面,需要注意的是a連結不能直接放在< td >標籤上。

  3. 字串的組合方式:

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

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


明日預定內容:

  1. 繼續解析本篇副程式程式碼的部分
  2. 相對主程式,副程式的概念及應用方式
  3. 網頁傳遞參數的方法(GET/POST)及應用


上一篇
[ASP.NET] 使用開放資料( Open Data ) 實作篇,以"高雄市政府相關求才資訊發佈"為例 (一)
下一篇
[ASP.NET] 使用開放資料( Open Data ) 實作篇,以"高雄市政府相關求才資訊發佈"為例 (三) - 程式碼解析(B篇)
系列文
ASP.NET Web Form 入門30天30

尚未有邦友留言

立即登入留言