ASP.net Core
開發網站的時候，後台系統都會遇到很常見的功能是母子視窗的功能，在這邊實作一個範例，做記錄
建立ProductController.cs
using Microsoft.AspNetCore.Mvc;
namespace ProductMVCDemo.Controllers
{
public class ProductController : Controller
{
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult Save(string ProductName, string CategoryId, string CategoryName)
{
// 模擬儲存資料邏輯
TempData["Message"] = $"產品: {ProductName}, 類別: {CategoryId} - {CategoryName} 已儲存！";
return RedirectToAction("Index");
}
}
}
建立檢視
<!DOCTYPE html>
<html>
<head>
<title>產品資料</title>
<script>
// 接收子視窗傳遞的類別資料
function receiveCategory(categoryId, categoryName) {
document.getElementById("CategoryId").value = categoryId;
document.getElementById("CategoryName").value = categoryName;
}
// 開啟子視窗
function openCategorySelector() {
// 子視窗的寬高
var width = 600;
var height = 400;
// 螢幕的寬高
var screenWidth = window.screen.width;
var screenHeight = window.screen.height;
// 計算子視窗的位置 (置中)
var left = (screenWidth - width) / 2;
var top = (screenHeight - height) / 2;
// 打開子視窗
window.open(
'/Category/Select', // 子視窗網址
'選擇產品類別', // 子視窗標題
`width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes` // 視窗屬性
);
}
</script>
</head>
<body>
<h1>產品資料</h1>
<form method="post" action="/Product/Save">
<label for="ProductName">產品名稱：</label>
<input type="text" id="ProductName" name="ProductName" /><br><br>
<label for="CategoryId">類別代號：</label>
<input type="text" id="CategoryId" name="CategoryId" readonly /><br><br>
<label for="CategoryName">類別名稱：</label>
<input type="text" id="CategoryName" name="CategoryName" readonly /><br><br>
<button type="button" onclick="openCategorySelector()">選擇類別</button>
<button type="submit">儲存</button>
</form>
</body>
</html>上述編寫一個javascript click事件打開子視窗。
新增子視窗
using Microsoft.AspNetCore.Mvc;
namespace ProductMVCDemo.Controllers
{
public class CategoryController : Controller
{
public IActionResult Select()
{
// 模擬產品類別資料
ViewBag.Categories = new[]
{
new { Id = "101", Name = "電子產品" },
new { Id = "102", Name = "家用電器" },
new { Id = "103", Name = "服飾" }
};
return View("Select");
}
}
}
@{
Layout = null; // 明確指定不使用 Layout
}
<!DOCTYPE html>
<html>
<head>
<title>選擇產品類別</title>
<script>
// 選擇類別並將資料回傳到母視窗
function selectCategory(categoryId, categoryName) {
if (window.opener && !window.opener.closed) {
window.opener.receiveCategory(categoryId, categoryName); // 傳值給母視窗
window.close(); // 關閉子視窗
} else {
alert("無法找到母視窗！");
}
}
</script>
</head>
<body>
<h1>選擇產品類別</h1>
<table border="1">
<thead>
<tr>
<th>類別代號</th>
<th>類別名稱</th>
<th>操作</th>
</tr>
</thead>
<tbody>
@foreach (var category in ViewBag.Categories)
{
<tr>
<td>@category.Id</td>
<td>@category.Name</td>
<td><button onclick="selectCategory('@category.Id', '@category.Name')">選擇</button></td>
</tr>
}
</tbody>
</table>
</body>
</html>
元哥的筆記
