昨天講了如何利用網路上的JSON資料來源，轉成C#的類別模型後，將其呈現在網頁上，今天我們延續昨天的內容，來使用一個常用的套件-PagedList。套件的用途很簡單就是分頁，比方說昨天的Youbike範例，在沒有分頁的情況下，資料會洋洋灑灑全部顯示在同一頁，總共有1000多筆內容。

因此我們今天就利用這個範例來示範PagedList的做法，順便稍微美化一下頁面吧！

● 安裝PagedList套件

首先至NuGet套件管理員找到PagedList.Mvc這個套件並安裝，安裝完成後就可以繼續下一步驟。 ※注意是要選有Mvc的套件

● Controller方法修改

接著將JSONController內原本的Youbike()動作方法修改成如下Code：

        public async Task<ActionResult> Youbike(int page = 1) //預設頁面為1
        {
            var model = await JSONService.GetDataAsync_Youbike();
            
            //顯示第幾頁，當參數< 1時會設定為第1頁，避免不正確輸入
            var currentPage = page < 1 ? 1 : page;

            //每頁資料筆數
            var pageSize = 20;

            //將取得資料model轉成PagedList
            var pageModel = model.OrderBy(x => x.sno).ToPagedList(currentPage, pageSize);
            return View(pageModel);
        }

● View修改

View的部分在最上面添加@using PagedList;與@using PagedList.Mvc;，然後在View的最尾端新增這行Code:

@Html.PagedListPager((IPagedList)Model, x => Url.Action("youbike", new { page = x}))

這樣就可以在最下面顯示頁面連結了～

另外我們將欄位稍微瘦身一下，僅顯示比較重要的資訊，完整Code如下：

@model IEnumerable<JsonDemoWebsite.Models.Youbike>
@using PagedList;
@using PagedList.Mvc;  
@{
    ViewBag.Title = "Youbike";
}

<h2>Youbike</h2>

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.sno)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.sna)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.tot)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.sbi)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.sarea)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.mday)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.lat)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.lng)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ar)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.bemp)
        </th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.sno)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.sna)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.tot)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.sbi)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.sarea)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.mday)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.lat)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.lng)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ar)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.bemp)
        </td>
    </tr>
}
</table>
@Html.PagedListPager((IPagedList)Model, x => Url.Action("youbike", new { page = x}))

● Model修改

最後我們讓欄位的表頭顯示成中文字，比較清楚每一欄的意思，但怎麼知道這些屬性表示哪個中文意思呢？原則上像政府平台的公開資料會提供說明，不過這份資料點進去網站看 https://data.gov.tw/dataset/137993 好像沒有提供，於是下面留言就有人發問了，我是參考資料內容與留言回覆才拼湊出來的，另外有些屬性沒有呈現在View就偷懶沒加[DisplayName]。

所以將Youbike類別修改如下Code：

    public class Youbike
    {
        [DisplayName("編號")]
        public string sno { get; set; }

        [DisplayName("站點")]
        public string sna { get; set; }

        [DisplayName("總車位")]
        public int tot { get; set; }

        [DisplayName("可借車位")]
        public int sbi { get; set; }

        [DisplayName("區域")]
        public string sarea { get; set; }

        [DisplayName("資料更新時間")]
        public string mday { get; set; }

        [DisplayName("緯度")]
        public float lat { get; set; }

        [DisplayName("經度")]
        public float lng { get; set; }

        [DisplayName("地址")]
        public string ar { get; set; }

        [DisplayName("area")]
        public string sareaen { get; set; }

        [DisplayName("name")]
        public string snaen { get; set; }

        [DisplayName("address")]
        public string aren { get; set; }

        [DisplayName("可還空位數")]
        public int bemp { get; set; }

        public string act { get; set; }

        public string srcUpdateTime { get; set; }

        public string updateTime { get; set; }

        public string infoTime { get; set; }

        public string infoDate { get; set; }
    }

完成後頁面執行如下：

可以看到每頁顯示筆數變為20筆了，並且可以點選各頁連結。

● 小結

今天內容比較簡單就介紹到這邊，明天終於要邁向完賽啦～
這段期間如果對於系列文章有任何問題的話，歡迎不吝嗇底下留言告知與指教，那我們就明天見啦～