ポップアップウィンドウが閉じられたときに再検索を行う方法

開発 ASP.NET Tips

概要

この記事では、ポップアップウィンドウが閉じられたときに、呼び出し元画面 (親画面) の再検索を行う方法について説明します。環境は、 ASP.NET (C#, VB.NET) を想定しています。この Tips では、 ClientScript.GetPostBackEventReference() を使用します。

親画面サンプル (呼び出し元画面)

親画面の aspx 側では、ポップアップのためのボタン (ButtonPopup) を用意しています。また、表示したときの日時を出力することで、画面がリロードされたかどうかを判断しやすくしています。

<%= DateTime.Now.ToString() %>
<asp:Button ID="ButtonPopup" runat="server" Text="OpenPopup" />

コードビハインド (.cs) 側では、ポップアップするための JavaScript をボタンの OnClientClick プロパティに設定しています。 JavaScript では、 window.open でポップアップ画面を呼び出し、 ClientScript.GetPostBackEventReference() の戻り値を QueryString として渡しています。戻り値を渡している理由は、ポップアップ側からこの画面へ強制ポストバックを発生させるためです。

ボタンへの JavaScript 設定は、 Page_Load() (IsPostBack が true でも false でも両方) の時に行ってください。 !IsPostBack のときだけ設定を行うと、ポストバック後に JavaScript が正しく設定されなくなります。

// ポップアップ画面の呼び出し元 (Default.aspx.cs)
ButtonPopup.OnClientClick = string.Format(
    "window.open(\"Popup.aspx?postback={0}\"); return false;",
    Server.UrlEncode(ClientScript.GetPostBackEventReference(this, string.Empty)));

ポップアップ画面サンプル

ポップアップ画面の aspx 側では、画面クローズ用のボタンを用意しているだけです。主要な処理はコードビハインド側に固まっています。

<asp:Button ID="ButtonClose" runat="server" Text="Close" />

コードビハインド側では、親画面から渡されたコードを呼び出し、 window.close() する JavaScript を設定しています。ボタンがクリックされると、親画面にポストバックを発生させ、自画面をクローズします。

// 呼び出されるポップアップ画面 (Popup.aspx.cs)
ButtonClose.OnClientClick = string.Format(
    "window.opener.{0}; window.close(); return false;",
    Server.UrlDecode(Request.QueryString["postback"]));

まとめ

この記事では、ポップアップウィンドウが閉じられたときに、親画面で再検索を行う方法について説明しました。この処理が必要となる状況は、「ポップアップ画面で DB に登録した」→「登録結果を確認するため、親画面を自動的に再検索」などを行いたい場合です。

(このような Tips を紹介しておいてこういうことを言うのも微妙な感じがしますが、できるだけポップアップ画面が必要にならない設計にすることをおすすめします。)