ASP.NET MVC 彈出視窗的三種實作方式：window.open、超連結、jQuery Dialog 與表單 Target 技巧

方式一：按鈕 onclick 直接 window.open

<input type="button" value="新增部門"
       onclick="window.open('@Url.Action("AddDepartment")', '', 'height=180,width=550,resizable=yes,scrollbars=no,top=350,left=500')" />

方式二：超連結 onclick window.open (支援帶參數)

@foreach (var item in Model)
{
    <a href="#" 
       onclick="window.open('@Url.Action("EditDepartment", new { id = item.Id })', '', 'width=530,height=200,top=300,left=500')"
    >修改</a><br />
}

**優點**：`Url.Action` 強型別產生 URL、自動編碼參數。

方式三：jQuery UI Dialog / Bootstrap Modal (推薦現代專案)

<!-- 觸發按鈕 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#deptModal" data-id="@item.Id">修改</button>

<!-- Modal 內容 -->
<div class="modal fade" id="deptModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"><h5>編輯部門</h5></div>
      <div class="modal-body">
        @{ Html.RenderPartial("_EditDepartmentPartial"); }
      </div>
    </div>
  </div>
</div>

<script>
$('#deptModal').on('show.bs.modal', function (e) {
    var id = $(e.relatedTarget).data('id');
    // AJAX 載入部分視圖或填充表單
    $(this).find('.modal-body').load('@Url.Action("EditDepartmentPartial")', { id: id });
});
</script>

表單提交後關閉視窗並刷新父頁面

// 子視圖表單
@using (Html.BeginForm("EditDepartment", "Admin", FormMethod.Post, new { target = "mainFrame" }))
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(m => m.Id)
    @Html.TextBoxFor(m => m.Name)
    <input type="submit" value="儲存" onclick="setTimeout(() => window.close(), 500);" />
}

**技巧**：`target="mainFrame"` 指定提交目標為父頁面的 `