返回筆記列表
/ 筆記詳情
期中考.docx是南台科技大學-資訊管理系王派洲老師於2025/11/13所出的網頁程式設計的期中考題目，附件中有完整的程式碼原始檔案供各位同學下載。¶
本次期中考的主要題型為字串、清單、字典、變數，以下為題目解答：¶
1. 建立清單字典變數 products¶
目的¶
在 HomeController 的 Index 動作中，建立一個 List<Dictionary<string, object>> 變數 products，用來存放產品資料。
實作步驟¶
- 宣告一個
List<Dictionary<string, object>>變數。 - 每個
Dictionary包含三個鍵值對：gender（性別）、name（名稱）、pic（圖片檔名）。 - 將所有產品資料加入
products清單。
程式碼¶
var products = new List<Dictionary<string, object>>
{
new Dictionary<string, object>{{"gender",1},{"name","外套類"},{"pic","w1.jpg"}},
new Dictionary<string, object>{{"gender",1},{"name","T恤/休閒SWEAT/刷毛/BRATOP"},{"pic","w2.jpg"}},
new Dictionary<string, object>{{"gender",1},{"name","刷毛"},{"pic","w3.jpg"}},
new Dictionary<string, object>{{"gender",1},{"name","BRATOP罩杯式上衣"},{"pic","w4.jpg"}},
new Dictionary<string, object>{{"gender",2},{"name","外套類"},{"pic","m1.jpg"}},
new Dictionary<string, object>{{"gender",2},{"name","T恤/休閒SWEAT/刷毛"},{"pic","m2.jpg"}},
new Dictionary<string, object>{{"gender",2},{"name","襯衫/POLO衫"},{"pic","m3.jpg"}},
new Dictionary<string, object>{{"gender",2},{"name","針織衫/開襟外套"},{"pic","m4.jpg"}},
};
注意事項¶
gender：1 代表女性，2 代表男性。name：產品名稱。pic：對應圖片檔名。
2. 接收使用者送出的性別選項¶
目的¶
當使用者送出網頁性別選項時，Index 動作可以收到使用者送出的性別選項。
實作步驟¶
- 在
HomeController中，使用[HttpPost]屬性定義Index動作。 - 接收
int gender參數，對應表單的name="gender"。
程式碼¶
[HttpPost]
public IActionResult Index(int gender)
{
// ...
}
注意事項¶
gender參數會自動綁定到表單的name="gender"的值。- 當使用者選擇性別並按下送出，
gender參數會取得對應的值。
3. 篩選 products 變數¶
目的¶
在 Index 動作中，依據使用者選項篩選 products 變數。
實作步驟¶
- 建立
Product模型清單pds。 - 使用 LINQ 的
Where方法篩選出對應的產品。
程式碼¶
var filtered = pds.Where(p => p.Gender == gender).ToList();
注意事項¶
pds是使用Product模型建立的清單。filtered是篩選後的結果。
4. 傳遞資料至檢視頁面並顯示¶
目的¶
將篩選後的資料傳遞至 Index 檢視頁面並顯示對應產品圖片與名稱。
實作步驟¶
- 將篩選後的資料傳遞給
View。 - 在
Index.cshtml中使用@model List<Product>來接收。 - 使用
foreach迴圈顯示產品圖片與名稱。
程式碼¶
return View(filtered);
注意事項¶
- 在檢視頁面中，使用
@foreach迴圈顯示產品。
5. 定義產品類別 Product¶
目的¶
定義產品類別 Product，包含屬性 gender、name、pic。
實作步驟¶
- 建立
Product類別。 - 定義三個屬性：
Gender、Name、Pic。
程式碼¶
public class Product
{
public int Gender { get; set; }
public string Name { get; set; } = string.Empty;
public string Pic { get; set; } = string.Empty;
}
注意事項¶
Gender：性別（1 女，2 男）。Name：產品名稱。Pic：圖片檔名。
6. 建立 Product 清單物件 pds¶
目的¶
使用先前資料建立 Product 清單物件 pds。
實作步驟¶
- 將字典資料轉換為
Product清單。 - 使用
Select方法將字典轉換為Product物件。
程式碼¶
var pds = products.Select(d => new Product
{
Gender = Convert.ToInt32(d["gender"]),
Name = d["name"].ToString() ?? string.Empty,
Pic = d["pic"].ToString() ?? string.Empty
}).ToList();
注意事項¶
- 使用
Select方法將字典轉換為Product物件。
7. 使用 Product 模型進行篩選、資料傳遞與顯示¶
目的¶
使用 Product 模型進行篩選、資料傳遞與顯示。
實作步驟¶
- 篩選：
pds.Where(p => p.Gender == gender).ToList() - 傳遞：
return View(filtered) - 顯示：在
Index.cshtml中使用@foreach迴圈顯示產品。
程式碼¶
var filtered = pds.Where(p => p.Gender == gender).ToList();
return View(filtered);
注意事項¶
- 使用
Product模型可以讓程式碼更清晰、易於維護。
完整程式碼¶
HomeController.cs¶
using System.Diagnostics;
using _2025_11_13_mid_test.Models;
using Microsoft.AspNetCore.Mvc;
namespace _2025_11_13_mid_test.Controllers
{
public class HomeController : Controller
{
[HttpGet]
public IActionResult Index()
{
var products = new List<Dictionary<string, object>>
{
new Dictionary<string, object>{{"gender",1},{"name","外套類"},{"pic","w1.jpg"}},
new Dictionary<string, object>{{"gender",1},{"name","T恤/休閒SWEAT/刷毛/BRATOP"},{"pic","w2.jpg"}},
new Dictionary<string, object>{{"gender",1},{"name","刷毛"},{"pic","w3.jpg"}},
new Dictionary<string, object>{{"gender",1},{"name","BRATOP罩杯式上衣"},{"pic","w4.jpg"}},
new Dictionary<string, object>{{"gender",2},{"name","外套類"},{"pic","m1.jpg"}},
new Dictionary<string, object>{{"gender",2},{"name","T恤/休閒SWEAT/刷毛"},{"pic","m2.jpg"}},
new Dictionary<string, object>{{"gender",2},{"name","襯衫/POLO衫"},{"pic","m3.jpg"}},
new Dictionary<string, object>{{"gender",2},{"name","針織衫/開襟外套"},{"pic","m4.jpg"}},
};
var pds = products.Select(d => new Product
{
Gender = Convert.ToInt32(d["gender"]),
Name = d["name"].ToString() ?? string.Empty,
Pic = d["pic"].ToString() ?? string.Empty
}).ToList();
ViewData["SelectedGender"] = 0;
return View(pds);
}
[HttpPost]
public IActionResult Index(int gender)
{
var products = new List<Dictionary<string, object>>
{
new Dictionary<string, object>{{"gender",1},{"name","外套類"},{"pic","w1.jpg"}},
new Dictionary<string, object>{{"gender",1},{"name","T恤/休閒SWEAT/刷毛/BRATOP"},{"pic","w2.jpg"}},
new Dictionary<string, object>{{"gender",1},{"name","刷毛"},{"pic","w3.jpg"}},
new Dictionary<string, object>{{"gender",1},{"name","BRATOP罩杯式上衣"},{"pic","w4.jpg"}},
new Dictionary<string, object>{{"gender",2},{"name","外套類"},{"pic","m1.jpg"}},
new Dictionary<string, object>{{"gender",2},{"name","T恤/休閒SWEAT/刷毛"},{"pic","m2.jpg"}},
new Dictionary<string, object>{{"gender",2},{"name","襯衫/POLO衫"},{"pic","m3.jpg"}},
new Dictionary<string, object>{{"gender",2},{"name","針織衫/開襟外套"},{"pic","m4.jpg"}},
};
var pds = products.Select(d => new Product
{
Gender = Convert.ToInt32(d["gender"]),
Name = d["name"].ToString() ?? string.Empty,
Pic = d["pic"].ToString() ?? string.Empty
}).ToList();
var filtered = pds.Where(p => p.Gender == gender).ToList();
ViewData["SelectedGender"] = gender;
return View(filtered);
}
public IActionResult Privacy()
{
return View();
}
[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
public IActionResult Error()
{
return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
}
}
}
Product.cs¶
namespace _2025_11_13_mid_test.Models
{
public class Product
{
public int Gender { get; set; }
public string Name { get; set; } = string.Empty;
public string Pic { get; set; } = string.Empty;
}
}
Index.cshtml¶
@model List<_2025_11_13_mid_test.Models.Product>
@{
ViewData["Title"] = "Home Page";
var selected = ViewData["SelectedGender"] as int? ?? 0;
}
<div class="d-flex justify-content-center">
<form class="row" asp-action="Index" method="post">
<div class="col-auto">
<select class="form-select" name="gender">
<option value="0">全部</option>
@if (selected == 1)
{
<option value="1" selected>Women</option>
}
else
{
<option value="1">Women</option>
}
@if (selected == 2)
{
<option value="2" selected>Men</option>
}
else
{
<option value="2">Men</option>
}
</select>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary col-auto">選擇</button>
</div>
</form>
</div>
<div class="border-1 m-2 row vw-100">
@if (Model != null && Model.Any())
{
foreach (var p in Model)
{
<div class="col-3 text-center mb-3">
<img src="~/images/@p.Pic" class="img-fluid" alt="@p.Name" />
<div>@p.Name</div>
</div>
}
}
else
{
<div class="col-12">沒有產品。</div>
}
</div>
以上教學與程式碼範例，完整涵蓋了題目要求的各項功能，適合用於教學或作業解說。
附件 223
2025-11-13 mid-test
(6)
wwwroot
(1)
lib
(0)
jquery-validation-unobtrusive
(1)
jquery-validation
(1)
jquery
(1)
bootstrap
(1)
dist
(0)
js
(12)
css
(32)
images
(8)
Views
(2)
Shared
(4)
obj
(5)
Debug
(0)
net10.0
(30)
scopedcss
(0)
compressed
(64)
bin
(0)
Debug
(0)
net10.0
(5)
vs
(0)
CopilotSnapshots
(0)
964E35AB745AEF41A9B780BB4DBAFF50
(1)
D91236F719074841A503A646E45E9E10
(10)
2025-11-13 mid-test.slnx
(0)
v18
(3)
copilot-chat
(0)
2025-11-13 mid-test
(0)
CopilotIndices
(0)