最終更新日 2005 年 8 月 15 日

このコンテンツのポイント

  • 4 つのパターンの Web アプリケーションの画面遷移方法と、その違いを理解する

今回紹介するコード

C#
// 画面遷移前の Web フォーム
protected void Button1_Click(object sender, EventArgs e)
{
    Response.Redirect("~/Page2.aspx");
}
protected void Button2_Click(object sender, EventArgs e)
{
    Server.Transfer("~/Page2.aspx");
}

// 画面遷移後の Web フォーム
protected void Page_Load(object sender, EventArgs e)
{
    if (Page.PreviousPage != null)
    {
        TextBox text1 = (TextBox) Page.PreviousPage.FindControl("TextBox1");
        if (text1 != null)
             TextBox1.Text = text1.Text;
    }
}
 

今回のシステム要件

  • Visual Studio 2005 Beta 2

 

目次

はじめに
作成するアプリケーションの概要
Web アプリケーションの画面作成
画面遷移の実装
動作と解説
おわりに

Visual Basic の内容はこちらに掲載しています。
10 行でズバリ!! Web アプリケーションの画面遷移 (VB)

はじめに

.NET において Web アプリケーションを作成する場合、 ASP.NET が提供する 「Web フォーム」 を使用します。

Web フォームは、Web アプリケーションにおけるユーザー インターフェイスを構築するためのテクノロジーです。Web フォームでは、ユーザーのブラウザ上に、HTML ベースの Web ページとしてユーザー インターフェイスは表示されますが、そのWeb ページに関わる処理は、サーバーサイドで行われます。たとえば、ブラウザ上でユーザーがボタンをクリックした場合、そのことがサーバーに通知され、サーバー上に実装された Click イベントに呼応するイベント ハンドラが実行されます。

ネットワーク上の動作の観点から見ると、ユーザーがブラウザ上でボタンをクリックした場合、HTTP POST を使って、ページ上のデータがサーバーへポスト (投函) されます。原則として、このときポストに使用するアクセス先の URLは、現在表示しているページ自身の URL であり、自分自身にポストしています。その結果、自分自身のページに実装されたイベント ハンドラが呼び出されます。このような自分自身のページに対するポストを、「ポストバック」と呼びます。

この動作は、Windows フォームに似ています。Windows フォームでは、フォーム上のボタンがクリックされたとき、フォーム自身に実装されたイベント ハンドラが呼び出されます。そのため、Web フォームのプログラミング モデルは、Windows フォームのプログラマーにも馴染みやすいと言えます。

ここでは、このようなポストバックの仕組みもふまえ、ASP.NET での Web ページ間の遷移方法について説明します。

作成するアプリケーションの概要

ここでは、ASP.NET における画面遷移について、主な 4 つの方法について取り上げます。画面遷移の基本的な仕組みを理解するのが目的なので、画面間でのデータの受け渡し方法の詳細は、割愛します。画面間のデータの受け渡し方法については、「10 行でズバリ !! ページ間におけるデータ受け渡し (C#)」 を参照してください。

この後のアプリケーションには、以下の 4 つの画面遷移方法を実装します。

  • HyperLink コントロールを使用して、リンクを行う
  • ポストバック先のサーバー サイドで、Response.Redirect メソッドを呼び出す
  • ポストバック先のサーバー サイドで、Server.Transfer メソッドを呼び出す
  • Button コントロールのポスト先が、別のページになるように設定する (Cross-Page Posting)

なお、Web アプリケーションの基本的な作成方法は、「10 行でズバリ!! ASP.NET Web フォームによる Web アプリケーション開発 (C#)」 を参照してください。

Web アプリケーションの画面作成

まず、新規に Web サイトを作成します。Visual Studio 2005 の [ファイル] メニューをクリックし、[新規作成] をポイントして、[Web サイト] をクリックします。 すると、[新しい Web サイト] ダイアログボックスが表示されます。

ここでは、言語として Visual C# を選択し、テンプレートとして 「ASP.NET Web サイト」 を選択します。 [場所] 欄では、ドロップダウン リストで 「ファイル システム」が選択されていることを確認した後、任意のパスを指定して (たとえば、 「C:\Test\Website1」 など)を入力し (図 1)、[OK] をクリックします。

図 1. Web サイトを新規に作成する

これで、Web フォームによる Web ページ開発の準備として、雛形となる Web サイトができました。

既定の構成では、Default.aspx の編集画面としてソース ビューが開いているので、編集画面の左下部にある [デザイン] タブをクリックして、Web ページのデザイン画面に切り替えます。このデザイン画面で、画面レイアウトが図2になるように、ツールボックスの[標準] タブから、順にTextBox コントロール1 つ、HyperLink コントロール1 つ、および、Button コントロール 3 つを、ドラッグ アンド ドロップして貼り付けます。各コントロールが行ごとに分かれるよう、コントロール間で改行してください。また、図 2 と見た目が同じになるよう、各コントロールの Text プロパティを変更します。なお、簡単にするため、各コントロールの ID は既定のままにしておきます。

図 2. 1 つ目の画面を作成する

次に、画面遷移を行った際の遷移後の Web ページを追加します。

ソリューション エクスプローラのツリー上の、Web サイトのノード (今回の例では C:\Test\WebSite1) を右クリックして、[新しい項目の追加] メニューをクリックします。[新しい項目の追加] ダイアログボックスが表示されるので、テンプレートとして [Web フォーム] を選択し、[名前] ボックスには 「Page2.aspx」 と入力します (図 3)。ほかは既定のままにして、[追加] ボタンをクリックします。

図 3. 新しい Web ページ (Web フォーム) を追加する

Page2.aspx のソース ビューが表示されるので、編集画面の左下にある [デザイン] タブをクリックして、デザイン ビューに切り替えます。図 4 のように、「2 番目のページ」という文字列を直接入力し、その下の行に TextBox コントロールを 1 つ貼り付けます。

図 4. 2 番目の Web ページ (Web フォーム) の画面を作成する

画面が完成したら、[ファイル] メニューの [すべてを保存] をクリックして、保存しておきます。

画面遷移の実装

次に、1 つ目の画面に 4つの画面遷移方法を実装します。ここで、Default.aspx のデザイン ビューに切り替えます。

まずは、HyperLink コントロールです。このコントロールでは、遷移先の Web ページの URL をプロパティに指定します。デザイン ビュー上の HyperLink コントロールをクリックし、プロパティ ウィンドウで NavigateUrl プロパティに 「~/Page2.aspx」 と入力します (図 5)。このコントロールは、Web ブラウザ上では、通常のリンクとして動作します。なお、チルダ「~」は、この Web アプリケーションのルート フォルダを意味します。

図 5. NavigateUrl プロパティを設定する

次に、画面上に配置された一つ目の Button コントロールをブルクリックします。すると、Default.aspx.cs のコード エディタが開き、Click イベント ハンドラが生成されます。さらに、Default.aspx のデザイン ビューに切り替えて、2 つ目の Button コントロールもダブルクリックします。二つ目のイベント ハンドラが生成され、再びコード エディタが開きます。(イベント ハンドラを作成するのは、二つ目のボタンまでです。) ここで、各イベント ハンドラに次のコードを入力します。このコードでは、ページ上でクリックされた後、同じページに対してポストバックし、サーバーのコードで、ページの遷移 を行っています。ASP.NET では、サーバー サイドのコードで画面遷移をするとき、この例で示すように 2 つの方法があります。それぞれのメソッドの意味は、動作確認の中で説明します。

C#
protected void Button1_Click(object sender, EventArgs e)
{
    Response.Redirect("~/Page2.aspx");
}
protected void Button2_Click(object sender, EventArgs e)
{
    Server.Transfer("~/Page2.aspx");
}
 

3つ目のボタンには、ポストバックを使わずに、別のページへポストする方法を実装します。

ここで、Default.aspx のデザイン ビューに戻り、3 つめのボタンを選択します。プロパティ ウィンドウで PostBackUrl プロパティに、「~/Page2.aspx」 と入力します (図 6)。この設定によって、自分自身のページにポストバックせずに、別のページにポストすることができます。

図 6. PostBackUrl プロパティを設定する

最後に画面遷移後の画面にも、一部コードを追加しておきます。Page2.aspx のデザイン ビューに切り替えて、デザイン ビューの余白をダブルクリックします。すると、Page2.aspx.cs のコード エディタが開き、Page2.aspx の初期処理を行う Load イベント ハンドラが表示されます。

このイベント ハンドラでは、次のコードを入力します。このコードでは、遷移前の画面 Default.aspx のテキストボックス Textbox1 の内容を、遷移後の Page2.aspx のテキスト ボックス TextBox1 に代入しています。ASP.NET では、Web ページは Page オブジェクト (厳密には Page 派生クラスのオブジェクト) として扱われます。画面遷移の方法によっては、遷移後の画面のコードから、遷移前の Page オブジェクトにアクセスできます。メソッド内の if 文に含まれる Page.PreviousPage という記述では、「Page」 はフォーム自身のプロパティで現在アクティブな Page オブジェクトを表しています。その Page オブジェクトの PreviousPage プロパティは、遷移前の Page オブジェクトを表しています。if 文のブロック内では、FindControl メソッドを呼び出して、遷移前の画面のテキストボックスを参照しています。

C#
protected void Page_Load(object sender, EventArgs e)
{
    if (Page.PreviousPage != null)
    {
        TextBox text1 = (TextBox) Page.PreviousPage.FindControl("TextBox1");
        if (text1 != null)
             TextBox1.Text = text1.Text;
    }
}
 

コードが完成したら、[ファイル] メニューの [すべてを保存] をクリックして、保存しておきます。

動作と解説

コードも画面も完成しましたので、実行してみます。まず、ソリューション エクスプローラ上で、Default.aspx を1回クリックして、選択された状態にします。次に、[Ctrl+F5] キーを押すか、[デバッグ] メニューの [デバッグなしで開始] をクリックします。

すると、Visual Studio 2005 の既定の構成では、試験用の Web サーバーとして 「ASP.NET 開発サーバー」が自動的に起動し、そのサーバーの上で、Web アプリケーションが実行されるようになります。また、Web ブラウザが自動的に起動して、作成した Web ページが表示されます。URL には、ASP.NET 開発サーバーが使用するための、ランダムに設定されたポート番号が含まれています。このポート番号はソリューション ファイルに書き込まれ、これ以降は同じポート番号で実行することになります。

ブラウザには、Default.aspx が表示されるので、テキストボックスに任意の文字列、たとえば 「Hello, ASP.NET!」 と入力します (図 7)。

図 7. Default.aspx がブラウザに表示されるので、テキストボックスに入力する

ここで、4 つの画面遷移の方法を確認します。

まずは、HyperLink コントロールを使用した、Page2 へのリンクです。これは単純なリンクであり、サーバーはブラウザに対して、単なる <A href="Page2.aspx"> というタグとして送信しています。そのため、ブラウザ上でユーザーがリンクをクリックすると、HTTP GETを使用して、Page2.aspx を直接アクセスします。

ここで、リンクをクリックしてみましょう。すると、Page2.aspx に遷移します。ブラウザの URL欄も Page2.aspx になっているはずです。しかし、Page2.aspx では遷移前のテキストボックスを参照するようにコードを実装していたにも関わらず、Page2.aspx には遷移前のテキストボックスの内容は反映されていません (図 8)。リンクのように、単に HTTP 要求でページを遷移する場合、ASP.NET は遷移前の画面を認識できないからです。

図 8. リンクを使って次の画面に遷移する

リンクを使う場合、データの受け渡しには、相応の仕組みが必要です。しかし、単にメニューから別の画面に分岐するなど、複雑なデータの受け渡しを伴わないなら、この方法が最も簡単です。また、.aspx ファイルに単に <A> タグとしてハードコーディングする方法ありますが、HyperLink コントロールを使えば、このページを表示する前に、サーバーサイドでプログラム内から NavigateUrl を設定でき、リンク先を柔軟に指定することができます。

なお、画面間のデータの受け渡しは、「 10 行でズバリ !! ページ間におけるデータ受け渡し (C#)」 を参照してください。

ここで、ブラウザの [戻る] ボタンを押して、Default.aspx (図 7) に戻ります。今度は、1 つ目のボタン [Response.Redirect] をクリックします。すると、Page2.aspx が表示され、リンクの場合と同様に、図 8 のようになります。URL 欄も Page2.aspx に変わります。

このボタンをクリックすると、Default.aspx 自身に対してポストバックを行い、Default.aspx の Click イベント ハンドラ内で、Response.Redirect メソッドを呼び出しています。これは、一般に 「リダイレクト」と呼ばれる方法に相等し、Redirect メソッドが呼びされた際に、Web サーバーはブラウザに対して、遷移後のページにアクセスするよう指示し、ブラウザは改めて、HTTP GET を使って Page2.aspx を要求しています。つまり、ネットワーク上は、HTTP要求/応答が、2 往復することになります。

結果的には、リンクをクリックしたのと同様に、Page2.aspx に遷移します。そのため、ASP.NET は遷移前のページを認識できず、遷移後のテキストボックスに値は反映されません。

前述のリンクと、このリダイレクトとの方法と大きな違いの 1 つは、ユーザーによってポストされたデータの入力検証が、遷移する前に、サーバー側で可能か否かという点です。リダイレクトを使う方法では、データが不正 で画面の遷移をしたくなければ、Redirect メソッドを呼び出さなければよいのです。その場合、元の Default.aspx が再表示されます。前者のリンクでは、値の検証はせずに、無条件で画面遷移してしまいます。

ここで、ブラウザの [戻る] ボタンを押して、Default.aspx (図 7) に戻ります。今度は、2 つ目のボタン [Server.Transfer] をクリックします。

今回も、一旦、ポストバックを行い、Default.aspx の Click イベント ハンドラが呼び出されます。Click イベント ハンドラでは、Server.Transfer メソッドを呼び出します。このメソッドが呼び出されると、ASP.NET の実行環境内で、ページの遷移を行います。この場合、ASP.NET は画面遷移を認識でき、遷移前の Page オブジェクトにアクセスできるので、遷移後の画面のテキストボックスには、本来のコード実装のとおりに、遷移前の値が反映されています (図 9)。

また、Transfer メソッドを使う方法では、リダイレクトとは異なり、ブラウザは Default.aspx へ単にポストバックするだけで、ブラウザ側では画面遷移を行っていません。そのため、ブラウザには Default.aspx へのポストバックの結果として、Page2.aspx の内容が表示されます。その結果、図 9 のブラウザの URL 欄は、Default.aspx のままです。

Transfer メソッドを使う方法では、ASP.NET が画面遷移を認識できますが、ブラウザは遷移前の URL として認識しているので、ブラウザによっては、[戻る] ボタンを押してURL の履歴をたどると、誤動作する可能性があります。

なお、この方法でも、リダイレクトと同様に、遷移前にポストされたデータの検証を行うことができます。

図 9. Transfer を使って次の画面に遷移すると、アドレスは変わらない

ここで、ブラウザの [戻る] ボタンを押して、Default.aspx (図 7) に戻ります。今度は、3 つ目のボタン [Cross-Page Posting] をクリックします。すると、Page2.aspx に遷移します (図 10)。今までの画面遷移と、若干の違いがあります。

図 10. ページをまたいで、ポストを行う

この方法は、「Cross-Page Posting」 と呼ばれるもので、ASP.NET 2.0 から導入された新しい方法です。この方法では、自分自身にポストバックせずに、遷移後のページに直接ポストします。ポスト先は、先に指定した PostBackUrl プロパティのアドレスであり、今回は Page2.aspx に直接ポストします。

そのため、この方法では URL 欄は遷移後のアドレスです。また、この仕組みでは、ASP.NET 2.0 が遷移前のページを Page オブジェクトとして認識できるので、遷移前のテキストボックスの内容が、遷移後のテキストボックスに反映できます。

この明示的にポスト先を指定する方法は、1 つの Web ページの中を、論理的な複数の画面に分割して、分割された画面ごとに、ポスト先を変えたい場合に便利です。

なお、Transfer では、同一 Web アプリケーション内でしか、画面遷移はできません。また、Cross-Page Posting では、別の Web アプリケーションへ遷移できますが、その場合は遷移前の Page オブジェクトを参照できません。遷移前の Page オブジェクトを参照できるのは、同一の Web アプリケーション内の画面遷移だけです。

おわりに

このように、画面遷移方法には複数あり、それぞれ異なる特徴があります。

メニュー画面からの単純な分岐を行う画面遷移であれば、HyperLink などのリンクを使うのが簡単です。画面遷移前に、ポストデータの検証を行うのであれば、Response.Redirect が適当です。

しかし、これら 2 つは、遷移前の Page オブジェクトを参照できないので、遷移前の Page オブジェクトから複雑なデータを受け取るのであれば、Server.Transfer を使う方法が考えられます。ただし、ブラウザによっては、[戻る] ボタンを押してしまった場合、誤動作する可能性があります。ユーザーが本来はどの画面まで進んだか、画面遷移を追跡する仕組み (ワークフローの進捗を追跡する仕組み)が、サーバー側に必要になるでしょう。(もっとも、信頼性ある本格的なアプリケーションならば、どの画面遷移方法を問わず、サーバー側でどこまでワークフローが進んだか、追跡する仕組みは必要ですが。) もちろん、Server.Transfer でも、遷移前のアドレスにポストするので、遷移前に値の検証ができます。

さらに、ASP.NET 2.0 では、遷移先に直接ポストする仕組みが登場しました。この方法も、遷移前の Page オブジェクトを参照できます。1 つのページが複数の論理的なフォームに分割されていたとき、フォームごとにポスト先を変えたいときなどに便利です。

それぞれの特色を踏まえた上で適切な使い分けをご検討ください。  


Code Recipe .NET Framework デベロッパー センター

ページのトップへ