今回は、Oracleのscott/tigerのEMP表データをAccordionコントロールに連結する方法を紹介します。
Accordionコントロールは複数のペインで構成されますが、これまでに紹介してきたサンプルは、あらかじめ表示したいだけのペインを準備していました。
この場合は、
<ajaxToolkit:AccordionPane>
<Header></Header>
<Contents></Contents>
</ajaxToolkit:AccordionPane>
を必要分用意しておけばOKでした。
しかし、データベースと連結して動的にペインを増やすにはこの方法は使用することが出来ません。
前回紹介した<HeaderTemplate>と<ContentTemplate>を使用します。
以下は最小限必要なソースです。
<ajaxToolkit:Accordion>
<HeaderTemplate></HeaderTemplate>
<ContentTemplate><ContentTemplate>
</ajaxToolkit:Accordion>
今回はSqlDataSourceコントロールを用いて、Oracleのscott/tigerのEMP表データをAccordionコントロールに連結してみました。
AcoordionコントロールにSqlDataSourceを連結するには、DataSourceIDプロパティを使用します。
<ajaxToolkit:Accordion DataSourceID="連結するデータソース"> という感じです。
次に動的にヘッダーを変える方法ですが<HeaderTemplate>の中で<%Eval("EMPNO")>として、従業員番号を表示させています。
コンテンツを動的に変える方法も同様にして<ContentTemplate>の中で<%Eval("ENAME")%>,<%Eval("JOB")%>,<%Eval("SAL")%>としてデータを表示しています。
（Eval("項目名")で連結してあるデータソースのデータを表示することが出来ます。）
下記が今回のソースコードです。
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>データベースと連結する</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<ajaxToolkit:Accordion ID="Accordion1" runat="server"
HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent"
SuppressHeaderPostbacks="false"
DataSourceID="SqlDataSource1>
<HeaderTemplate>
<asp:Label ID="lblEMPNO" runat="server">従業員番号：<%#Eval("EMPNO")%></asp:Label>
</HeaderTemplate>
<ContentTemplate>
<ul>
<li><asp:Label ID="lblEMPNM" runat="server">氏名：<%#Eval("ENAME")%></asp:Label></li>
<li><asp:Label ID="lblEMPNM" runat="server">氏名：<%#Eval("ENAME")%></asp:Label></li>
<li><asp:Label ID="lblJOB" runat="server">業務：<%#Eval("JOB")%></asp:Label></li>
<li><asp:Label ID="lblSAL" runat="server">給料：<%#Eval("SAL")%></asp:Label></li>
</ul>
</ContentTemplate>
</ajaxToolkit:Accordion>
<asp:SqlDataSource
ID="SqlDataSource1"
Runat="server"
SelectCommand="select * from emp"
DataSourceMode="DataSet"
ConnectionString="<%$ConnectionStrings:OraConnString%>"
ProviderName="System.Data.OracleClient" >
</asp:SqlDataSource>
</form>
</body>
</html>
実行結果は下記の通りです。
