iT邦幫忙

2024 iThome 鐵人賽

DAY 0
0
自我挑戰組

ASP.NET Core生成網站記錄系列 第 19

DAY20 -X.PagedList

  • 分享至 

  • xImage
  •  

命名空間:
X.PagedList 和 X.Web.PagedList:引入用於分页功能的命名空間。
empdemo.Models.Employees:指定 View 所使用的 Model 類型,也就是從 Controller 傳來的員工資料集合。
HTML
@{
ViewData["Title"] = "員工資料列表";
Layout = "_Layout";
}
請謹慎使用程式碼。

View 資料:
ViewData["Title"]:設定頁面的標題。
Layout = "_Layout":指定使用 _Layout 作為頁面的佈局。
HTML

Card 元件:
使用 Bootstrap 的 Card 元件,為整個資料列表區域加上一個外框。
HTML

分页器:
@Html.PagedListPager:這是 X.PagedList 提供的 Helper,用來產生分页連結。
(IPagedList)Model:將 Model 強制轉型為 IPagedList,以便使用分页功能。
x => Url.Action("Index", "Employee", new { area = "", page = x }):產生分页連結的 URL,當使用者點擊分页連結時,會重新呼叫 Employee Controller 的 Index Action,並傳入新的頁碼。
HTML

資料表格:
使用 HTML 的 標籤,將員工資料以表格形式呈現。

資料列迴圈:
遍歷 Model 中的每一筆員工資料,產生一個 標籤,並在其中顯示該筆資料的各欄位值。
HTML
@Html.ActionLink("修改", "Edit", "Employee", new { area = "", id = item.Id }, new { @class = "btn btn-success" })
請謹慎使用程式碼。

Action Link:
使用 @Html.ActionLink 產生一個連結,點擊後會呼叫 Employee Controller 的 Edit Action,並傳入該筆員工的 ID,以進行修改操作。


上一篇
DAY19- Employee Crud
下一篇
DAY20-WAIT(待修)
系列文
ASP.NET Core生成網站記錄31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言