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

はじめに

この実践編では、実際にWeb上で利用できるようなプログラミングを紹介していきます。基本編を終えた人を対象にしておりますので、簡単な説明等は省いています。


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

このページのトップへ↑

その1:住所禄の作成

その1では、氏名と住所を記録することができる簡易住所録を作成していきたいと思います。Microsoft Visual Studio .NET 2003を立ち上げて、メニューバーの[ファイル]→[新規作成]→[プロジェクト]を選択し、[新しいプロジェクト]ウインドウ画面で、[Visual C#][ASP.NET Webアプリケーション]を選択します。場所について指定したい人は、変更してください。


[ツールボックス]のWebフォームエリアから"Label"×4、"TextBox"×2、"Button"をそれぞれドラッグ&ドロップして図1-1のように、デザインエリアに配置します。配置が完了したら、テキストを変更します。

図1-1:配置完了プロジェクト画面
図 1-1:配置完了プロジェクト画面。

変更するテキスト名は、ご自由に設定してもらってもかまいません。テキストボックスの[プロパティ]を表示させ、ID名をわかりやすく変更します。それぞれ、nameの記入用テキストボックスID欄に、"TextName"と変更します。同様にaddress記入用テキストボックスID欄を、"TextAddress"にします。これで、デザイン面は完成したので、プログラムの記述に入っていきたいと思います。


"Button"をダブルクリックして、コード編集画面を表示させます。コード編集画面で、private void Button1_Click〜という部分の後の{}内に次のように記述してください。

	private void Button1_Click(object sender, System.EventArgs e)
	 {
	  string str ;
	  str = "Name : " + TextName.Text 
	      + " " + "Address : " + TextAddress.Text ;
	  this.Label4.Text = str ;
	 }
  

ここまで完成したならば、メニューバーから[デバッグ]→[開始]を選択してください。そうすると、ブラウザが起動して実際に書き込むことが可能になると思います。これで、一応の完成をみましたが、プラス機能として、テキストボックス内に何も書き込みが無い場合に、エラー表示をさせるという検証プログラムを追加してみましょう。


[ツールボックス]からWebフォームエリアにあるRequiredFieldValidatorを、図1-2のようにテキストボックスの下にそれぞれ配置してください。

図1-2:RequiredFieldValidator配置完了プロジェクト画面
図 1-2:RequiredFieldValidator配置完了プロジェクト画面。

配置が完了したら、RequiredFieldValidatorの[プロパティ]の表示エリアのErrorMessageの欄にエラー時に表示させるテキストを記入してください。もうひとつについても同様に行います。さらに、2つあるRequiredFieldValidatorがそれぞれ、どのテキストボックスに対応するか、設定します。まず、name記入用のテキストボックス下にある、RequiredFieldValidatorの[プロパティ]を表示させ、動作エリアの"ControlToValidate"の欄をクリックして、図1-3のように、対応するテキストボックスID名である、"TextName"を選択します。また、エラーメッセージを対応する文章、"名前を記入してください"に変更します。Fontサイズも変更させたいので、sizeを"X-small"に変更します。

図1-3:RequiredFieldValidatorの[プロパティ]表示画面
図 1-3:RequiredFieldValidatorの[プロパティ]表示画面。

同様のことを、"TextAddress"にも行います。こちらは、エラーメッセージを"住所を記入してください"にします。


記入が完了したら、デバッグしてブラウザが起動したら完成です。テキストボックスに何も記入せずに、ボタンをクリックして、図1-4のようにエラーメッセージが表記させていたら成功です。

図1-4:ブラウザ完成画面
図 1-4:ブラウザ完成画面。

このページのトップへ↑

その2:リストの読み込み

その2では、SQL Serverを利用してデータをバインドするという事を行っていきます。データのバインド方法は、いくつもありますが、ここでは最も基本的な方法をとっていきたいと思います。


新しいプロジェクトを選択して、これまでと同様にASP.NET Webアプリケーションを作成します。画面が作成されたならば、デザインエリアに[ツールボックス]から"DataGrid"を図2-1のように配置します。

図2-1:配置完了プロジェクト画面
図 2-1:配置完了プロジェクト画面。

次に、バインドさせたいデータを用意します。(今回は、Visual Studio .NETで作成するASP.NETというのを主題としていますので、SQL Serverの設定等やデータの生成方法についての記述は、省かせてもらっています。)ここでは、バインドしたいテーブルデータ名をT_Newsとしています。[サーバーエクスプローラー]でSQL Serverに接続して、バインドしたいデータをデザインエリア内にドラッグ&ドロップして配置します。その場合、「接続文字列にパスワードを含めますか?」というウインドウが出てくると思います。(Visual Studio .NERT 2003の場合)今回は、練習という形なので、「パスワードを含める」という箇所を選択します。配置が完了したら、図2-2のように"sqlConnection1"、"sqlDataAdapter1"というのが下に記述されていると思います。(これらの名称について、自由に設定できますが、今回は弊社で使用している名前に変更していきます。)

図 2-2:sqlConnection1、sqlDataAdapter1配置後プロジェクト画面
図 2-2:"sqlConnection1"、"sqlDataAdapter1"配置後プロジェクト画面。

"sqlConnenction1"を"ConBase"、"sqlDataAdapter1"を"sdaTnews"というように変更します。以後は、"ConBase"、"sdaTnews"という表記で行っていきます。


データグリッドをもう少し見栄え良くするために、デザインを変更します。データグリッドを右クリックで選択して、自動フォーマットを選択します。図2-3のプレビューを見ながら好きなスタイルを選択してみてください。今回は、カラフル1を選択しました。

図2-3:自動フォーマット画面
図 2-3:自動フォーマット画面。

次にデータセットを作成します。"sdaTnews"を右クリックして、データセットの生成を行います。図2-4のように、データセットの作成ウインドウ画面が出てきます。追加するテーブル、T_News(sdaTnews)を選択します。

図2-4:データセット生成画面
図 2-4:データセット生成画面。

OKを押すと、"conBase"、"sdaTnews"の横に、"dataSet1"という名前で、データセットが生成されます。"dataSet1"という名前も扱いづらいので、いつも弊社で使用している名前に変更します。図2-5のように、"dataSet1"の[プロパティ]から、データエリアの"DataSetName"を"dsmMaster"に、デザインエリアの"Name"を"dsMaster"に変更します。

図2-5:dataSet1の[プロパティ]表示画面
図 2-5:"dataSet1"の[プロパティ]表示画面。

次にデータグリッドにデータを読み込ませないといけないので、データグリッドを右クリックしてプロパティウインドウを選択します。「DataGrid1プロパティ」というウインドウが、立ち上がってきます。図2-6のように、全般タブをクリックして、データベースを"dsMaster"にします。

図2-6:「DataGrid1プロパティ」画面
図 2-6:「DataGrid1プロパティ」画面。

適用させて、デザインエリアに戻ってみると、図2-7のように、バインドさせたデータがデータグリッド内にリスト化して表示されていると思います。(今回は、"T_News"というデータリストを使用していますので、それ以外のデータを使用している方と各自データリストの表示方が違います。)(ちなみに、"T_News"というデータリストは、弊社ELNのサイトでサーバ情報で利用しているデータリストです。)

図2-7:バインド後画面
図 2-7:バインド後画面。

次に、プログラムコードの記述に入っていきます。コード編集画面で、private void Page_Load〜という部分の後の{}内に次のように記述してください。

	private void Page_Load(object sender, System.EventArgs e)
	 {
	  // ページを初期化するユーザー コードをここに挿入します。
	  this.sdaTnews.Fill(dsMaster.T_News);
	  this.DataGrid1.DataBind();
	 }
  

その後、デバッグしてみてください。図2-8のように、ブラウザ上にリストが表示させると思います。

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

続いて、このリストがソートするようにプログラムに記述を追加していきます。リストの並び替えについては、本来ならばコードにプログラムを記述したり、SQL Serverの設定を変更したりと、いろいろありますが今回は単純に昇順で並び替えるということを行います。[ツールボックス]の[データ]を選択し、デザインエリアに"DataView"を配置します。"conBase"などと同じ場所に追加されて"dataView1"という名前が表示されているかと思います。データグリッドのプロパティビルダを立ち上げ、全般タブからデータソース名を"dataView1"に変更し、"動作並び替えを有効にする"のチェックボックスにチェックをつけます。


次にデータグリッドの[プロパティ]から、イベントボタンを選択します。(イベントボタンは、稲妻の形をしています。)[イベント]に変更したら、図2-9のように、アクションエリアの"SortCommand"の欄をダブルクリックしてみてください。

図 2-9:データグリッドのイベント画面
図 2-9:データグリッドのイベント画面。

そうするとコード編集画面に移ると思います。そうしたら、private void DataGrid1_SortCommand〜という部分の後の{}内に次のように記述してください。

	private void DataGrid1_SortCommand(object source,
	   System.Web.UI.WebControls.DataGridSortCommandEventArgs e)
	 {
	  this.dataView1.Sort=e.SortExpression;
	  this.DataGrid1.DataBind();
	 }
  

デザイン画面に変更し、さきほどと同じようにアクションエリアの"PageIndexChanged"の欄をダブルクリックして、private void DataGrid1_PageIndexChanged〜という部分の後の{}内に次のように記述してください。

	private void DataGrid1_PageIndexChanged(object source, 
	   System.Web.UI.WebControls.DataGridPageChangedEventArgs e)
	 {
	  this.DataGrid1.CurrentPageIndex=e.NewPageIndex;
	  DataGrid1.DataBind();
	 }
  

最後に、"dataView1"の[プロパティ]からデータエリアの"Table"の箇所をプルダウンして、バインドするデータ、今回は、T_Newsを選択します。


これで、プログラムの記述の完成です。デバッグしてみると、図2-9のようにでてくると思います。リスト上部メニューを選択して、実際に並び替えが出来たら完成です。

図2-10:ブラウザ完成画面
図 2-10:ブラウザ完成画面。

以上で、実際にWeb上で利用できるようなプログラミングを紹介を終わります。

このページのトップへ↑



Copyright (c) 2002-2003 Earth Link Network