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>