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

    Private  Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
      Ajax.Manager.Register(Me, "My.Page", Ajax.Debug.None)
    End Sub
    
    <Ajax.Method> _
    Public Function GetStockQuote(strStockTickers As String) As DataTable
      Dim ws As New StockQuotes
      Dim arrResult() As Quote
      Dim dt As DataTable = CreateDataTable()
      Dim dr As DataRow
    
      arrResult = ws.GetStockQuotes(strStockTickers)
      For i As Integer = 0 To arrResult.GetUpperBound(0)
        dr = dt.NewRow
        dr("CompanyName") = arrResult(i).CompanyName
        dr("StockQuote") = arrResult(i).StockQuote
        dr("Change") = arrResult(i).Change
        dt.Rows.Add(dr)
      Next
    
      Return dt
    End Function
    
    Function CreateDataTable() As DataTable
      Dim dt As New DataTable()
    
      With dt.Columns
        .Add(New DataColumn("CompanyName", GetType(System.String)))
        .Add(New DataColumn("StockQuote", GetType(System.String)))
        .Add(New DataColumn("Change", GetType(System.String)))
      End With
    
      Return dt
    End Function

</script>
<html>
<head>
<script>
function getStockQuote() {
  var stockQuote = "";
  var sel = document.getElementById("lstCompany");
  for (var i=0; i < sel.length; ++i) {
    if (sel.options[i].selected == true) {
      if (stockQuote.length > 0) {
        stockQuote += ",";
      }
      stockQuote += sel.options[i].value;
    }
  }

  My.Page.GetStockQuote(stockQuote, getStockQuoteCallBack);
  window.status = "株価取得中...";
  setTimeout("getStockQuote()", 60000);
}

function getStockQuoteCallBack(result) {
  var stockQuote = result.value;
  var sqDiv = document.getElementById("stockQuote");
  sqDiv.innerHTML = "";
  sqTable = document.createElement("TABLE");
  sqTable.border = 1;
  sqTableBody = document.createElement("TBODY");

  // テーブルのヘッダー作成
  row = document.createElement("TR");
  cell = document.createElement("TH");
  textNode = document.createTextNode("Name");
  cell.appendChild(textNode);
  row.appendChild(cell);

  cell = document.createElement("TH");
  textNode = document.createTextNode("Trade");
  cell.appendChild(textNode);
  row.appendChild(cell);

  cell = document.createElement("TH");
  textNode = document.createTextNode("Change");
  cell.appendChild(textNode);
  row.appendChild(cell);

  sqTableBody.appendChild(row);

  // テーブルの明細作成
  for (var i = 0; i < stockQuote.Rows.length; ++i) {
    row = document.createElement("TR");

    // 名称のセル作成
    cell = document.createElement("TD");
    textVal = stockQuote.Rows[i].CompanyName;
    textNode = document.createTextNode(textVal);
    cell.appendChild(textNode);
    row.appendChild(cell);

    // 取引値のセル作成
    cell = document.createElement("TD");
    textVal = stockQuote.Rows[i].StockQuote;
    textNode = document.createTextNode(textVal);
    cell.appendChild(textNode);
    row.appendChild(cell);

    // 前日比のセル作成
    cell = document.createElement("TD");
    textVal = stockQuote.Rows[i].Change;
    textNode = document.createTextNode(textVal);
    cell.appendChild(textNode);
    row.appendChild(cell);

    sqTableBody.appendChild(row);

  }
  sqTable.appendChild(sqTableBody);
  sqDiv.appendChild(sqTable);

  window.status = "株価取得完了!";
}

</script>
</head>
<body>
    <form runat="server">
        <h3>Ajax5 (<%= DateTime.Now %>)</h3>
        <p>
            リストボックスから会社名を選択したら[株価表示]ボタンをクリックしてください. 
        </p>
        <asp:ListBox id="lstCompany" runat="server" SelectionMode="Multiple">
            <asp:ListItem Value="MSFT">Microsoft</asp:ListItem>
            <asp:ListItem Value="AAPL">Apple Computer</asp:ListItem>
            <asp:ListItem Value="YHOO">Yahoo</asp:ListItem>
            <asp:ListItem Value="GOOG">Google</asp:ListItem>
            <asp:ListItem Value="ORCL">Oracle</asp:ListItem>
            <asp:ListItem Value="IBM">IBM</asp:ListItem>
        </asp:ListBox>
        <p>
            <input onclick="getStockQuote();" type="button" value="株価表示" />
        </p>
        <div id="stockQuote">
        </div>
    </form>
</body>
</html>
