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

Web アプリケーションで画面遷移をしてみましょう。
多分、一番簡単だと思われる、単純な画面遷移をやってみます。
※解説に用いた Visual Studio 2005 の Edition は、Team System Edition です。
サンプルのダウンロード

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

■Web サイトの作成

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

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

■Web フォームの追加

ソリューションエクスプローラ(IDE 上に無い人は、メニューバーの[表示]→[ソリューション エクスプローラ]で表示させてくださいね)で、
プロジェクトを選択して、右クリックします。
下図のようなコンテキストメニューが表示されます。
コンテキストメニュー
[新しい項目の追加]をクリックします。
新しい項目の追加 ダイアログボックス
Web フォーム を選択し、ファイル名は任意で入力して[OK]を押下して下さい。私はファイル名を ChildPage.aspx としました。
ついでに、Detault.aspx の名前もそのままだと他の画面との区別がはっきりしないので、
MenuPage.aspx にします。
プロパティ ウィンドウ(IDE 上に無い人は、メニューバーの[表示]→[プロパティ ウィンドウ]で表示させてくださいね)が表示されている状態で
ソリューション エクスプローラ上の Default.aspx をクリックします。すると↓の様にプロパティウィンドウに表示されます。
プロパティ ウィンドウ
ファイル名に、MenuPage.aspx と入力して、Enter キーを押下します。

ASP.NET の場合、aspx ファイル先頭の CodeFile 属性は自動で変えてくれますが、Inherits 属性及び コードビハインドファイル(*.aspx.vb)のクラス名は変えてくれないようです。
なので、クラス名も統一したい場合は、手作業で コードビハインド のクラス名を変更した後、
aspx ファイル先頭の Inherits 属性も変更する必要があります。

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

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

■コントロールの配置

Web フォームの追加で追加したフォームに、コントロールを配置します。
コントロールの配置の仕方については、Web アプリケーション (ASP.NET) を作ってみようとほぼ同じなので割愛します。
このような感じでコントロールを配置して下さい。

MenuPage
MenuPage
ChildPage
ChildPage

あと、これはやってもやらなくてもよいですが、各 aspx の title タグが同じ値だと混乱するので、適当に名前をつけてみました。
以上の作業の結果、aspx ファイルは以下の様になりました。

MenuPage.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="MenuPage.aspx.vb" Inherits="MenuPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>最初のページ</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
        <asp:Button ID="Button1" runat="server" Text="Button" /><br />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></div>
    </form>
</body>
</html>
ChildPage.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="ChildPage.aspx.vb" Inherits="ChildPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>次のページ</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></div>
    </form>
</body>
</html>
このカテゴリーの先頭へ このページの先頭へ

■コードを入力

MenuPage を デザイナ上または、ソリューションエクスプローラ上で、右クリックした時に現れるコンテキストメニューから[コードの表示]をクリックし、
コードビューに切り替えてください。
以下のコードを入力します。

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
        ' 画面遷移
        Response.Redirect("ChildPage.aspx")
    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 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 をクリックしてみます。
次のページへ遷移
画面が切り替わり(IE のアドレスバーに注目してください。最後が ChildPage.aspx になっていますよね。)
あいさつ文が出力されているでしょうか。

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

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

■参考資料

Page.Session プロパティ
HttpSessionState クラス
Page.Response プロパティ
HttpResponse クラス