【ASP.NET コントロール】【AJAX】ASP.NET AJAX Control Toolkit (ModalPopupExtender, モーダル編)

Modal表示について

サーバコントロール

 * ScriptManager (ツールボックスの[AJAX Extentions]-[ScriptManager]から選択。これがないと落ちる)
 * ModalPopupExtender X 1
 * Label X 1 (Label1。Modalからの値を表示させる)
 * Button X 1 (Button1。Modal表示用)
 * Panel X 1 (Panel1。Modal表示用)
   + TextBox X 1 (TextBox1。ModalのTextBox)
   + Button X 2 (Button2、3。ModalのOK・キャンセルボタン)

ModalPopupExtenderのプロパティ

 * Drag:True 
 * DropShadow:True
 * OkControlID:【ModalのOKボタン】
 * CancelControlID:【ModalのCancelボタン】
 * oncancelscript:【Modalのキャンセルボタン】 
 * onokscript:【ModalのOKボタン押下後のイベントハンドラ】
               (仮に「onOkButtonOnModal()」)
 * PopupControlID:【Modal表示用】
 * TargetControlID:【Modal表示用】
 * PopupDragHandleControlID:モーダル・ウィンドウをドラッグするために使用するハンドル部を表すコントロールのID値(一般的にはヘッダ/タイトル部を表すパネル)

サンプル

<head runat="server">
<title></title>
<script language="javascript" type="text/javascript">
<!--
    function clickOK() {
        $get("Label1"). innerHTML = "Your type : " + $get("Text1").value + ".";
    }
// -->
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:LinkButton ID="LinkButton1" runat="server">ポップアップ</asp:LinkButton><br />
        <asp:ModalPopupExtender ID="LinkButton1_ModalPopupExtender" runat="server" 
            TargetControlID="LinkButton1" PopupControlID="Panel1"
            OkControlID="Button1"
            OnOkScript="clickOK()" CancelControlID="Button2"
            DropShadow="true" Drag="true" PopupDragHandleControlID="Panel2"
            DynamicServicePath="" Enabled="True">
        </asp:ModalPopupExtender>
        <asp:Panel ID="Panel1" runat="server">
          <asp:Panel ID="Panel2" runat="server" Wrap="False" BackColor="#C0C0FF">
            <p>Please Input your data :</p>
            <p>
              <asp:TextBox ID="Text1" runat="server"></asp:TextBox>
              <asp:Button ID="Button1" runat="server" Text="決定" />
              <asp:Button ID="Button2" runat="server" Text="キャンセル" />
            </p>
          </asp:Panel>
        </asp:Panel>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </div>
    </form>
</body>

参考文献

http://www.atmarkit.co.jp/fdotnet/dotnettips/580aspajaxmodalpopup/aspajaxmodalpopup.html

関連記事

ASP.NETでshowModalDialogを使わずに、モーダル表示 ~Step1~

http://blogs.yahoo.co.jp/dk521123/28248646.html

ASP.NET AJAX Control Toolkit (ModalPopupExtender, モーダル編)

http://blogs.yahoo.co.jp/dk521123/folder/982850.html

ASP.NETでshowModalDialog()を利用したモーダルの子画面ダイアログを表示する(1)

http://blogs.yahoo.co.jp/dk521123/27710267.html

ASP.NETでshowModalDialog()を利用したモーダルの子画面ダイアログを表示する(2)

http://blogs.yahoo.co.jp/dk521123/27723613.html

モーダルの子画面ダイアログを作成する

http://blogs.yahoo.co.jp/dk521123/27419535.html

カレンダーコントロール(Calendar)

http://blogs.yahoo.co.jp/dk521123/26916160.html