DevExpress の ASPxPopupControl での別画面を表示のサンプルです。
今までは、1画面内のプログラムで「ASPxPopupControl」を表示していました。
実際のプログラムになりますとプログラム量が多くなって不便です。
今回は2画面に分けて今まで通りの表示を行っていきます。
現状の画面デザインはこのようになっています。
＜画面1＞
↓
＜画面2＞
＜プログラム構成＞
・画面1：WebForm1.aspx
・画面2：WebForm2.aspx
「ASPxPopupControl」オブジェクトのプロパティを変更していきます。
※プロパティ画像は「グループ表示」
＜別画面を表示＞
画面1のポップアップ画面に画面2を表示します。
「ContentUrl」の「…」をクリックします。
↓
「WebForm2.aspx」を選択します。
↓
「ContentUrl=”~/WebForm2.aspx”」が設定されます。
【生成PG（画面1）】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<form id="form1" runat="server"> <div> <dx:ASPxButton ID="ASPxButton1" runat="server" Text="ポップアップ表示" EnableTheming="True" Theme="RedWine"> <ClientSideEvents Click="function(s, e) { dlgPop.Show(); }" /> </dx:ASPxButton> </div> <div> <dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" ClientInstanceName="dlgPop" Theme="RedWine" Width="400px" AllowDragging="True" CloseAction="CloseButton" CloseOnEscape="True" Modal="True" AllowResize="True" HeaderText="ログイン入力画面" PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter" ShowCollapseButton="True" ShowMaximizeButton="True" PopupElementID="ASPxButton1" ContentUrl="~/WebForm2.aspx" Height="200px"> <ModalBackgroundStyle BackColor="#F479A5"> </ModalBackgroundStyle> </dx:ASPxPopupControl> </div> </form> |
ポップアップのクローズですが、親画面のポップアップクローズとして、
「window.parent.dlgPop.Hide();」に変更します。
【生成PG（画面2）】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<form id="form1" runat="server"> <div> <table> <tr> <td> <dx:ASPxLabel ID="ASPxLabel1" runat="server" Text="ユーザ名" Font-Bold="True" Font-Size="Medium" Theme="RedWine"> </dx:ASPxLabel> </td> <td> <dx:ASPxTextBox ID="ASPxTextBox1" runat="server" Width="170px" Theme="RedWine"> </dx:ASPxTextBox> </td> </tr> <tr> <td> <dx:ASPxLabel ID="ASPxLabel2" runat="server" Text="パスワード" Font-Bold="True" Font-Size="Medium" Theme="RedWine"> </dx:ASPxLabel> </td> <td> <dx:ASPxTextBox ID="ASPxTextBox2" runat="server" Width="170px" Password="True" Theme="RedWine"> </dx:ASPxTextBox> </td> </tr> <tr> <td> <dx:ASPxButton ID="ASPxButton2" runat="server" Text="OK" Theme="RedWine" Width="100px" AutoPostBack="False"> <ClientSideEvents Click="function(s, e) { window.parent.dlgPop.Hide(); }" /> </dx:ASPxButton> </td> <td> <dx:ASPxButton ID="ASPxButton3" runat="server" Text="CANCEL" Theme="RedWine" Width="100px" AutoPostBack="False"> <ClientSideEvents Click="function(s, e) { window.parent.dlgPop.Hide(); }" /> </dx:ASPxButton> </td> </tr> </table> </div> </form> |
それでは、実行して動作確認を行います。
実行して、「ポップアップ表示」ボタンをクリックします。
G
無事にポップアップ（ASPxPopupControl）の別画面表示が出来ました。
