Web アプリケーション (ASP.NET) で画面遷移をしてみよう(その2)
Web アプリケーションで、今度はポップアップ画面を表示させてみましょう。
※解説に用いた Visual Studio 2005 の Edition は、Team System Edition です。
サンプルのダウンロード
■Web サイトの作成
Web サイトの作成についてはWeb アプリケーション (ASP.NET) を作ってみようと
全く同じなのでここでは割愛します。
※今回は、場所を MyWebApp03 としました。
■Web フォームの追加
Web フォームの追加についてはWeb アプリケーション (ASP.NET) で画面遷移をしてみよう(その1)と
全く同じなのでここでは割愛します。
■コントロールの配置
コントロールの配置についてもWeb アプリケーション (ASP.NET) で画面遷移をしてみよう(その1)と
全く同じなのでここでは割愛します。
■コードを入力
MenuPage を デザイナ上または、ソリューションエクスプローラ上で、右クリックした時に現れるコンテキストメニューから[コードの表示]をクリックし、
コードビューに切り替えてください。
以下のコードを入力します。
Web アプリケーション (ASP.NET) で画面遷移をしてみよう(その1)と変わっているのは
MenuPage.aspx.vb の Button1_Click の最後の方だけです。
Partial Class MenuPage Inherits System.Web.UI.Page Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click Dim inputedString As String = Me.TextBox1.Text ' 入力されていなかった時はエラーメッセージを出力して処理終了 If inputedString = "" Then Me.Label1.Text = "お名前をテキストボックスに入力して下さい" Me.TextBox1.Focus() Return End If ' 入力されていた時は Session に格納して画面遷移 ' Session に格納 Session("user_name") = inputedString Me.Label1.Text = "" ' 画面遷移(PopUp) ClientScript.RegisterStartupScript(Me.GetType(), _ "TekitouNaKey", _ "<script type='text/javascript'>window.open('ChildPage.aspx'," & _ "'myWindowName'," & _ "'width=300,height=300')</script>") End Sub End Class
MenuPage 同様、ChildPage にも以下のコードを入力します。
Partial Class ChildPage Inherits System.Web.UI.Page ' Page がロードされた時に実行されるイベント Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not IsPostBack Then ' 自分のページ(ChildPage.aspx)からの遷移でない場合 ' Session にて渡された名前の情報を取得する。 Dim name As String = DirectCast(Session("user_name"), String) ' 取得した情報を Label に表示する。 Me.Label1.Text = name + "さん、こんにちは!" End If End Sub End Class
■実行しよう!
コードの入力が終わったら、現在作業した MenuPage.aspx をスタート ページに設定します。
ソリューションエクスプローラ上で、MenuPage.aspx を右クリックして、[スタート ページに設定]をポイントします。
メニューバーの[デバッグ]→[デバッグ開始]をクリックして実行します。
↓こんな画面が出現しましたか?

まず、TextBox に何も入れないで Button をクリックしてみます。

↑のメッセージがちゃんと出ましたか?
次に、TextBox に自分の名前を入力して Button をクリックしてみます。

ポップアップの画面が立ち上がり、その画面にあいさつ文が出力されているでしょうか。
上記の通りに動作すれば大成功です。
■参考資料
Page.ClientScript プロパティ
ClientScriptManager クラス
とほほのJavaScriptリファレンス window.open