郵便番号検索 (ASP.NETで作る - その1)

実行例

機能概要

県を選択すると、県内の全市をリストに表示する。
市を選択すると、市内の全町をリストに表示する。
町を選択すると、該当郵便番号を表示する。
郵便番号から住所を表示する。複数ある場合は、候補を表示する。
郵便番号が7桁の数字かどうかをチェックする。

ステップ1(デザイン作成)

Visual Studio .net を起動する。
ファイルメニューの新規作成のプロジェクトを選ぶ。 Visual C# プロジェクトを選び、ASP.NET Webアプリケーションを選ぶ。場所をhttp://localhost/PostalCodeにして、OKを押す。
WebForm1.aspxのデザインを単にデザインと、WebForm1.aspxのHTMLを単にHTMLと呼ぶ。（デザインとHTML は、画面下部で切替可能）
デザインのポップアップメニューでコードの表示をする。WebForm1.aspx.csを単にコードと呼ぶ。プロパティ画面は常に出しておくこと。
郵便番号データを解凍し、 KEN_ALL.CSVを"C:\Inetpub\wwwroot\PostalCode" にコピーする。
ファイルメニューの新しい項目の追加でコードファイルを選び、ファイル名をPostData.csとする。リンク先の内容をPostData.csにコピーする。
中味を確認する。PostData(全データ)、PrefData(県別データ)、CityData(市別データ)、 TownData(町別データ)の4つのクラスがあり、ツリー構造になっている。
HTMLに切替える。プロパティのpageLayoutをFlowLayoutにする。（ダブルクリックで切替わる）titleを「郵便番号検索」にする。
デザインに切替える。Label(Label1/郵便番号)、TextBox(code)、Button(searchBtn/検索)、 DropDownList(candList)、ValidationSummary(ValidationSummary1)、 RequiredFieldValidator(RequiredFieldValidator1)、RangeValidator(RangeValidator1)を貼り改行する。括弧内は、プロパティの(ID/Text) を表す。(改行は、デザインでカーソルが出ている状態で可能である。) ValidationSummary1は、DisplayMode=Listにする。 RequiredFieldValidator1とRangeValidator1を2つ選択する。(コントロールキーを押しながらクリックする) ControlToValidate=codeにし、Display=Noneにし、 ErrorMessage=7桁の番号を入力して下さいにする。 DropDownList(prefList)、Label(address/住所)を貼り改行する。 ListBox(cityList)を貼り、サイズを適宜広げる。cityListをコピーペーストし、2つ目をtownListとする。
code,candList,prefList,cityList,townListのAutoPostBackをtrueにする。

この画面のようになっているか確認する。 デバッグメニューのデバッグなしで開始を選び、エラーがないことを確認する。

ステップ2(コード作成)

各機能を順番に実装する。

コードのクラスWebForm1に以下のメンバを追加する。

		private void ShowAddress()
		{
			address.Text = prefList.SelectedItem.Text;
			if (cityList.SelectedItem != null) address.Text += cityList.SelectedItem.Text;
			if (townList.SelectedItem != null) address.Text += townList.SelectedItem.Text;
			code.Enabled = true;
			candList.Visible = false;
		}

コード中のPage_Load内に以下を追加する。

			if (IsPostBack) return;
			PostData pd = PostData.Instance(Server);
			for (int i=0;i<47;++i) prefList.Items.Add(pd[i].Value);
			prefList.SelectedIndex = 12;

実行して、東京都と表示されるのを確認する。

県選択処理の実装。デザインのprefListをダブルクリックし、関数内に以下を追加する。

			PostData pd = PostData.Instance(Server);
			PrefData pf = pd[prefList.SelectedIndex];
			cityList.Items.Clear();
			townList.Items.Clear();
			foreach (CityData ct in pf.List) cityList.Items.Add(ct.Value);
			ShowAddress();

Page_Loadの最後に以下を追加する。

			prefList_SelectedIndexChanged(null,null);

実行して、cityListに千代田区などが表示されていることを確認する。

市選択処理の実装。デザインのcityListをダブルクリックし、以下を追加する。

			PostData pd = PostData.Instance(Server);
			PrefData pf = pd[prefList.SelectedIndex];
			CityData ct = (CityData)pf.List[cityList.SelectedIndex];
			townList.Items.Clear();
			foreach (TownData tw in ct.List) townList.Items.Add(tw.Value);
			ShowAddress();

実行して、cityListを選択するとtownListに設定されることを確認する。

町選択処理の実装。デザインのtownListをダブルクリックし、以下を追加する。

			PostData pd = PostData.Instance(Server);
			PrefData pf = pd[prefList.SelectedIndex];
			CityData ct = (CityData)pf.List[cityList.SelectedIndex];
			TownData tw = (TownData)ct.List[townList.SelectedIndex];
			code.Text = tw.Code.ToString();
			ShowAddress();

実行して、cityListとtownListを選択すると郵便番号が表示されることを確認する。

郵便番号の検証の実装。デザインでRangeValidator1を選択する。プロパティのMaximumValue=9999999、MinimumValue=10000、Type=Integerとする。実行して、6,7桁の数字以外の入力でエラーになることを確認する。

郵便番号の検索の実装。コードのクラスWebForm1に以下のメンバを追加する。

		private void SetList(int no)
		{
			PostData pd = PostData.Instance(Server);
			ArrayList a = pd.GetTownData(int.Parse(code.Text));
			if (a == null) 
			{
				address.Text = "無効な番号です";
				return;
			}
			TownData tw = (TownData)a[no];
			CityData ct = tw.Parent;
			PrefData pf = ct.Parent;
			prefList.SelectedIndex = pf.ID;
			prefList_SelectedIndexChanged(null,null);
			cityList.SelectedIndex = ct.ID;
			cityList_SelectedIndexChanged(null,null);
			townList.SelectedIndex = tw.ID;
			townList_SelectedIndexChanged(null,null);
			if (a.Count == 1) return;
			code.Enabled = false;
			candList.Visible = true;
			candList.Items.Clear();
			candList.Items.Add("やり直す");
			foreach (TownData t in a) 
				candList.Items.Add(t.Parent.Value + t.Value);
			candList.SelectedIndex = no+1;
		}

デザインのsearchBtnをダブルクリックし、以下を追加する。

			SetList(0);

デザインのcodeを選択する。プロパティでイベント(雷マーク)をクリックし、TextChanged=searchBtn_Clickとする。実行して、1040061を検索し、銀座が出てくることを確認する。

候補の中から選択の実装。デザインのcandListをダブルクリックし、以下を追加する。
```
			if (candList.SelectedIndex == 0) 
			{
				ShowAddress();
				return;
			}
			SetList(candList.SelectedIndex-1);
				
```
実行して、6000000を検索する。候補の中から選択してみる。
サンプル：WebForm1.aspx、WebForm1.aspx.cs。