.net5 core Razor項目實戰系列之四：部門管理功能的實現（部門列表顯示）

部門管理的功能相對比較簡單，用戶點【部門管理】的連接，頁面顯示部門列表，

在列表中可以對部門做新增，修改，作廢操作，畫面如下：

為簡單起見，我們要實現的功能使用新建工程時默認的布局頁，在頁面上添加【部門管理】這樣一個超鏈接，

指向DeptList.cshtm這個文件。打開_Layout.cshtml文件，加入如下代碼，見紅色代碼：

<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
    <ul class="navbar-nav flex-grow-1">
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
        </li>

        <li class="nav-item"> <!--頁面中的鏈接地址不需要加.cshtml的后綴--> <a class="nav-link text-dark" asp-area="" asp-page="/Auth/DeptList">【部門管理】</a> </li>

        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
        </li>
    </ul>
</div>

在解決方案管理器Pages文件夾中新建Auth文件夾，新建DeptList.cshtml頁面：

先到DeptList.cshtml.cs文件中添加獲取部門列表的代碼，如下：

namespace AuthManagement.Pages.Auth
{
    public class DeptListModel : PageModel
    {
        private readonly AuthDbContext _context;

        //構造函數中對AuthDbContext做依賴注入
        public DeptListModel(AuthDbContext context)
        {
            _context = context;
        }

        //定義部門列表屬性，用於傳遞給.cshtml頁面使用(在OnGet()方法中賦值)
        public IList<TDept> DeptList { get; set; }

        public void OnGet()
        {
            //用構造函數中注入的AuthDbContext的實例_context取得所有部門數據並轉換成泛型List            
            DeptList = _context.TDepts.ToList<TDept>();
        }
    }
}

注：

（1）在Razor頁面中，OnGet( ) 是 xxx.cshtml.cs 文件中約定的方法，它表示如果用 Get 的方式訪問 xxx.cshtml 頁面就執行此方法，

所以獲取部門列表的操作要放在這個方法中，同理，如果用 Post 的方式訪問 xxx.cshtml 頁面則需要

寫一個 OnPost( ) 方法（比如多條件查詢列表數據的時候可以用Post提交這些查詢條件），

OnGet( ) 和 OnPost( ) 各有一個異步版，分別是 OnGetAsync( ) 和 OnPostAsync( ) 方法，

OnGet( ) 和 OnGetAsync( ) 不能同時出現（Post也一樣），但 OnGet( ) 和 OnPost( ) 可以同時出現 。

（2）有些時候我們會調用OnGet( )的重載方法（有路由參數的時候，后面再具體講），比如給列表排序，

方法的簽名可能是這樣的 public void OnGet(string sortBy )，此時不能再出現 OnGet( ) 方法，

原來調用 OnGet( ) 方法的需要做相應處理。

Razor頁面 DeptList.cshtml 接收 Model 的屬性 DeptList 傳遞過來的值並遍歷輸出部門信息，代碼如下：

@page
@model AuthManagement.Pages.Auth.DeptListModel
@using AuthManagement.DbUtil.Entity
@{
    ViewData["Title"] = "部門管理";
}

<table border="1" width="60%">   
    <tr style="background-color:antiquewhite;height:40px;">
        <td>編號</td>
        <td>名稱</td>
        <td>創建時間</td>
    </tr>
    @foreach (TDept item in Model.DeptList) //遍歷輸出部門信息
    {
    <tr style="height:30px;">
        <td>@item.DeptId</td>
        <td>@item.DeptName</td>
        <td>@item.CreateTime</td>
    </tr>
    }
    @if (Model.DeptList.Count == 0)
    { 
    <tr style="height:30px;">
        <td colspan="3" align="center">沒有查詢到部門數據！</td> 
    </tr>
    }
</table>

編譯后運行頁面，得到如下畫面。

沒有數據時：

有數據時：