ASP.NET 子頁面關閉後觸發父頁面局部刷新的經典實作模式

應用場景

父頁面以 window.open 開啟子頁面（如新增/編輯對話框），子頁面完成儲存後關閉，父頁面需自動更新 GridView、Repeater 等資料繫結控制項，且不整頁重新載入。

核心原理

1. 父頁面放置一個 隱藏按鈕 (style="display:none")，綁定 OnClick 伺服器端事件執行資料重繫。
2. 父頁面暴露 JavaScript 函式 btnFreshData() 呼叫 click() 觸發該隱藏按鈕的 PostBack。
3. 子頁面儲存成功後，透過 window.opener 呼叫父頁面函式，再自我關閉。

完整程式碼實作

父頁面

// 後置碼
protected void btnFresh_Click(object sender, EventArgs e)
{
    BindGridView(); // 重新查詢繫結
}

子頁面

// 儲存成功後的後置碼
protected void btnSave_Click(object sender, EventArgs e)
{
    // ... 執行儲存邏輯 ...

    // 註冊啟動腳本：呼叫父頁面刷新 -> 關閉自身
    string script = @"
        if (window.opener && window.opener.btnFreshData) {
            window.opener.btnFreshData();
        }
        window.close();
    ";
    ClientScript.RegisterStartupScript(this.GetType(), "closeAndRefresh", script, true);
}

現代化改良建議

純前端 AJAX 版本範例 (jQuery)

// 父頁面
function refreshGrid() {
    $.get("DataHandler.ashx", function(html) {
        $("#gvContainer").html(html); // 替換局部 HTML
    });
}

// 子頁面 (iframe 或 modal 中的表單)
$("#btnSave").click(function() {
    $.post("SaveHandler.ashx", $("#form").serialize(), function(res) {
        if (res.success) {
            window.parent.refreshGrid(); // 父頁面函式
            closeModal(); // 關閉對話框
        }
    });
});