フレッシュマン企画連載
初めてでも安心！ 1日で作れるWebアプリ講座

第2回 Webサイトにどんどん機能を足してみよう！

ボタンをクリックしたときのイベントは、「hirumeshi2.aspx.cs」ファイルのButton_Clickに記述します。次の画面と同じになるように、Button_Clickのイベントの{ }内にのコードを記述してください。

Button_Clickのイベントに記述する内容1

コードのテキストはこちらからコピーできます。

　ここでは条件を基にした検索と、検索結果の読み込みをしています。

検索用のURLとアクセスキーを文字列の変数として準備する。URLの“?”以降に続く文字列は、絞り込む検索条件を表しています。これを「クエリ」といいます。クエリとは、何らかの条件をもとにデータベースへの問い合わせをすることをいいます。

ドロップダウンリストで選択された値を取得する。

検索結果として表示する最大件数を指定する。

で準備したURLの{ }部分に、検索条件であるのアクセスキーとの情報を組み合わせてURLを完成させる。

Page_Load時と同じように、xmlでの検索結果を読み込む

ここで大事な部分がにある文字列を組み合わせて1つにする整形処理（String.Format）です。

のURL（gvUrl）の文字列の中に{0}{1}{2}{3}とありますが、このままでは正しいURLになりません。これらそれぞれには、ある値を入れたいのです。そこでのString.Format()で入れたい値を指定してしいます。（）の中を見てみましょう（見やすくするため「,」の位置で改行しています）。

という構造になっています。先にも触れたようにここでも{ }の中は1ではなくゼロから始めますよ。

　次の画面と同じになるように、Button_Clickのイベントの{ }内にのコードを追記してください。

Button_Clickのイベントに記述する内容2

コードのテキストはこちらからコピーできます。

　ここでは検索の結果を基にした処理をしています。

検索結果があるかどうかのチェックをする。※ぐるなびWebサービスから提供されるのは、検索結果の件数を持った1つのテーブルと、検索結果の店舗情報を持った複数のテーブルとなります。検索結果が0件の場合は、検索結果の件数テーブルのみ提供されます。従って、ここはテーブルが1つしかカウントされない時（＝検索結果が0件の場合）という条件を示しています。

検索結果が0件だった場合：コメントをLabelコントロールに表示する。

検索結果が0件だった場合：GridViewコントロールのデータソースをnull（＝何もない）にしてDataBindする（つまり、GridViewコントロールの中身を空にしている）。最後の「return;」は「戻す」という意味で、つまりここで「Button_Clickのイベントの処理を戻す」→「Button_Clickのイベントの処理を終了する」ということになります。

検索結果が1件以上だった場合：取得した店舗情報のテーブルを準備する。※ぐるなびWebサービスでは店舗情報を持ったテーブルは上から2番目です。従って「Tables[1]」としています。

検索結果が1件以上だった場合：GridViewコントロールに店舗情報を持ったテーブルを表示させる。

GridViewコントロールとは、表のようなデータを簡単にセットすることができるコントロールです。「hirumeshi2.aspx」をWebフォーム・デザイナで確認してみるとイメージがつきやすいと思います。

　GridViewコントロールでは、データソースを指定してDataBindするだけで、簡単に表のデータを表示することができます。とはいっても、ただデータを入れるだけでは見栄えもよくなく扱いづらいので、第3回ではGridViewコントロールのカスタマイズを行っていきます。今回はデータを入れるだけにしましょう。

　次の画面と同じになるように、Button_Clickのイベントの{ }内にのコードを追記してください。

Button_Clickのイベントに記述する内容3

コードのテキストはこちらからコピーできます。

　ここでは、検索結果の件数によって変化するコメント表示を処理しています。

検索結果の件数を持つテーブルを準備。※ぐるなびWebサービスでは上から1番目のテーブルに件数を持っているので、ここでは「Tables[0]」としています。

テーブルの中の位置を指定して、件数を取得する。※ぐるなびWebサービスでは上から1行目のカラム名「total_hit_count」が件数となっています。

Labelコントロールに表示するコメントをセットする。

検索結果が先に指定した「hit_per_page」の件数（ここでは10件）以下の場合：Labelコントロールに表示するコメントをセットする（「hit_per_page」については、「Button_Clickのイベントに記述する内容1」を参照してください）。

わーい！ もう出来ちゃったんだ。僕ってすごいなぁー

　……んん！？ おかしい。千葉を選択しても、フランス料理を選択しても、「東京・家庭料理」しか検索できない……。これじゃネモトサンに見せられないよ。（泣

そうなんです。実は大事な大事なもうひと手間が必要なんです。第1回で、ほかにどんなイベントがあっても、Page_Loadイベントを最初に通過するということには触れましたね。ASP.NETではPage_Loadは特別なイベントで、例えばボタンをクリックしたときにも最初にページの読み込みが行われるためButton_Clickイベントの前に、Page_Loadイベントを通過する仕組みになっているのです。つまり、

となっているわけです。

　いま作成しているアプリで動作したい順番は下記のとおりですが……

1. Page_Loadイベントでドロップダウンリストの初期値を表示
2. ドロップダウンリストで好きな条件を選択
3. 検索するボタンをクリック
4. Button_Clickイベントを実行（検索・表示）

　このままでは、「1→2→3」→「1→4」の順で動作してしまいます。検索の直前にPage_Loadを実行してしまうことにより、2で選択したはずの条件がPage_Load時の初期値に塗り替えられてしまうのです。

　Page_Loadイベントを最初に通過するこの現象は、「Postback」（ポストバック）というASP.NETの仕組みによって起こっています。Postbackとは、ボタンをクリックした際にデータ（ここでは「都道府県名」と「飲食店の業種」）を自分自身（＝同じWebページ）に送信して、それを受けてページを再ロードすることです。この仕組みでページが再ロードされることにより、Postback時にもPage_Loadイベントが最初に実行されます。

　要するに、Postbackとは「（何らかのデータが送信された）同一ページの再ロード（＝2回目以降のロード）」を意味します。注意してほしいのは、［F5］ボタンやブラウザの［戻る］ボタンを利用した場合は、ページの新規読み込みと見なされ、同一ページの再ロード、つまりPostbackには該当しません。

　「1→2→3」→「1→4」の動作は、本来は以下のようになるべきです。

　この流れを実現するには、1のPage_Loadイベントの処理を実行する前に、「ページの新規読み込み」（Postbackではない）なのか、「同一ページの再ロード」Postbackである）なのか、まとめるとPostbackかどうかを判定すればよいでしょう。

　前回も出てきた“！”の意味は覚えていますか？“==”は両辺が等しいという意味を表し、“!=”は等しくないという意味でしたね。ここでは、「PostBackではない」ときにだけ1の処理を実行したいので、“!IsPostBack”という記述を使ってPostBackかどうかの判定を行うことができます。

　では、Page_Loadイベント内のコードがPostBack以外のときだけ実行されるように変更しましょう。さぁ、これが第2回の最後です。次の画面と同じになるように、Page_Loadのイベントの{ }内にのコードを追記してください。

PostBack時のPage_Load除外処理

コードのテキストはこちらからコピーできます。

そうか、こうすればボタンをクリックしたときに実行したくない処理を抜かすことができるんだ！ これで思いどおりの動きだ！（※多少動作が不安定な場合もあります。）

今回のWebアプリ完成形