ホスティングサービス
ELNでは、ASP.NETが使えるホスティングプランもご用意しています。
ホスティングサービス
専用サーバー
安定したバックボーンを持つ専用サーバー構築も、ELNにお任せください。
専用サーバー
ELN Exposition
EarthLinkNetwork ASP.NET概要 ASP.NETの特長 サンプルプログラム基本編 プログラムサンプル実践編
プログラムサンプル(基本編)
Basic Program Sample

はじめに

この基本編では、ASP.NETを利用したWebアプリケーションプログラムのサンプルの作成を行っていきます。初めてMicrosoft Visual Studio .NET 2003を利用して、ASP.NETでWebアプリケーションを作成する人を対象とした内容となっています。


作成するにあたり、使用した言語は、Microsoft Visual C#。使用ソフトとして、Microsoft Visual Studio .NET 2003を利用しています。OSは、WindowsXPを使用しました。Webアプリケーションを使用していますので、IISがインストールしてある環境じゃないと、プログラムが稼働しませんので気をつけてください。

このページのトップへ↑

その1:時刻を参照する

まず最初に、Microsoft Visual Studio .NET 2003の基本的な使い方を学ぶために、最も簡単なプログラム「サーバーの現在の時刻を参照する」というWebアプリケーションを作成していきます。


Microsoft Visual Studio .NET 2003を立ち上げて、メニューバーの[ファイル]→[新規作成]→[プロジェクト]を選択します。そうすると、図1-1のような[新しいプロジェクト]というウインドウが出てくると思います。

図1-1:新しいプロジェクト画面
図 1-1:新しいプロジェクト画面。

[新しいプロジェクト]ウインドウ画面で、[Visual C#][ASP.NET Webアプリケーション]を選択します。場所は、今回はWebアプリケーションを作成する為、[http://localhost/sample1]というように設定します。ファイルを作成すると、図1-2のような画面になると思います。(個人の設定や、Microsoft Visual Studio .NETのバージョンによって細部のメニュー位置が違っているかもしれません。)

図1-2:Visual Studio.NET 初期画面
図 1-2:Visual Studio.NET 初期画面。

メニューバーから[表示]→[ツールボックス]を選択して、[ツールボックス]を表示させます。(すでに表示されている場合は、画面上で変化はありません。)[ツールボックス]のWebフォームという項目を選択します。[ツールボックス]から"Label"、"CheckBox"、"Button"をそれぞれドラッグ&ドロップして図1-3のように、デザインエリアに配置します。

図1-3:配置後の画面
図 1-3:配置後の画面。

配置が完了したら、選択して、[プロパティ]の表示エリアのText部分をわかるように変更します。これを"Label"、"CheckBox"、"Button"それぞれで行います。([プロパティ]が表示されていない場合は、[ツールボックス]と同じように[表示]→[プロパティウインドウ]を選択します。)この時、[プロパティ]の表示エリアのFont部分を変更することによって、文字の色、大きさを変更することができます。今回は、"Label"のTextを"This Time is"にしてBoldを"ture"に、"CheckBox"のTextを"check"に変更してFontcolorを赤に、そして"Button"のTextを"Click!"に変更しています。


これで、プログラムを記述する前の準備が終わりました。これからは、プログラムを記述していきます。


ASP.NETで作成したWebアプリケーションは、基本的には.aspxファイルとして作成されますが、プログラム部分は、.aspx.csというように別ファイルに記述されます。


"Button"部分のプログラムを記述していきます。まず、"Button"をダブルクリックしてください。そうすると、コード編集画面に変わります。(デザイン画面に戻りたい時は、エリア上部の[WebForm1.aspx]となっているタブをクリックしてください。コード編集画面に変わりたいときも同じように[WebForm1.aspx.cs]というタブをクリックしてください。)


コード編集画面で、private void Button1_Click〜という部分の後の{}内に次のように記述してください。

	private void Button1_Click(object sender, System.EventArgs e)
	 {
	  if (this.CheckBox1.Checked)
	  {
	   this.Label1.Text="This Time is now : "+DateTime.Now;
	  }	
	  else 
	  {
	   this.Label1.Text="This Time is now : ";
	  }	
	 }
 

これで、チェックボックスにチェックが入っているときにボタンをクリックすると、サーバー上の現在の時刻が表記されるというプログラムが完成しました。また、チェックボックスにチェックが入っていない時は、時刻は表記されません。


ここまで完成したならば、メニューバーから[デバッグ]→[開始]を選択してください。そうすると、ブラウザが起動して図1-4のようになると思います。

図1-4:完成画面
図 1-4:完成画面。

そうしたら、チェックボックスにチェックを入れたりしてボタンをクリックして、実際にサーバー上の現在の時刻が表記されるかどうか試してみてください。これで、サーバーの時刻を参照するというプログラムの完成です。

このページのトップへ↑

その2:選択した文字色を文章に反映させる

次に、「選択した文字色を文章に反映させる」というプログラムを作成していきます。ここでは、その1「サーバーの現在の時刻を参照する」で作成した、"This Time is"という文章の色が、色を選択するたびに変化するようにプログラムを追加していきます。


画面上にデザインエリアがあることを確認した後、その1と同様に[ツールボックス]から"DropDownList"をドラッグ&ドロップしてきます。(配置する場所は、どこでもかまいません。)配置した状態では、"DropDownList"には何の情報も入っていないので、[プロパティ]のその他のエリアのItemsを選択し、右端に出てくるボタンをクリックして図2-1[ListItemコレクションエディタ]ウインドウを表示させます。

図2-1:[ListItemコレクションエディタ]ウインドウ画面
図 2-1:[ListItemコレクションエディタ]ウインドウ画面。

選択できる名前として、今回は色の名前が良いと思うので、[ListItemコレクションエディタ]ウインドウの追加ボタンを押します。そして、右側の[プロパティ]部分のTextを選択して"黒"、Valueの部分を"black"と入力します。同様に、追加ボタンを押して、Textにそれぞれ"赤"、"青"、"黄"、それに対応する形でValue部分に、"red"、"blue"、"yellow"を入力していきます。残りの設定として、最初に表示された時には黒が選択されていて欲しいので、[メンバ]の部分の黒を選択して、[プロパティ]エリアのSelectedを"False"から"Ture"に変更します。このようにして完成した[ListItemコレクションエディタ]が図2-2です。

図2-2:[ListItemコレクションエディタ]ウインドウ完成画面
図 2-2:[ListItemコレクションエディタ]ウインドウ完成画面。

さきほど、"Button"に記述したように"DropDownList"のプログラムを記述していきます。その1と同じように、まず"DropDownList"をダブルクリックしてコード編集画面を表示させてください。コード編集画面で、private void DropDownList1_SelectedIndexChanged〜という部分の後の{}内に次のように記述してください。

private void DropDownList1_SelectedIndexChanged(object sender, System.EventArgs e)
 {
  this.Label1.ForeColor=Color.FromName(this.DropDownList1.SelectedItem.Value);
 }
  

これで、選択された色が文字色に反映するというプログラムが完成しました。


以上が終了したら、さきほどと同じように[デバッグ]→[開始]を選択してください。デバッグが完了したら、ブラウザが起動して図2-3のようになると思います。

図2-3:ブラウザ画面
図 2-3:ブラウザ画面。

しかし、今のままだと、思っていたものと違うものができていると思います。色々と触ってもらえればわかると思いますが、今のままだと、文字色を変更するたびごとにボタンを押さなければなりません。色を選択しても、ボタンを押さない限り文字色が見ることができないので、何の意味もありません。なので、もう一度、Microsoft Visual Studio .NET 2003上で手直しをしなければなりません。


"DropDownList"を選択して、[プロパティ]の動作エリアでAutoPostBackという項目があると思います。これを"False"から"True"に変更してください。


これは、色を選択するたびに毎回サーバーにデータを送信するという事を示しています。変更し終わったなら、[デバッグ]→[開始]を選択してデバッグを始めてください。ブラウザが起動し、色々と触ってみてください。色を選択するたびに、"This Time is"という文章の文字色が変更すると思います。


以上で、「選択した文字色を文章に反映させる」というプログラムの完成です。

このページのトップへ↑



Copyright (c) 2002-2003 Earth Link Network