Web アプリケーション (ASP.NET) で画面遷移をしてみよう(その3)

.NET2.0 以降は Master Page というものがあるので Frame の出番が少ないかもしれないですが、
まだ需要はあるかもしれませんので一応書いてみました。
※解説に用いた Visual Studio 2005 の Edition は、Team System Edition です。
サンプルのダウンロード

このカテゴリーの先頭へ このページの先頭へ

■Web サイトの作成

Web サイトの作成についてはWeb アプリケーション (ASP.NET) を作ってみようと 全く同じなのでここでは割愛します。
※今回は、場所を MyWebApp04 としました。

このカテゴリーの先頭へ このページの先頭へ

■Web フォームの追加

まず、Web アプリケーション (ASP.NET) で画面遷移をしてみよう(その1)と 全く同じ様な作業を行います。

その後、ソリューションエクスプローラ(IDE 上に無い人は、メニューバーの[表示]→[ソリューション エクスプローラ]で表示させてくださいね)で、
右クリックして下図のようなコンテキストメニューを表示します。
コンテキストメニュー
[新しい項目の追加]をクリックします。
新しい項目の追加 ダイアログボックス
HTML ページ を選択し、ファイル名は任意で入力して[OK]を押下して下さい。私はファイル名を FramePage.htm としました。

FramePage.htm に以下のソースを書きます。

FramePage.htm
<html>
<head>
    <title>フレームのページ</title>
</head>
<frameset cols="50%,*">
  <frame src="MenuPage.aspx" name="hidari">
  <frame src="ChildPage.aspx" name="migi">
  <noframes>
  このページはフレーム対応のブラウザでご覧ください。
  </noframes>
</frameset>
</html>

ソリューションはこんな感じになってれば OK です。
ソリューション エクスプローラ

このカテゴリーの先頭へ このページの先頭へ

■コントロールの配置

コントロールの配置について、MenuPage.aspx 及び ChildPage.aspx は
Web アプリケーション (ASP.NET) で画面遷移をしてみよう(その1)と 全く同じなのでここでは割愛します。

このカテゴリーの先頭へ このページの先頭へ

■コードを入力

MenuPage を デザイナ上または、ソリューションエクスプローラ上で、右クリックした時に現れるコンテキストメニューから[コードの表示]をクリックし、
コードビューに切り替えてください。
以下のコードを入力します。
Web アプリケーション (ASP.NET) で画面遷移をしてみよう(その1)と変わっているのは
MenuPage.aspx.vb の Button1_Click の最後の方 と ChildPage.aspx.vb の If 文の条件追加だけです。

MenuPage.aspx.vb
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'>top.migi.location.reload()</script>")
    End Sub
End Class

MenuPage 同様、ChildPage にも以下のコードを入力します。

MenuForm.vb
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 AndAlso Not Session("user_name") Is Nothing Then
            ' 自分のページ(ChildPage.aspx)からの遷移でない場合
            ' Session にて渡された名前の情報を取得する。
            Dim name As String = DirectCast(Session("user_name"), String)
            ' 取得した情報を Label に表示する。
            Me.Label1.Text = name + "さん、こんにちは!"
        End If
    End Sub
End Class
このカテゴリーの先頭へ このページの先頭へ

■実行しよう!

コードの入力が終わったら、現在作業した FramePage.htm をスタート ページに設定します。
ソリューションエクスプローラ上で、FramePage.htm を右クリックして、[スタート ページに設定]をポイントします。

メニューバーの[デバッグ]→[デバッグ開始]をクリックして実行します。
↓こんな画面が出現しましたか?(左側が MenuPage.aspx、右側が ChildPage.aspx)
フレーム表示
まず、TextBox に何も入れないで Button をクリックしてみます。
左フレーム エラー表示
↑のメッセージがちゃんと出ましたか?右側の画面には何も変化がありませんよね?

次に、TextBox に自分の名前を入力して Button をクリックしてみます。
右フレーム リロードしてあいさつ表示
左側の画面がリロードされ、あいさつ文が出力されているでしょうか。

上記の通りに動作すれば大成功です。

このカテゴリーの先頭へ このページの先頭へ

■参考資料

Page.ClientScript プロパティ
ClientScriptManager クラス
とほほ HTMLリファレンス frameset
とほほのJavaScriptリファレンス location.reload