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

    Private  Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
      Ajax.Manager.Register(Me, "My.Page", Ajax.Debug.None)
      If Not IsPostBack Then
        PopulateCategories()
      End If
    End Sub
    
    Sub PopulateCategories()
      Dim strSQL As String = "Select * From Categories"
      Dim strConnectionString As String = _
        String.Format("PROVIDER=Microsoft.Jet.OLEDB.4.0;DATA Source={0}", _
          Server.MapPath("webdb/Nwind.mdb"))
      Dim con As New OleDbConnection(strConnectionString)
      Dim cmd As New OleDbCommand(strSQL, con)
    
      con.Open()
      Dim dr As OleDbDataReader = cmd.ExecuteReader()
      dropCategories.DataTextField = "CategoryName"
      dropCategories.DataValueField = "CategoryID"
      dropCategories.DataSource = dr
      dropCategories.DataBind()
      dr.Close
      con.Close()
    End Sub
    
    
    <Ajax.Method> _
    Public Function GetProducts(strCategoryID As String) As DataTable
      Dim strSQL As String = "Select ProductID, ProductName" & _
        " From Products Where CategoryID=?"
      Dim strConnectionString As String = _
        String.Format("PROVIDER=Microsoft.Jet.OLEDB.4.0;DATA Source={0}", _
          Server.MapPath("webdb/Nwind.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("@1", strCategoryID)
      da.SelectCommand = cmd
      da.Fill(dt)
      Return dt
    End Function

</script>
<html>
<head>
<script>
function GetProducts(ddl) {
  if (ddl.selectedIndex >= 0) {
    var categoryID = ddl.options[ddl.selectedIndex].value;
    My.Page.GetProducts(categoryID, DoGetProductsCallBack);
    window.staus = "読み込み中です...";
  }
}

function DoGetProductsCallBack(result) {
  var select = document.getElementById("lstProducts");
  // listboxのアイテムを削除する
  while (select.length > 0) {
    select.remove(0);
  }

  // listboxのアイテムを追加
  var products = result.value;
  for (var i = 0; i < products.Rows.length; ++i) {
    var option = document.createElement("option");
    option.text = products.Rows[i].ProductName;
    option.value = products.Rows[i].ProductID;
    if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
      select.add(option);
    } else {
      select.add(option, null);
    }
  }
  window.status = "読み込み完了!";
}
</script>
</head>
<body>
    <form runat="server">
        <asp:DropDownList id="dropCategories" runat="server" onchange="GetProducts(this);"></asp:DropDownList>
        <br />
        <br />
        <asp:ListBox id="lstProducts" runat="server" Rows="10"></asp:ListBox>
    </form>
</body>
</html>
