ASP.NET MultiView 與 GridView：JavaScript 彈出視窗雙向傳值實戰

常見需求：主頁點擊連結開啟彈出視窗選取學生資料 (GridView 分頁)，選取後將學號回填主頁並觸發按鈕事件。本文完整示範 MultiView 切換檢視、GridView 分頁選取、JavaScript window.opener 回傳值與自動觸發 PostBack。

頁面架構

• Default.aspx (母視窗)：TextBox 顯示學號、LinkButton 開啟彈出視窗、Button 提交。
• StudentSelector.aspx (彈出視窗)：MultiView 含兩個 View：搜尋條件、GridView 結果。支援分頁、排序、選取。

母視窗關鍵代碼

<asp:TextBox ID="txtStudentId" runat="server" />
<asp:LinkButton ID="LinkButton1" runat="server"
    OnClientClick="window.open('StudentSelector.aspx','sel','width=600,height=400');return false;">
    選取學生</asp:LinkButton>
<asp:Button ID="btnSubmit" runat="server" Text="送出" OnClick="btnSubmit_Click" />

<script>
function setStudentId(id) {
    document.getElementById('<%= txtStudentId.ClientID %>').value = id;
    // 可選：自動觸發提交
    // __doPostBack('<%= btnSubmit.UniqueID %>','');
}
</script>

彈出視窗 GridView 選取回傳

<asp:GridView ID="gvStudents" runat="server" AutoGenerateColumns="False"
    DataKeyNames="StudentId" AllowPaging="True" PageSize="10"
    OnPageIndexChanging="gvStudents_PageIndexChanging"
    OnSelectedIndexChanging="gvStudents_SelectedIndexChanging">
    <Columns>
        <asp:CommandField ShowSelectButton="True" SelectText="選取" />
        <asp:BoundField DataField="StudentId" HeaderText="學號" />
        <asp:BoundField DataField="StudentName" HeaderText="姓名" />
        <asp:BoundField DataField="ClassName" HeaderText="班級" />
    </Columns>
</asp:GridView>

protected void gvStudents_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)
{
    string studentId = gvStudents.DataKeys[e.NewSelectedIndex].Value.ToString();
    // 註冊啟動腳本，關閉視窗並回傳值
    string script = $@"window.opener.setStudentId('{studentId}'); window.close();";
    ClientScript.RegisterStartupScript(GetType(), "returnValue", script, true);
}

MultiView 切換搜尋/結果

<asp:MultiView ID="mvMain" runat="server" ActiveViewIndex="0">
    <asp:View ID="vSearch" runat="server">
        <asp:TextBox ID="txtKeyword" runat="server" />
        <asp:Button ID="btnSearch" runat="server" Text="搜尋" OnClick="btnSearch_Click" />
    </asp:View>
    <asp:View ID="vResult" runat="server">
        <!-- GridView 放這裡 -->
    </asp:View>
</asp:MultiView>

protected void btnSearch_Click(object sender, EventArgs e)
{
    BindGridView(txtKeyword.Text);
    mvMain.ActiveViewIndex = 1; // 切到結果檢視
}

資料庫與資料存取

使用 StudentDB.mdf (SQL Express)，單一 Students 表：StudentId (PK, Identity)、StudentName、ClassName。資料存取採用 SqlDataSource 或後端 SqlCommand 填充 DataTable。

進階：避免彈出視窗被封鎖

• 改用 ModalPopupExtender (AJAX Control Toolkit) 或 Bootstrap Modal，同頁面內彈出，不受瀏覽器攔截。
• 若必須用 window.open，建議在使用者明確點擊 (Click 事件) 時呼叫，非載入時自動開啟。