<%@ Page Language="VB" %>
<%@ import Namespace="System.Data" %>
<%@ import Namespace="System.Data.OleDb" %>
<script runat="server">

    Sub Page_Load(sender As Object, e As EventArgs)
      Ajax.Manager.Register(Me, "My.Page", Ajax.Debug.None)
    End Sub
    
    <Ajax.Method> _
    Public Function GetAddress(ByVal strPostalCode As String) As DataTable
      Dim strSQL As String = "Select * From tblPostalCode Where Code=?"
      Dim strConnectionString As String = _
        String.Format("PROVIDER=Microsoft.Jet.OLEDB.4.0;DATA Source={0}", _
          Server.MapPath("webdb/PostalCode.mdb"))
      Dim con As New OleDbConnection(strConnectionString)
      Dim da As New OleDbDataAdapter
      Dim cmd As New OleDbCommand(strSQL, con)
      Dim dt As New DataTable()
    
      cmd.Parameters.Add("Code", strPostalCode)
      da.SelectCommand = cmd
      da.Fill(dt)
      Return dt
    End Function

</script>
<html>
<head>
<style>
TH {
	TEXT-ALIGN: right
}
SPAN.hidden {
	DISPLAY: none
}
SPAN.error {
	DISPLAY: inline; COLOR: black; BACKGROUND-COLOR: pink
}
.hide {
	DISPLAY: none
}
.show {
	DISPLAY: inline
}
</style>
<script>
function getAddress(postalCode) {
  My.Page.GetAddress(postalCode, getAddressCallBack);
  window.status = "住所取得中...";
}

function getAddressCallBack(result) {
  var table = result.value;
  var msg = document.getElementById("message");
  var lst = document.getElementById("lstAddress");
  var ken = document.getElementById("txtKen");
  var address = document.getElementById("txtAddress");

  ken.value = "";
  address.value = "";

  switch (table.Rows.length) {
    case 0: // 郵便番号が見つからないケース
      msg.className = "error";
      lst.className = "hide";
      break;
    case 1: // 住所が1件見つかったケース
      msg.className = "hidden";
      lst.className = "hide";
      ken.value = table.Rows[0].Ken;
      address.value = table.Rows[0].City + table.Rows[0].Town;
      break;
    default: // 複数の住所が見つかったケース
      msg.className = "hidden";
      lst.className = "show";

      // リストボックスのアイテムを削除
      lst.options.length = 0;  // lst.length = 0;

      // リストボックスに住所を追加
      for (var i = 0; i < table.Rows.length - 1; ++i) {
        var option = document.createElement("option");
        option.value = table.Rows[i].Ken;
        option.text = table.Rows[i].City + table.Rows[i].Town;
        if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
          lst.add(option);
        } else {
          lst.add(option, null);
        }
      }
  }
  window.status = "住所取得完了!";
}

// リストボックスから選択した住所をテキストボックスに表示
function setAddress(lst) {
  document.getElementById("txtKen").value =
    lst.options[lst.selectedIndex].value;
  document.getElementById("txtAddress").value =
    lst.options[lst.selectedIndex].text;
  lst.className = "hide";
}
</script>
</head>
<body>
    <form runat="server">
        <h3>Ajax2 (<%= DateTime.Now %>)</h3>
        <table>
            <tbody>
                <tr>
                    <td valign="bottom" align="right">
                        〒 
                    </td>
                    <td>
                        ハイフンなしの郵便番号を入力したら[Tab]キーを押してください.<br />
                        郵便番号に「0288401」を入力するとリストボックスに候補が表示されます.<br />
                        <asp:TextBox id="txtPostalCode" onblur="getAddress(this.value);" runat="server" Width="7em"></asp:TextBox>
                        <span class="hidden" id="message">郵便番号が不正です...再入力してください.</span> 
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                        <asp:ListBox id="lstAddress" runat="server" CssClass="hide" onchange="setAddress(this);"></asp:ListBox>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        都道府県 
                    </td>
                    <td>
                        <asp:TextBox id="txtKen" runat="server" Width="7em"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        住所 
                    </td>
                    <td>
                        <asp:TextBox id="txtAddress" runat="server" Width="20em"></asp:TextBox>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</body>
</html>
