施展漂亮魔法~✨Bootstrap5 實際操作演練！

嗨嗨~今天要來學習如何用Bootstrap將表單做美化啦~( ᴖ ·̫ ᴖ )
這次所使用的範例是第12天的員工資料表單，沒看過的朋友們可以參考這篇⬇️
Day12：如何使用Scaffolding建立CRUD表單
那接下來就直接來看看程式碼吧~

實際操作過程✨
首先，我們先在table前加上標題文字及其class屬性。

<div class="h-100 p-3 text-white rounded-3 mb-4">
    <h2>員工基本資料</h2>
</div>

接著再用Bootstrap的table-*樣式去美化table

<table class="table table-bordered table-striped table-hover align-middle">
...
</table>

在每個欄位前都加上Font Awesome的圖示，再新增一欄員工編號。

<table class="table table-bordered table-striped table-hover align-middle">
    <thead>
        <tr>
            <th>
                <i class="fa fa-bars"></i>
                @Html.DisplayNameFor(model => model.Id)
            </th>
            <th>
                <i class="fa fa-user"></i>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                <i class="fa fa-mobile"></i>
                @Html.DisplayNameFor(model => model.Mobile)
            </th>
            <th>
                <i class="fa fa-envelope-square"></i>
                @Html.DisplayNameFor(model => model.Email)
            </th>
            <th>
                <i class="fa fa-home"></i>
                @Html.DisplayNameFor(model => model.Department)
            </th>
            <th>
                <i class="fa fa-address-book"></i>
                @Html.DisplayNameFor(model => model.Title)
            </th>
        </tr>
    </thead>
    ...
    </table>

新增員工編號欄位資料

<table class="table table-bordered table-striped table-hover align-middle">
...
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Id)
                </td>
                ...
            </tr>
        }
    </tbody>
</table>

將英文超連結改為中文，並套用Bootstrap的Button樣式

<a asp-action="Edit" asp-route-id="@item.Id" class="btn btn-primary">編輯</a>
                    <a asp-action="Details" asp-route-id="@item.Id" class="btn btn-success">明細</a>
                    <a asp-action="Delete" asp-route-id="@item.Id" class="btn btn-danger">刪除</a>

將<a asp-action = "Create">Create New</a>移到</table>之後，並做修改

<p>
    <a asp-action="Create" class="btn btn-warning">新增員工資料</a>
</p>

在View頁面新增CSS定義，為Table設定欄位標題顏色，在資料列上加入Hover效果

<style type="text/css">

    /* 設定Table欄位標題顏色 */
    th {
        color: white;
        background-color: black !important;
        text-align: center;
    }
</style>

將英文欄位改為中文顯示，方法是在Employee模型的每個屬性前加上[Display(name = "中文名稱")]
路徑🔗Models\Employee.cs

using System.ComponentModel.DataAnnotations;
namespace Employees_table.Models
{
    public class Employee
    {
        [Display(Name ="員工編號")]
        public int Id { get; set; }
        [Display(Name = "姓名")]
        public string Name { get; set; }
        [Display(Name = "行動電話")]
        public string Mobile { get; set; }
        [Display(Name = "電子郵件")]
        public string Email { get; set; }
        [Display(Name = "部門")]
        public string Department { get; set; }
        [Display(Name = "職稱")]
        public string Title { get; set; }
    }
}

在瀏覽IndexBootstrap.cshtml前，要在EmployeesController中加入對應的IndexBootstrap()動作方法，用來非同步EF Core
路徑🔗Controllers\EmployeesController.cs

public async Task<IActionResult> IndexBootstrap()
{
    return View(await _context.Employee.ToListAsync());
}

最後執行出來的Bootstrap結果會長這樣⬇️

然後我自己覺得Bootstrap做出來還是有點不在我的審美上，所以就再用CSS做了一個⬇️

程式碼如下⬇️

@model IEnumerable<Employees_table.Models.Employee>

@{
    ViewData["Title"] = "Index";
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@5.15.4/css/all.min.css" integrity="sha384-rOA1PnstxnOBLzCLiurY7u4J3q3qG8NBvzFw1gobP5o6JGq5Whx1uNf3yG7zeZDy" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap" rel="stylesheet">

<div class="h-100 p-3 text-white rounded-3 mb-4" style="background-color: #b2c2a1;">
    <h2>員工基本資料</h2>
</div>

<table class="table table-bordered table-hover align-middle" style="text-align:center">
    <thead>
        <tr>
            <th>
                <i class="fas fa-bars"></i>
                @Html.DisplayNameFor(model => model.Id)
            </th>
            <th>
                <i class="fas fa-user"></i>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                <i class="fas fa-mobile"></i>
                @Html.DisplayNameFor(model => model.Mobile)
            </th>
            <th>
                <i class="fas fa-envelope-square"></i>
                @Html.DisplayNameFor(model => model.Email)
            </th>
            <th>
                <i class="fas fa-home"></i>
                @Html.DisplayNameFor(model => model.Department)
            </th>
            <th>
                <i class="fas fa-address-book"></i>
                @Html.DisplayNameFor(model => model.Title)
            </th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Id)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Mobile)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Department)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Title)
                </td>
                <td>
                    <a asp-action="Edit" asp-route-id="@item.Id" class="btn-custom">編輯</a>
                    <a asp-action="Details" asp-route-id="@item.Id" class="btn-custom">明細</a>
                    <a asp-action="Delete" asp-route-id="@item.Id" class="btn-custom">刪除</a>
                </td>
            </tr>
        }
    </tbody>
</table>
<p>
    <a asp-action="Create" class="btn-custom">新增員工資料</a>
</p>

<style type="text/css">
    /* 設定全局字型為 Noto Serif TC */
    body {
        font-family: 'Noto Serif TC', serif;
    }

    /* 設定Table欄位標題顏色 */
    th {
        color: black;
        background-color: #e3e7dc !important;
        text-align: center;
    }

    .btn-custom {
        background-color: #b2c2a1; /* 主要按鈕背景色 */
        border: none;
        color: black;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 12px;
    }

        .btn-custom:hover {
            background-color: #d1d8c4; /* 懸停時顏色 */
        }
</style>