先做資料清單頁
在 Models資料夾下新增
Employee.cs

程式如下

  public class Employee
    {
        public int id { get; set; }
      
        public string LoginID { get; set; }
       
        public string Username { get; set; }

        public string Gender { get; set; }
    
        public string PhoneNumber { get; set; }
    }

Controllers 資料夾下 新增一個 EmployeeController
程式碼如下

 public ActionResult Index()
        {
           string sql = " Select *  From Employee";

            DBHelper db = new DBHelper();

            //  取得 SqlDataReader，將從資料庫中獲取的資料放入其中
            SqlDataReader sqlDataReader = db.GetSqlDataReader(sql);
         
            List<Employee> Employee = new List<Employee>();

            while (sqlDataReader.Read())
            {
                Employee.Add(new Employee
                {
                    id = sqlDataReader.GetInt32(0),
                    LoginID = sqlDataReader.GetString(1),
                    Username = sqlDataReader.GetString(2),
                    Gender = sqlDataReader.GetString(3),
                    PhoneNumber = sqlDataReader.GetString(4)
                 
                });
            }

            sqlDataReader.Close();
            
            return View(Employee);
        }

程式碼說明如下
DBHelper db = new DBHelper(); - 創建了一個名為DBHelper的資料庫幫助類的實例

SqlDataReader sqlDataReader = db.GetSqlDataReader(sql); - 使用DBHelper的GetSqlDataReader方法執行SQL查詢，並獲取SqlDataReader物件，它可以用來讀取查詢結果的資料。

List Employee = new List(); - 創建了一個名為Employee的List，用於存儲從資料庫中檢索的Employee資料。

while (sqlDataReader.Read()) - 這是一個while循環，它在SqlDataReader還有更多記錄可讀取時執行。

在循環中，從SqlDataReader中讀取每一條記錄的各個欄位的值，然後創建一個新的Employee物件，將這些值設置為Employee物件的屬性。

sqlDataReader.Close(); - 關閉SqlDataReader，釋放資源。

return View(Employee); - 返回一個View，將剛剛從資料庫中檢索的Employee資料列表傳遞給View，以便在網頁上顯示這些資料。

Employee資料夾下 建立一個 Index.cshtml 的檔案
程式如下

<table class="gridview">
    <tr>
    
        <th>帳號</th>
        <th>使用者名稱</th>
        <th>性別</th>
        <th>電話號碼</th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr class="table-row">
            <td>@Html.DisplayFor(modelItem => item.LoginID)</td>
            <td>@Html.DisplayFor(modelItem => item.Username)</td>
            <td>@Html.DisplayFor(modelItem => item.Gender)</td>
            <td>@Html.DisplayFor(modelItem => item.PhoneNumber)</td>
             <td>@Html.ActionLink("編輯", "Edit", "Employee", new { id = item.LoginID }, null)</td>
        </tr>
    }
</table>

<style>
   
    .table-row {
        background-color: white;
    }

        /* 滑鼠移過行時的樣式 */
        .table-row:hover {
            background-color: deepskyblue;
        }
    .gridview {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        margin-bottom: 20px;
    }

        .gridview th, .gridview td {
            padding: 8px;
            border: 1px solid #ddd;
            text-align: left;
        }

       

        .gridview tr:hover {
            background-color: deepskyblue;
        }
</style>

主要程式說明如下
@foreach (var item in Model) - 這是一個C#代碼區塊，用於遍歷從控制器傳遞到頁面的Model，Model包含了Employee資料的列表。

執行畫面如下

滑鼠滑過時變色