チュートリアル : Visual Web Developer でのコードの分離を使用した基本的な Web ページの作成

  • [アーティクル]

更新 : 2007 年 11 月

ASP.NET Web ページを作成してコードを記述するときには、画面に表示される要素 (コントロール、テキスト) とプログラミング コードを管理するための 2 つのモデルの中から選択できます。単一ファイル モデルでは、表示される要素とコードは、同じファイルに格納されます。もう 1 つのモデルは、"分離コード" モデルと呼ばれます。このモデルでは、表示される要素は 1 つのファイルに格納され、コードは "分離コード" ファイルと呼ばれる別のファイルに格納されます。このチュートリアルでは、コードの分離を使用する Web ページについて説明します。

単一ファイル モデルについては、「チュートリアル : Visual Web Developer での基本的な Web ページの作成」で説明します。このチュートリアルでは、単一ファイル モデルのチュートリアルで紹介する Web ページと同じ機能を持った Web ページの作成方法について説明しますが、コードの分離の使用法を中心に説明を進めます。

単一ファイル ページとコードの分離を使用したページのどちらを選択するかは、主に、作成者の好みと利便性によります。Microsoft Visual Web Developer での作業にはほとんど差がなく、エディタではほぼ同じようにサポートされています。どちらのモデルも、ページを実行したときのパフォーマンスは同じです。コードの分離を使用したページでは、Web デザイナがページのレイアウトを作成し、プログラマがページのコードを記述できるので効率的です。この 2 種類のページは別々に編集できるからです。

このチュートリアルでは、以下のタスクを行います。

  • Visual Web Developer を使用して、コードの分離を用いた ASP.NET ページを作成します。

  • コントロールを追加します。

  • イベント ハンドラを追加します。

  • ASP.NET 開発サーバーでページを実行します。

前提条件

このチュートリアルを実行するための要件は次のとおりです。

  • Visual Web Developer および .NET Framework。

Web サイトおよびページの作成

ここでは、Web サイトを作成し、それに新しいページを追加します。また、HTML テキストを追加して、Web ブラウザでページを実行します。

Visual Web Developer で (「チュートリアル : Visual Web Developer での基本的な Web ページの作成」の手順を実行するなどして) 既に Web サイトを作成してある場合はその Web ページを使用できるので、このチュートリアルの「新しいページの作成」に進むことができます。それ以外の場合は、次の手順に従って、新しい Web サイトおよびページを作成します。

ファイル システム Web サイトを作成するには

  1. Visual Web Developer を開きます。

  2. [ファイル] メニューの [新しい Web サイト] をクリックします。

    [新しい Web サイト] ダイアログ ボックスが表示されます。

  3. [Visual Studio にインストールされたテンプレート] の [ASP.NET Web サイト] をクリックします。

  4. [場所] ボックスで、[ファイル システム] をクリックし、Web サイトのページを格納するフォルダの名前を入力します。

    たとえば、フォルダ名として「C:\BasicWebSite」と入力します。

  5. [言語] ボックスの [Visual Basic] または [Visual C#] をクリックします。

    kxbhbb82.alert_note(ja-jp,VS.90).gifメモ :

    Visual Web Developer では、Visual J# での分離コード ページの作成は、現在サポートしていません。

    選択したプログラミング言語は Web サイトでの既定として設定されます。ただし、プログラミング言語をページごとに設定することもできます。

  6. [OK] をクリックします。

    Visual Web Developer によりフォルダが作成され、Default.aspx という名前の新しいページが作成されます。

新しいページの作成

Visual Web Developer で新しい Web サイトを作成すると、Default.aspx という名前のページが自動的に作成されます。Visual Web Developer では、既定で、コードの分離を使用したページが作成されます。

Web サイトにコードの分離を使用したページを追加するには

  1. Default.aspx ページを閉じます。この操作を実行するには、ファイル名が表示されているタブを右クリックし、[閉じる] をクリックします。

  2. ソリューション エクスプローラで、Web サイト (たとえば、C:\BasicWebSite) を右クリックし、[新しい項目の追加] をクリックします。

  3. [Visual Studio にインストールされたテンプレート] の [Web フォーム] をクリックします。

  4. [名前] ボックスに「WebPageSeparated」と入力します。

  5. [言語] ボックスで、使用するプログラミング言語 (Visual Basic または C#) を選択します。

  6. [別のファイルにコードを書き込む] チェック ボックスがオンになっていることを確認します。

    既定では、このチェック ボックスはオンになっています。

  7. [追加] をクリックします。

    2 つのファイルが作成されます。最初のファイル WebPageSeparated.aspx には、ページのテキストとコントロールが含まれ、エディタで開かれます。もう 1 つのファイルは、コード ファイルで、選択したプログラミング言語に応じて、WebPageSeparated.aspx.vb または WebPageSeparated.aspx.cs という名前が付けられます。どちらのファイルも、ソリューション エクスプローラで、WebPageSeparated.aspx ファイルの横の正符号 (+) をクリックすると開きます。コード ファイルは作成されていますが、開かれていません。このチュートリアルで、コードの記述方法を説明するときに、コード ファイルの開き方についても説明します。

ページへの HTML の追加

ここでは、静的な HTML テキストを WebPageSeparated.aspx ページに追加します。

ページにテキストを追加するには

  1. ドキュメント ウィンドウの下部にある [デザイン] タブをクリックして、デザイン ビューに切り替えます。

    デザイン ビューに、作業中のページが WYSIWYG のような方法で表示されます。この時点では、このページにはテキストもコントロールもないので、空白のページが表示されます。

  2. ページに既に配置されている div 要素にカーソルを置きます。

  3. 「Welcome to Visual Web Developer Using Code Separation」と入力します。

  4. ソース ビューに切り替えます。

    デザイン ビューで入力した HTML が表示されます。この段階では、ページは通常の HTML ページと同じように表示されます。唯一の違いは、ページの上部に <%@ Page %> ディレクティブが表示される点です。

コントロールの追加とプログラミング

ここでは、ボタン、テキスト ボックス、およびラベル コントロールをページに追加し、ボタンの Click イベントを処理するコードを記述する方法を説明します。サーバー コントロールには、ボタン、ラベル、テキスト ボックスなどのよく使用するコントロールがありますが、その働きは、ASP.NET Web ページの典型的なフォーム処理機能を提供することです。ただし、サーバー コントロールのプログラミングには、クライアントではなく、サーバーで実行可能なコードを使用します。

ページにコントロールを追加するには

  1. [デザイン] タブをクリックしてデザイン ビューを表示します。

  2. 前に追加したテキストの後ろにカーソルを置きます。

  3. Enter キーを何度か押して、空間を作ります。

  4. ツールボックスの [標準] タブから 3 つのコントロール TextBox、Button、および Label をページにドラッグします。

  5. カーソルをテキスト ボックスの前に置いて、「Enter your name:」と入力します。

    この静的 HTML テキストは、TextBox コントロールのキャプションとなります。同一ページ上で、静的 HTML とサーバー コントロールを混在させることができます。

コントロールのプロパティの設定

Visual Web Developer では、ページ上のコントロールにプロパティを設定するためのいくつかの方法が用意されています。ここでは、デザイン ビューとソース ビューでプロパティの操作を行います。

コントロールのプロパティを設定するには

  1. [プロパティ] ウィンドウで Button コントロールを選択し、その Text プロパティを "Display Name" に設定します。

  2. ソース ビューに切り替えます。

    ソース ビューに、このページの HTML が表示されます。サーバー コントロール用に自動生成された要素も表示されます。コントロールは、HTML に似た構文で宣言されます。ただし、タグにはプレフィックス asp: が付き、属性 runat="server" が指定されます。

    コントロールのプロパティは、属性として宣言します。たとえば、手順 1 でボタンの Text のプロパティを設定したときには、コントロールのマークアップに Text 属性を実際に設定しました。

    すべてのコントロールは、form 要素の内側に置かれ、属性 runat="server" が指定されています。runat="server" 属性と、コントロール タグの asp: プレフィックスは、ページが実行されるときに ASP.NET による処理が必要なことを示すマークとなります。

Button コントロールのプログラミング

このチュートリアルでは、ユーザーがテキスト ボックスに入力した名前を読み取り、それを Label コントロールに表示するコードを記述します。

既定のボタンのイベント ハンドラを追加するには

  1. デザイン ビューに切り替えます。

  2. Button コントロールをダブルクリックします。

    別のエディタ ウィンドウが開き、WebPageSeparated.aspx.vb ファイルまたは WebPageSeparated.aspx.cs ファイルが表示されます。このファイルには、ボタンのスケルトン Click イベント ハンドラが含まれています。

  3. 次の強調表示されたコードを追加して、Click イベント ハンドラを完成させます。

    Protected Sub Button1_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Button1.Click
        Label1.Text = Textbox1.Text & ", welcome to Visual Web Developer!"
End Sub

    protected void Button1_Click(object sender, System.EventArgs e)
{    
    Label1.Text = TextBox1.Text + ", welcome to Visual Web Developer!";
}

    入力時には、IntelliSense の状況依存の選択機能が働きます。この機能の動作は、単一ファイル ページをコーディングする場合と同じです。

ページとコード ファイルの確認

WebPageSeparated ページを構成する 2 つのファイル、WebPageSeparated.aspx と WebPageSeparated.aspx.vb または WebPageSeparated.aspx.cs が作成されました。ここでは、これらのファイルの構造と相互関係について説明します。

ページとコード ファイルを確認するには

  1. エディタ ウィンドウの上部にある [WebPageSeparated.aspx] タブをクリックして、ページ ファイルに切り替えます。

  2. ソース ビューに切り替えます。

    ページの上部に表示される @ page ディレクティブが、このページをコード ファイルにバインドしています。ディレクティブは次のコードのようになります。

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

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebPageSeparated.aspx.cs" Inherits="WebPageSeparated" %>

    この行はエディタで折り返されません。言語属性とファイル名の拡張子は、既に選択したプログラミング言語に対応します。

    このページを実行すると、動的にページを表すクラスのインスタンスが ASP.NET により生成されます。Inherits 属性は .aspx ページの派生元の分離コード ファイルで定義されているクラスを示します。Visual Web Developer では、既定で、分離コード ファイルのクラス名のベースとしてページ名を使用します。

    CodeFile 属性が、このページのコード ファイルを示しています。言い換えれば、分離コード ファイルには、ページのイベント処理コードが記述されています。

  3. [WebPageSeparated.aspx.vb] タブまたは [WebPageSeparated.aspx.cs] タブをクリックして、コード ファイルに切り替えます。

    コード ファイルには、クラス定義に似たコードが記述されています。ただし、正確なクラス定義とは異なる "部分クラス" であり、ページを構成する完全なクラスの一部のみが定義されています。具体的には、コード ファイルに定義された部分クラスには、ユーザーが記述したイベント ハンドラやその他のカスタム コードが含まれています。実行時に、ASP.NET により、ユーザーが記述したコードを含む別の部分クラスが作成されます。こうしてできる完全なクラスが、ページの表示に使用される基本クラスとして使用されます。詳細については、「ASP.NET ページ クラスの概要」を参照してください。

    kxbhbb82.alert_note(ja-jp,VS.90).gifメモ :

    Microsoft Visual Studio .NET 2003 で使用される分離コード クラスについて理解していれば、この分離コード クラスには、クラス定義以外の生成コードは含まれないことがわかります。たとえば、このクラスには、ページのコントロールのインスタンス変数は含まれません。このような生成コードは必要ありません。

ページの実行

ここでページをテストできます。

ページを実行するには

  1. Ctrl キーを押しながら F5 キーを押して、ブラウザでページを実行します。

    ページは ASP.NET 開発サーバーで実行されます。

    kxbhbb82.alert_note(ja-jp,VS.90).gifメモ :

    ブラウザにエラー 502、またはページを表示できないことを意味するエラーが表示されたときは、ブラウザを、ローカルの要求に対してはプロキシ サーバーを使用しないように設定するとエラーが解決します。詳細については、「方法 : ローカル Web 要求に対してプロキシ サーバーをバイパスする」を参照してください。

  2. テキスト ボックスに名前を入力し、ボタンをクリックします。

    入力した名前が、Label コントロールに表示されます。

  3. ブラウザで、実行しているページのソースを表示します。

  4. ブラウザを閉じます。

    このページは、単一ファイル ページとまったく同じように動作します。「チュートリアル : Visual Web Developer での基本的な Web ページの作成」の手順に従って単一ファイル ページを作成していれば、2 種類のページを比較して、実行に差がないことを確認できます。

次の手順

このチュートリアルでは、コードの分離を使用する Web ページを作成して、編集する方法を示しました。ページを作成して実行するという観点からは、単一ファイル ページとコードの分離を使用したページには大きな違いはありません。

他の特徴についても比較してみましょう。たとえば、次の場合です。

参照

処理手順

チュートリアル : Visual Web Developer での基本的な Web ページの作成

概念

Visual Web Developer における Web サイトの種類