きよくらの備忘録

「三日坊主と呼ばせない!日記」改め。主にソフトウェア開発関連の話題。

PopupControlExtender をJavascriptで閉じる

すぐに出来そうなのに、やろうと思うとよくやり方が解らなかったので、メモ。

ASP.NET AJAX Control Toolkit のPopupControl(PopupControlExtender)は、表示させた後に他の所(例えばBodyとか)をクリックすると消えるけれど、PopupしたPanel上でのインタラクティブな操作でPopupを消させたかった。



単純な例で行くと、まあ、Popupしたパネル上に「閉じる」ボタンがあって、それをクリックしたらpopupされているPanelを再度隠す、という動作。



一回ポストバックさせてよいなら簡単っぽかったんだけど、今回はポストバックさせたくなった*1


で、調べていると、Javascriptにて、以下のメソッドをコールすれば良いことを発見。

AjaxControlToolkit.PopupControlBehavior.__VisiblePopup.hidePopup();

つまり、例えば以下の用にすれば良いみたい。

<script type="text/javascript">

  // ボタンがクリックされたらやりたい処理。
  // つまり、本題。
  function yaritai_syori(){
     // 本題の処理
  }

  // まあ、ボタンクリックのイベントハンドラとでも思って下さい。
  function HogeButtonClick(){
    // 本来のやりたい処理をやって……
    yaritai_syori();

    // Popupを消す。
    AjaxControlToolkit.PopupControlBehavior.__VisiblePopup.hidePopup();
  }
</script>
<!-- このPanel1をPopupControlExtenderでPopupする -->
<asp:Panel id="Panel1" runat="server">
  <input type="button" onclick="HogeButtonClick();" />
</asp:Panel>

*1:実際は、ポップされパネル上のボタン押下でJavascriptでちょろっと処理をして、それが済んだらポップアップを消したかった。