次の方法で共有

Visual Studio 2013を使用して Basic ASP.NET 4.5 Web Forms ページを作成する

  • [アーティクル]

作成者 : Erik Reitan

新しい Web アプリケーション開発の場合は、Razor Pages をお勧めします。 詳細については、「 Razor ページの概要」を参照してください。

このチュートリアルでは、Microsoft Visual Studio 2013 および Microsoft Visual Studio Express 2013 for Web の Web 開発環境の概要について説明します。 このチュートリアルでは、シンプルな ASP.NET Web Forms ページの作成について説明し、新しいページの作成、コントロールの追加、コードの記述に関する基本的な手法について説明します。

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

  • アプリケーション プロジェクトWeb Formsファイル システムを作成する。
  • Visual Studio について理解する。
  • ASP.NET ページの作成。
  • コントロールの追加。
  • イベント ハンドラーの追加。
  • Visual Studio からのページの実行とテスト。

必須コンポーネント

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

  • Microsoft Visual Studio 2013 または Microsoft Visual Studio Express 2013 for Web。 .NET Frameworkは自動的にインストールされます。

    Note

    Microsoft Visual Studio 2013 と Microsoft Visual Studio Express 2013 for Web は、このチュートリアル シリーズ全体で Visual Studio と呼ばれることがよくあります。

    Visual Studio を使用している場合、このチュートリアルでは、Visual Studio を初めて開始するときに設定の Web 開発 コレクションを選択したものとします。 詳細については、「 方法: Web 開発環境の設定を選択する」を参照してください。

Web アプリケーション プロジェクトとページの作成

チュートリアルのこの部分では、Web アプリケーション プロジェクトを作成し、新しいページを追加します。 また、HTML テキストを追加し、ブラウザーでページを実行します。

Web アプリケーション プロジェクトを作成するには

  1. Microsoft Visual Studio を開きます。

  2. [ファイル] メニューの [新しいプロジェクト] を選択します。
    [ファイル] メニュー

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

  3. 左側の [テンプレート ] ->[Visual C# ] -[>Web テンプレート] グループを選択します。

  4. 中央の列で [ASP.NET Web アプリケーション] を選択します。

  5. プロジェクトに BasicWebApp という名前を付け、[OK] ボタンをクリック します 。
    [新しいプロジェクト] ダイアログ ボックス

  6. 次に、Web Forms テンプレートを選択し、[OK] ボタンをクリックしてプロジェクトを作成します。
    [新しい ASP.NET プロジェクト] ダイアログ ボックス

    Visual Studio は、Web Forms テンプレートに基づいて事前構築済みの機能を含む新しいプロジェクトを作成します。 Home.aspx ページ、About.aspx ページ、Contact.aspx ページだけでなく、ユーザーを登録して資格情報を保存して Web サイトにログインできるようにするメンバーシップ機能も含まれています。 新しいページが作成されると、既定では Visual Studio によって ページがソース ビューに表示され、ページの HTML 要素を確認できます。 次の図は、BasicWebApp.aspx という名前の新しい Web ページを作成した場合のソース ビューに表示される内容を示しています。
    ソース ビュー

Visual Studio Web 開発環境のツアー

ページを変更して作業を進める前に、Visual Studio 開発環境を理解しておくと便利です。 次の図は、Visual Studio と Visual Studio Express for Web で使用できるウィンドウとツールを示しています。

Note

この図は、既定のウィンドウとウィンドウの場所を示しています。 [ 表示 ] メニューを使用すると、追加のウィンドウを表示したり、好みに合わせてウィンドウの再配置やサイズ変更を行うことができます。 ウィンドウの配置に変更が既に加えられている場合、表示される内容は図と一致しません。

Visual Studio 環境

Visual Studio 環境

Web デザイナーについて理解する

上の図を確認し、テキストを次の一覧に一致させます。このリストには、最もよく使用されるウィンドウとツールが記載されています。 (ここに表示されているウィンドウとツールの一部ではなく、前の図で示したウィンドウとツールのみが表示されます)。

  • ツール バー。 テキストの書式設定、テキストの検索などのコマンドを指定します。 一部のツール バーは、 デザイン ビューで作業している場合にのみ使用できます。
  • ソリューション エクスプローラー ウィンドウ。 Web アプリケーション内のファイルとフォルダーを表示します。
  • [ドキュメント] ウィンドウ。 タブ付きウィンドウで作業中のドキュメントを表示します。 タブをクリックしてドキュメントを切り替えることができます。
  • [プロパティ ] ウィンドウ。 ページ、HTML 要素、コントロール、およびその他のオブジェクトの設定を変更できます。
  • タブを表示します。 同じドキュメントのさまざまなビューを表示します。 デザイン ビューは、WYSIWYG に近い編集画面です。 ソース ビューは、ページの HTML エディターです。 分割 ビューには、ドキュメントの デザイン ビューと ソース ビューの両方が表示されます。 このチュートリアルの後半で、 デザイン ビューと ソース ビューを操作します。 デザイン ビューで Web ページを開く場合は、[ツール] メニューの [オプション] をクリックし、[HTML Designer] ノードを選択し、[開始ページ] オプションを変更します。
  • ToolBox。 ページにドラッグできるコントロールと HTML 要素を提供します。 ツールボックス 要素は、共通の関数によってグループ化されます。
  • Server エクスプローラー。 データベース接続を表示します。 [サーバー エクスプローラーが表示されない場合は、[表示] メニューの [サーバー エクスプローラー] をクリックします。

新しい ASP.NET Web Forms ページの作成

ASP.NET Web アプリケーション プロジェクト テンプレートを使用して新しいWeb Forms アプリケーションを作成すると、Visual Studio によって Default.aspx という名前の ASP.NET ページ (Web Forms ページ) と、その他のいくつかのファイルとフォルダーが追加されます。 Default.aspx ページは、Web アプリケーションのホーム ページとして使用できます。 ただし、このチュートリアルでは、新しいページを作成して操作します。

Web アプリケーションにページを追加するには

  1. Default.aspx ページを閉じます。 これを行うには、ファイル名を表示するタブをクリックし、閉じるオプションをクリックします。
  2. ソリューション エクスプローラーで、Web アプリケーション名を右クリックし (このチュートリアルでは、アプリケーション名は BasicWebSite)、[追加] ->[新しい項目] の順にクリックします。
    [新しい項目の追加] ダイアログ ボックスが表示されます。
  3. 左側の [Visual C# ->Web テンプレート] グループを選択します。 次に、中央のリストから [Web フォーム ] を選択し、 FirstWebPage.aspx という名前を付けます。
    [新しい項目の追加] ダイアログ ボックス
  4. [ 追加] をクリックして、Web ページをプロジェクトに追加します。
    Visual Studio によって新しいページが作成され、開きます。

ページへの HTML の追加

チュートリアルのこの部分では、静的テキストをページに追加します。

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

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

    デザイン ビューには、WYSIWYG のような方法で現在のページが表示されます。 この時点では、ページにテキストやコントロールがないため、四角形の輪郭を描く破線を除き、ページは空白になります。 この四角形は、ページ上の div 要素を表します。

  2. 破線で囲まれた四角形の内側をクリックします。

  3. 「 Visual Web Developer へようこそ 」と入力し、 Enter キー を 2 回押します。

    次の図は、 デザイン ビューに入力したテキストを示しています。

    デザイン ビューのウェルカム テキスト デザイン ビュー

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

    デザイン ビューで入力したときに作成した HTML は、ソース ビューで確認できます。
    静的テキストを含む Web ページ

ページの実行

ページにコントロールを追加して続行する前に、最初に実行できます。

ページを実行するには

  1. ソリューション エクスプローラーで、FirstWebPage.aspx を右クリックし、[スタート ページとして設定] を選択します。

  2. Ctrl + F5 キーを押してページを実行します。

    ページがブラウザーに表示されます。 作成したページのファイル名拡張子は .aspx ですが、現在は HTML ページと同様に実行されます。

    ブラウザーにページを表示するには、ソリューション エクスプローラーでページを右クリックし、[ブラウザーで表示] を選択することもできます。

  3. ブラウザーを閉じて Web アプリケーションを停止します。

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

次に、サーバー コントロールをページに追加します。 ボタン、ラベル、テキスト ボックス、その他の使い慣れたコントロールなどのサーバー コントロールは、Web Forms ページに一般的なフォーム処理機能を提供します。 ただし、クライアントではなく、サーバー上で実行されるコードを使用してコントロールをプログラムできます。

Button コントロール、TextBox コントロール、および Label コントロールをページに追加し、Button コントロールの Click イベントを処理するコードを記述します。

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

  1. [ デザイン ] タブをクリックして、[ デザイン ] ビューに切り替えます。

  2. 挿入ポイントを [Visual Web 開発者へようこそ ] テキストの末尾に配置し、 Enter キー を 5 回以上押して div 要素ボックスにスペースを入れます。

  3. [ツールボックス] で、[標準] グループがまだ展開されていない場合は展開します。
    左側の [ツールボックス] ウィンドウを展開して表示する必要がある場合があることに注意してください。

  4. TextBox コントロールをページにドラッグし、最初の行に [Visual Web Developer へようこそ] が表示されている div 要素ボックスの中央にドロップします。

  5. Button コントロールをページにドラッグし、TextBox コントロールの右側にドロップします。

  6. Label コントロールをページにドラッグし、Button コントロールの下の別の行にドロップします。

  7. TextBox コントロールの上にカーソルを置き、「Enter your name: 」と入力します。

    この静的 HTML テキストは、TextBox コントロールのキャプションです。 静的 HTML コントロールとサーバー コントロールを同じページに混在させることができます。 次の図は、3 つのコントロールが デザイン ビューにどのように表示されるかを示しています。

    デザイン ビューの 3 つのコントロール デザイン ビュー

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

Visual Studio には、ページ上のコントロールのプロパティを設定するためのさまざまな方法が用意されています。 チュートリアルのこの部分では、 デザイン ビューとソース ビューの両方でプロパティ を 設定します。

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

  1. 最初に、[表示] メニューから [その他のウィンドウ>] ->[プロパティ] ウィンドウを選択して、[プロパティ] ウィンドウを表示します。 または、 F4 キーを押して [プロパティ ] ウィンドウを表示することもできます。

  2. [ボタン] コントロールを選択し、[プロパティ] ウィンドウで [テキスト] の値を [表示名] に設定します。 次の図に示すように、入力したテキストがデザイナーのボタンに表示されます。

    [Set Button text]\(ボタンの設定\) テキスト

  3. [ソース] ビューに切り替えます。

    ソース ビューには、Visual Studio がサーバー コントロール用に作成した要素を含むページの HTML が表示されます。 タグでプレフィックス asp: を使用し、属性 runat="server" を含める点を除き、コントロールは HTML に似た構文を使用して宣言されます。

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

    Note

    すべてのコントロールは、runat="server" 属性を持つフォーム要素内にあります。 runat="server" 属性とコントロール タグの asp: プレフィックスは、ページの実行時にサーバー上の ASP.NET によって処理されるようにコントロールをマークします。 runat="server" および script runat="server"> 要素の外部の<コードは、ブラウザーに変更されずに送信されるため、ASP.NET コードは、開始タグに runat="server" 属性が含まれている要素内に存在する必要があります。<>

  4. 次に、 Label コントロールに追加のプロパティを追加します。 挿入ポイントを asp:Label タグの asp:Label>の直後に<配置し、SPACE キーを押します。

    Label コントロールに設定できる使用可能なプロパティの一覧を表示するドロップダウン リストが表示されます。 IntelliSense と呼ばれるこの機能は、サーバー コントロール、HTML 要素、およびページ上のその他の項目の構文を使用してソース ビューで役立ちます。 次の図は、Label コントロールの IntelliSense ドロップダウン リストを示しています。

    IntelliSense 属性

  5. [ForeColor] を選択し、等号を入力します。

    IntelliSense には、色の一覧が表示されます。

    Note

    コードを表示するときに Ctrl + J キーを押すと、IntelliSense ドロップダウン リストをいつでも表示できます。

  6. ラベル コントロールのテキストの色を選択します。 白い背景に対して読み取るのに十分な濃い色を選択してください。

    ForeColor 属性は、終了引用符を含め、選択した色で完了します。

ボタン コントロールのプログラミング

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

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

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

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

    既定では、Visual Studio は分離コード ファイルに切り替え、 Button コントロールの既定のイベントである Click イベントのスケルトン イベント ハンドラーを作成します。 分離コード ファイルは、UI マークアップ (HTML など) とサーバー コード (C#など) を分離します。
    カーソルは、このイベント ハンドラーの追加されたコードに配置されます。

    Note

    デザイン ビューでコントロールをダブルクリックすると、イベント ハンドラーを作成できるいくつかの方法の 1 つに過ぎません。

  3. Button1_Click イベント ハンドラー内に「Label1」と入力し、ピリオド (.) を続けます。

    ラベルの ID (Label1) の後にピリオドを入力すると、次の図に示すように、Visual Studio に Label コントロールで使用可能なメンバーの一覧が表示されます。 メンバーは通常、プロパティ、メソッド、またはイベントです。

    コード ビューの IntelliSense コード ビュー

  4. 次のコード例に示すように、ボタンの Click イベント ハンドラーを終了します。

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

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = Textbox1.Text & ", welcome to Visual Studio!"
End Sub

  5. ソリューション エクスプローラーで FirstWebPage.aspx を右クリックし、[マークアップの表示] を選択して、HTML マークアップのソースビューの表示に戻ります。

  6. asp:Button> 要素まで<スクロールします。 <asp:Button> 要素の属性が onclick="Button1_Click" になったことに注意してください。

    この属性は、ボタンの Click イベントを、前の手順でコーディングしたハンドラー メソッドにバインドします。

    イベント ハンドラー メソッドには任意の名前を指定できます。表示される名前は、Visual Studio によって作成された既定の名前です。 重要な点は、HTML の OnClick 属性に使用される名前が、分離コードで定義されているメソッドの名前と一致する必要があるということです。

ページの実行

ページでサーバー コントロールをテストできるようになりました。

ページを実行するには

  1. Ctrl キーを押しながら F5 キーを押して、ブラウザーでページを実行します。 エラーが発生した場合は、上記の手順を再確認してください。

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

    入力した名前が Label コントロールに表示されます。 ボタンをクリックすると、ページが Web サーバーに投稿されることに注意してください。 ASP.NET ページを再作成し、コードを実行し (この場合、 Button コントロールの Click イベント ハンドラーが実行されます)、新しいページをブラウザーに送信します。 ブラウザーでステータス バーをwatchすると、ボタンをクリックするたびにページが Web サーバーへのラウンド トリップを行っていることがわかります。

  3. ブラウザーで、実行中のページのソースを表示するには、ページを右クリックして [ソースの表示] を選択 します。

    ページのソース コードには、サーバー コードのない HTML が表示されます。 具体的には、ソース ビューで<操作していた asp:> 要素は表示されません。 ページを実行すると、ASP.NET はサーバー コントロールを処理し、コントロールを表す関数を実行するページに HTML 要素をレンダリングします。 たとえば、 <asp:Button> コントロールは HTML <入力 type="submit"> 要素としてレンダリングされます。

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

追加のコントロールの操作

チュートリアルのこの部分では、 カレンダー コントロールを操作します。このコントロールには、一度に 1 か月の日付が表示されます。 Calendar コントロールは、操作しているボタン、テキスト ボックス、ラベルよりも複雑なコントロールであり、サーバー コントロールのその他の機能を示しています。

このセクションでは、 System.Web.UI.WebControls.Calendar コントロールをページに追加し、書式設定します。

予定表コントロールを追加するには

  1. Visual Studio で、[ デザイン ] ビューに切り替えます。

  2. ツールボックスの [標準] セクションから、Calendar コントロールをページにドラッグし、他のコントロールを含む div 要素の下にドロップします。

    予定表のスマート タグ パネルが表示されます。 パネルには、選択したコントロールの最も一般的なタスクを簡単に実行できるコマンドが表示されます。 次の図は、デザイン ビューでレンダリングされる Calendar コントロールを示しています。

    デザイン ビューの予定表コントロール デザイン ビュー

  3. スマート タグ パネルで、[ 自動書式] を選択します。

    [ 書式の自動設定 ] ダイアログ ボックスが表示され、予定表の書式設定を選択できます。 次の図は、[予定表] コントロールの [自動書式] ダイアログ ボックスを示しています。

    [自動書式] ダイアログ ボックス ([予定表] コントロール)

  4. [ スキームの選択 ] ボックスの一覧で [ シンプル ] を選択し、[OK] をクリック します。

  5. [ソース] ビューに切り替えます。

    asp:Calendar> 要素を<確認できます。 この要素は、前に作成した単純なコントロールの要素よりもはるかに長くなります。 また、さまざまな書式設定を表す WeekEndDayStyle> などの<サブ要素も含まれます。 次の図は、[ソース] ビューの [予定表] コントロールを示しています。 ( ソース ビューに表示される正確なマークアップは、図と若干異なる場合があります)。

    ソース ビューの予定表コントロール ソース ビュー

カレンダー コントロールのプログラミング

このセクションでは、現在選択されている日付を表示するように Calendar コントロールをプログラムします。

予定表コントロールをプログラムするには

  1. デザイン ビューで、[予定表] コントロールをダブルクリックします。

    新しいイベント ハンドラーが作成され、 FirstWebPage.aspx.cs という名前の分離コード ファイルに表示されます。

  2. 次のコードを使用して SelectionChanged イベント ハンドラーを終了します。

    protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)
{    
    Label1.Text = Calendar1.SelectedDate.ToLongDateString();
}

    Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = Calendar1.SelectedDate.ToLongDateString()
End Sub

    上記のコードは、ラベル コントロールのテキストをカレンダー コントロールの選択した日付に設定します。

ページの実行

予定表をテストできるようになりました。

ページを実行するには

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

  2. 予定表の日付をクリックします。

    クリックした日付が Label コントロールに表示されます。

  3. ブラウザーで、ページのソース コードを表示します。

    Calendar コントロールは、毎日 td 要素として表としてページにレンダリングされていることに注意してください。

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

次の手順

このチュートリアルでは、Visual Studio ページ デザイナーの基本的な機能について説明しました。 Visual Studio でWeb Forms ページを作成および編集する方法を理解したら、他の機能を調べることができます。 たとえば、次の操作を行うことができます。

  • ASP.NET Web Formsの詳細については、ASP.NET 4.5 Web FormsとVisual Studio 2013に関するはじめにのチュートリアル シリーズに従ってください。
  • カスケード スタイル シート (CSS) の詳細については、こちらを参照してください。 詳細については、「 CSS の操作の概要」を参照してください。