iT邦幫忙

2024 iThome 鐵人賽
DAY 30
0
自我挑戰組

asp.net可以變出那些功能系列 第 30 篇

加上資料表後的: 實用日語 列表

16th鐵人賽
108 瀏覽

  • 分享至 

  • xImage
    •  

https://laihao2.com/Home/Contact
https://ithelp.ithome.com.tw/upload/images/20241007/20119035XnRzRnYaJ3.png

資料表參考昨天~

Controllers裡面的Entities>這裡跟前面的就不同，因為有帶入資料表

public ActionResult Contact(string category = null)
        {
            var data = _db.ChineseJapaneseTable.AsQueryable();

            if (!string.IsNullOrEmpty(category))
            {
                data = data.Where(x => x.Category == category);
            }

            // 返回所有數據或者篩選後的數據
            return View(data.ToList());
        }

解釋程式碼
這段 C# 代碼定義了一個 ASP.NET MVC 控制器中的 Contact 動作，用於根據 category 參數查詢並返回數據庫中的數據。讓我們逐步解釋每個部分的功能：

  1. 方法定義:

    public ActionResult Contact(string category = null)
    • 這是一個名為 Contact 的方法，返回一個 ActionResult，通常是一個視圖。
    • 參數 category 是一個可選參數，如果沒有提供，默認為 null。

  2. 查詢數據庫:

    var data = _db.ChineseJapaneseTable.AsQueryable();
    • _db.ChineseJapaneseTable 指的是數據庫中 ChineseJapaneseTable 表。
    • AsQueryable() 將數據轉換為可查詢的對象，允許之後添加過濾條件。

  3. 根據 category 參數進行篩選:

    if (!string.IsNullOrEmpty(category))
{
    data = data.Where(x => x.Category == category);
}
    • if (!string.IsNullOrEmpty(category)) 檢查是否提供了 category 參數，如果提供了且不為空：
      • data = data.Where(x => x.Category == category) 會過濾 ChineseJapaneseTable 表中的數據，返回 Category 等於指定 category 的數據。

  4. 返回數據:

    return View(data.ToList());
    • data.ToList() 將查詢結果轉換為列表。
    • return View(data.ToList()) 將該數據列表傳遞給視圖，從而在前端展示查詢結果。

總結：

  • 這個方法會根據前端傳遞的 category 參數，篩選數據庫中 ChineseJapaneseTable 表的記錄，並返回符合條件的數據。如果沒有提供 category 參數，則返回所有記錄。

產生畫面View程式碼

@model IEnumerable<WebApplication5.Models.ChineseJapaneseTable>

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Contact";
}


@*@{
    ViewBag.Title = "Contact";
}*@
<h2>內容包含:</h2>


<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中文和日文資料表</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>中文和日文資料表</h1>
    <h2>
        分類:
        <a href="@Url.Action("Contact")">所有</a> |
        <a href="@Url.Action("Contact", new { category = "入境審查" })">入境審查</a> |
        <a href="@Url.Action("Contact", new { category = "N2考試內容" })">N2考試內容</a> |
        <a href="@Url.Action("Contact", new { category = "訂單" })">訂單</a> |
        <a href="@Url.Action("Contact", new { category = "職場日文" })">職場日文</a> |
        <a href="@Url.Action("Contact", new { category = "生活日語" })">生活日語</a> |
        <a href="@Url.Action("Contact", new { category = "俚語" })">俚語</a> |
        <a href="@Url.Action("Contact", new { category = "格言" })">格言</a> |
        <a href="@Url.Action("Contact", new { category = "其他" })">其他</a> |
        <a href="@Url.Action("Contact", new { category = "買東西" })">買東西</a>
    </h2>
   
    <table>
        <thead>
            @*
                <tr>
                    <th>序號</th>
                    <th>中文</th>
                    <th>日文</th>
                    <th>備註</th>
                    <th>分類</th>

                </tr>*@
            <tr>
                <th>@Html.DisplayNameFor(model => model.Chinese)</th>
                <th>@Html.DisplayNameFor(model => model.Japanese)</th>
                <th>@Html.DisplayNameFor(model => model.Note)</th>
                <th>@Html.DisplayNameFor(model => model.Category)</th>
                <th>操作</th> <!-- 新增一個列用於操作 -->
            </tr>
        </thead>
        @*
            <tbody>
                <tr>
                    <td>1</td>
                    <td>你好</td>
                    <td>こんにちは</td>
                    <td>例子1</td>
                    <td>生活日語</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>再見</td>
                    <td>さようなら</td>
                    <td>例子2</td>
                    <td>生活日語</td>
                </tr>
                <!-- 你可以添加更多行 -->
            </tbody>*@

        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>@Html.DisplayFor(modelItem => item.Chinese)</td>
                    <td>@Html.DisplayFor(modelItem => item.Japanese)</td>
                    <td>@Html.DisplayFor(modelItem => item.Note)</td>

                    <td>@Html.DisplayFor(modelItem => item.Category)</td>

                    <td>
                        <!-- 新增 "編輯" 按鈕，鏈接到 Contact_Edit -->
                        @Html.ActionLink("編輯", "Contact_Edit", new { id = item.Id }, new { @class = "btn btn-primary" })
                    </td>
                </tr>
            }
        </tbody>
    </table>
</body>
</html>

解釋程式碼
這段代碼是一個 ASP.NET MVC 視圖（Razor 語法），用於顯示 ChineseJapaneseTable 數據表中的內容，包含篩選、展示以及“編輯”功能。以下是逐步解析：

1. 模型聲明：

@model IEnumerable<WebApplication5.Models.ChineseJapaneseTable>
  • 該視圖使用一個模型，類型為 IEnumerable<WebApplication5.Models.ChineseJapaneseTable>，即傳遞給視圖的模型是一個 ChineseJapaneseTable 實例的集合。

2. 頁面布局和標題：

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Contact";
}
  • Layout 表示該視圖使用 _Layout.cshtml 作為布局文件，用於共享頁面頭部、腳部等。
  • ViewBag.Title = "Contact"; 設置頁面標題為 "Contact"。

3. HTML結構和樣式：

  • HTML部分定義了一個簡潔的頁面，用來顯示數據庫中的表格內容。
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中文和日文資料表</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
  • 設置了頁面的字符編碼和響應式布局，使用 CSS 使表格寬度為 100%，並添加了邊框、內邊距和對齊樣式。

4. 分類篩選功能：

<h2>
    分類:
    <a href="@Url.Action("Contact")">所有</a> |
    <a href="@Url.Action("Contact", new { category = "入境審查" })">入境審查</a> |
    <a href="@Url.Action("Contact", new { category = "N2考試內容" })">N2考試內容</a> |
    ...
</h2>
  • 提供了一系列分類鏈接，用戶點擊時會根據不同的 category 進行數據篩選。點擊某個分類鏈接時，會發送帶有 category 參數的請求到 Contact 方法，實現數據過濾。

5. 數據表格的頭部：

<thead>
    <tr>
        <th>@Html.DisplayNameFor(model => model.Chinese)</th>
        <th>@Html.DisplayNameFor(model => model.Japanese)</th>
        <th>@Html.DisplayNameFor(model => model.Note)</th>
        <th>@Html.DisplayNameFor(model => model.Category)</th>
        <th>操作</th> <!-- 新增一個列用於操作 -->
    </tr>
</thead>
  • 使用了 @Html.DisplayNameFor 來自動顯示每個字段的名稱（如 “中文”、”日文” 等），根據模型的屬性名稱生成表頭。
  • 最後一列 操作 是為操作按鈕（如“編輯”）預留的。

6. 數據行顯示：

<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>@Html.DisplayFor(modelItem => item.Chinese)</td>
            <td>@Html.DisplayFor(modelItem => item.Japanese)</td>
            <td>@Html.DisplayFor(modelItem => item.Note)</td>
            <td>@Html.DisplayFor(modelItem => item.Category)</td>
            <td>
                @Html.ActionLink("編輯", "Contact_Edit", new { id = item.Id }, new { @class = "btn btn-primary" })
            </td>
        </tr>
    }
</tbody>
  • @foreach 循環遍歷 Model，即從控制器傳遞過來的 ChineseJapaneseTable 數據集合。
  • @Html.DisplayFor 用於顯示每條記錄的屬性值，包括中文、日文、備注和分類。
  • 每條記錄的最後一列添加了一個 “編輯” 按鈕，使用 @Html.ActionLink 生成鏈接，指向 Contact_Edit 動作，並傳遞當前記錄的 id，允許用戶編輯相應的條目。

7. 操作按鈕：

@Html.ActionLink("編輯", "Contact_Edit", new { id = item.Id }, new { @class = "btn btn-primary" })
  • 這個鏈接會跳轉到 Contact_Edit 動作，並傳遞 id 參數以識別具體要編輯的記錄。按鈕的樣式類被設置為 btn btn-primary，可以與 CSS 框架（如 Bootstrap）結合使用來提供按鈕樣式。

總結：

  • 該視圖展示了一個數據表的內容，允許用戶通過分類鏈接進行數據篩選，並提供“編輯”按鈕來修改每條記錄。數據通過控制器傳遞，動態生成表格內容，並且頁面樣式和布局都是簡潔實用的。

加上資料表後的: 實用日語 修改
https://laihao2.com/Home/Contact_Edit/1
https://ithelp.ithome.com.tw/upload/images/20241007/20119035LlCO0yYYhW.png

資料表參考昨天~

Controllers裡面的Entities>

public ActionResult Contact_Edit(int id)
        {
            ViewBag.Layout = "~/Views/Shared/_Layout.cshtml";

            // 根據 ID 獲取對應的 ChineseJapaneseTable 條目
            var cus = _db.ChineseJapaneseTable.Find(id);

            if (cus == null)
            {
                return HttpNotFound(); // 如果找不到相應的記錄，返回 404
            }

            return View(cus); // 傳遞模型到視圖
        }

        [HttpPost]
        public ActionResult Contact_Edit(ChineseJapaneseTable cus)
        {
            if (ModelState.IsValid)
            {
                // 更新現有的數據庫條目
                _db.Entry(cus).State = System.Data.Entity.EntityState.Modified;
                _db.SaveChanges(); // 保存更改到數據庫

                return RedirectToAction("Contact"); // 完成後重定向到 Contact 頁面或其他頁面
            }

            return View(cus); // 如果模型驗證失敗，返回表單視圖並顯示錯誤信息
        }

解釋程式碼
這段代碼定義了 ASP.NET MVC 中的 Contact_Edit 動作方法，提供了對 ChineseJapaneseTable 數據表記錄的編輯功能。它分為兩個部分：GET 請求用於加載並顯示編輯頁面，POST 請求用於提交編輯後的數據並保存更改。

1. GET 請求 (Contact_Edit 方法)：

public ActionResult Contact_Edit(int id)
{
    ViewBag.Layout = "~/Views/Shared/_Layout.cshtml";

    // 根據 ID 獲取對應的 ChineseJapaneseTable 條目
    var cus = _db.ChineseJapaneseTable.Find(id);

    if (cus == null)
    {
        return HttpNotFound(); // 如果找不到相應的記錄，返回 404
    }

    return View(cus); // 傳遞模型到視圖
}
  • 方法簽名：該方法接受一個整數 id 作為參數，這是要編輯的記錄的唯一標識符。
  • ViewBag.Layout：設置布局文件，指定使用共享布局 _Layout.cshtml。
  • 數據檢索：
    • var cus = _db.ChineseJapaneseTable.Find(id); 根據傳遞的 id 在數據庫 ChineseJapaneseTable 表中查找相應的記錄。
  • 檢查記錄是否存在：
    • if (cus == null) 判斷是否找到相應記錄。如果未找到，返回 HttpNotFound()，顯示 404 錯誤頁面。
  • 返回視圖：
    • return View(cus); 將查找到的記錄（模型）傳遞給視圖，在頁面上顯示供用戶編輯。

2. POST 請求 (Contact_Edit 方法)：

[HttpPost]
public ActionResult Contact_Edit(ChineseJapaneseTable cus)
{
    if (ModelState.IsValid)
    {
        // 更新現有的數據庫條目
        _db.Entry(cus).State = System.Data.Entity.EntityState.Modified;
        _db.SaveChanges(); // 保存更改到數據庫

        return RedirectToAction("Contact"); // 完成後重定向到 Contact 頁面或其他頁面
    }

    return View(cus); // 如果模型驗證失敗，返回表單視圖並顯示錯誤信息
}
  • 方法簽名：這是一個處理表單提交的 POST 方法，接受一個 ChineseJapaneseTable 類型的參數 cus，即用戶在編輯表單中修改後的數據。
  • 模型驗證：
    • if (ModelState.IsValid) 檢查模型的狀態是否有效。這個驗證通常包括必填字段檢查、數據格式正確性等。
  • 更新數據庫記錄：
    • _db.Entry(cus).State = System.Data.Entity.EntityState.Modified; 將傳遞的 cus 實體標記為“修改”狀態。
    • _db.SaveChanges(); 將更改保存到數據庫。
  • 重定向：
    • return RedirectToAction("Contact"); 完成編輯後，重定向到 Contact 頁面，顯示更新後的數據列表。
  • 驗證失敗時返回：
    • 如果模型驗證失敗（如數據輸入不合法），則返回原始視圖 return View(cus);，並顯示表單中的錯誤信息。

總結：

  • GET 方法：根據傳入的 id 獲取要編輯的記錄，加載編輯視圖讓用戶進行修改。如果記錄不存在，返回 404 錯誤。
  • POST 方法：提交用戶編輯後的數據，驗證數據有效性後，將更改保存到數據庫。成功保存後，重定向到 Contact 頁面，否則重新顯示編輯表單並顯示驗證錯誤。

產生畫面View程式碼

@model WebApplication5.Models.ChineseJapaneseTable

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
    ViewBag.Title = "Contact_Edit";
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Contact_Edit</title>
</head>
<body>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")


    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>中文和日文資料表:內容</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)

        <div class="form-group">
            @Html.LabelFor(model => model.Chinese, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Chinese, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Chinese, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Japanese, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Japanese, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Japanese, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Note, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Note, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Note, "", new { @class = "text-danger" })
            </div>
        </div>

        @*<div class="form-group">
            @Html.LabelFor(model => model.Category, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Category, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Category, "", new { @class = "text-danger" })
            </div>
        </div>*@
        <div class="form-group">
            @Html.LabelFor(model => model.Category, htmlAttributes: new { @class = "control-label col-md-2" })
            @{
                var listItemsCategory = new List<SelectListItem>
{
                    new SelectListItem { Text = "請選擇", Value = "請選擇", Selected = true },
                    new SelectListItem { Text = "入境審查", Value = "入境審查" },
                    new SelectListItem { Text = "N2考試內容", Value = "N2考試內容" },
                    new SelectListItem { Text = "訂單", Value = "訂單" },
                    new SelectListItem { Text = "職場日文", Value = "職場日文" },
                    new SelectListItem { Text = "生活日語", Value = "生活日語" },
                    new SelectListItem { Text = "俚語", Value = "俚語" },
                    new SelectListItem { Text = "格言", Value = "格言" },
                    new SelectListItem { Text = "其他", Value = "其他" },
                    new SelectListItem { Text = "買東西", Value = "買東西" }
                };
            }
            @Html.DropDownList("Category", listItemsCategory, htmlAttributes: new { @class = "form-control", style = "width: 100%;" })
            @Html.ValidationMessageFor(model => model.Category, "", new { @class = "text-danger" })
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="存檔" class="btn btn-default" />
            </div>
        </div>
    </div>
    }

    <div>
        @Html.ActionLink("回到總表", "Contact")
    </div>
</body>
</html>

解釋程式碼
這段代碼定義了一個視圖，用於編輯 ChineseJapaneseTable 中的記錄。它包含一個 HTML 表單，用戶可以在表單中輸入、修改數據並提交。以下是代碼的詳細解釋：

1. 模型與布局設置：

@model WebApplication5.Models.ChineseJapaneseTable

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
    ViewBag.Title = "Contact_Edit";
}
  • @model：指定視圖的模型類型為 ChineseJapaneseTable，這樣視圖可以訪問該模型的屬性。
  • Layout：定義了該視圖的布局文件為 _Layout.cshtml，這是一個共享的布局。
  • ViewBag.Title：設置頁面的標題為 "Contact_Edit"。

2. HTML Form (表單)：

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
  • Html.BeginForm()：生成一個 POST 請求的表單，表單的目標是當前控制器的 Contact_Edit 動作。
  • @Html.AntiForgeryToken()：生成一個防偽令牌，確保表單提交的安全性，防止跨站請求偽造（CSRF）攻擊。

3. 表單布局與表單字段：

<div class="form-horizontal">
    <h4>中文和日文資料表:內容</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    @Html.HiddenFor(model => model.Id)
  • form-horizontal：使用 Bootstrap 的水平表單布局。
  • @Html.ValidationSummary：顯示模型驗證的錯誤摘要，錯誤消息會以紅色 (text-danger) 樣式顯示。
  • @Html.HiddenFor(model => model.Id)：隱藏字段，用於傳遞 Id，這個字段不會顯示給用戶，但提交時會一起傳遞。

4. 中文字段：

<div class="form-group">
    @Html.LabelFor(model => model.Chinese, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Chinese, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.Chinese, "", new { @class = "text-danger" })
    </div>
</div>
  • @Html.LabelFor：生成一個 label 標簽，綁定到模型的 Chinese 屬性。
  • @Html.EditorFor：生成一個輸入框，讓用戶輸入或修改中文內容。
  • @Html.ValidationMessageFor：如果輸入不符合驗證規則（如必填項），在這里顯示錯誤消息。

5. 日文字段與備注字段：

與中文字段類似，日文和備注字段同樣使用 LabelFor、EditorFor 和 ValidationMessageFor，分別生成標簽、輸入框和驗證錯誤提示。

6. 分類字段（使用下拉列表）：

<div class="form-group">
    @Html.LabelFor(model => model.Category, htmlAttributes: new { @class = "control-label col-md-2" })
    @Html.DropDownList("Category", listItemsCategory, htmlAttributes: new { @class = "form-control", style = "width: 100%;" })
    @Html.ValidationMessageFor(model => model.Category, "", new { @class = "text-danger" })
</div>
  • DropDownList：這里使用了一個下拉列表來選擇分類。選項被預先定義為一個 SelectListItem 列表，並傳遞給下拉菜單。選項包括 "入境審查", "N2考試內容", "訂單", "職場日文" 等等。
  • ValidationMessageFor：如果用戶沒有選擇有效的分類，將在這里顯示驗證錯誤信息。

7. 提交按鈕與返回鏈接：

<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <input type="submit" value="存檔" class="btn btn-default" />
    </div>
</div>

<div>
    @Html.ActionLink("回到總表", "Contact")
</div>
  • <input type="submit">：生成提交按鈕，點擊後將表單數據提交到服務器。
  • @Html.ActionLink：生成一個鏈接，點擊後將跳轉到 Contact 頁面（顯示總表的頁面）。

8. 腳本引用：

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
  • 引入 jQuery 和 jQuery.validate 的腳本包，確保表單驗證等功能正常工作。

總結：

  • 該視圖展示了一個用於編輯 ChineseJapaneseTable 數據的表單。
  • 用戶可以編輯記錄中的中文、日文、備注以及分類字段。
  • 表單通過 POST 請求提交數據，並包含驗證功能以確保輸入的合法性。

大家明年見~
/images/emoticon/emoticon01.gif


上一篇
實用日語加入資料庫寫法:新增
系列文
asp.net可以變出那些功能 共 30 篇
  1. 26
    現在很流行的VUE
  2. 27
    簡約風
  3. 28
    簡約風首頁看留言的地方
  4. 29
    實用日語加入資料庫寫法:新增
  5. 30
    加上資料表後的: 實用日語 列表
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22088 篇
完賽人數
594 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙