Ajax Tips

Microsoft Ajax Control Toolkit - AlwaysVisibleControlを使用する -

HIRO — Tue, 08 May 2007 11:39:00 GMT

AlwaysVisibleControlは、コントロールを指定した位置に表示させておくためのものです。
スクロールしようが、リサイズしようが指定位置に表示させることが出来ます。
よく、スクロールされてもメニューは一定の位置に表示されるサイトを見かけますが、あれを実現させることができます。
使用するプロパティは最低３つです。
・TargetControlID
指定位置に表示したいコントロールをセットします。
・VerticalSide
垂直方向の表示位置です。Bottom/Middle/Top のいずれかを指定します。
・Horizontal
水平方向の表示位置です。Center/Left/Right のいずれかを指定します。

それ以外のプロパティとしては
・VerticalOffset
Webブラウザ表示領域上端からののオフセット位置です。単位はピクセルです。
・HorizontalOffset Webブラウザ表示領域左端からののオフセット位置です。単位はピクセルです。
・ScrollEffectDuration
Webブラウザがスクロールやリサイズが行われた際、どのくらいの時間をかけて指定し
た位置に移動するかを示す時間をセットします。単位は秒です。

下記サンプルソースです。
サンプルではPanel1を指定した位置（垂直方向:Middle, 垂直方向オフセット:10pixel, 水平方向:Left, 水平方向オフセット:10pixel）に表示します。


<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>AlwaysVisibleControlサンプル</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server" 
                TargetControlID="Panel1" 
                VerticalSide="Middle"
                VerticalOffset="10"
                HorizontalSide="Left"
                HorizontalOffset="10"
                ScrollEffectDuration=".1">
            </ajaxToolkit:AlwaysVisibleControlExtender>
            <asp:Panel ID="Panel1" runat="server" BorderColor="Blue" 
                Height="50px" Width="125px" BorderStyle="Ridge">
                <ul>
                    <li><a href="http://www.yahoo.co.jp">Yahoo</a></li>
                    <li><a href="http://www.google.co.jp">Google</a></li>
                    <li><a href="http://hiro.wankuma.com">HIRO's.NET</a></li>
                </ul>
            </asp:Panel>
         </div>
    </form>   
</body>
</html>

下記実行結果です。

Microsoft Ajax Control Toolkit - データベースと連結する-

HIRO — Sat, 28 Apr 2007 22:23:00 GMT

今回は、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>

実行結果は下記の通りです。

Microsoft Ajax Control Toolkit - AccordionPaneを動的に追加する-

HIRO — Fri, 27 Apr 2007 21:18:00 GMT

今回は、AccordionコントロールにAccordionPaneを動的に追加する方法を紹介します。

下記は、動的にAccordionPaneを追加する際に必要な最低限のソースです。
（<Pane>も<AccordionPane>も必要ありません。）

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <title>Accordionテスト4</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <ajaxToolkit:Accordion ID="Accordion1" runat="server"
                HeaderCssClass="accordionHeader"
                ContentCssClass="accordionContent">
            </ajaxToolkit:Accordion>
        </div>
    </form>   
</body>
</html>

次に動的にAccordionPaneを追加する方法ですが

Dim ap As New AjaxControlToolkit.AccordionPane

のようにしてAccordionPaneのインスタンスを作成します。
次に
HeaderContainer.Controls.Add
ContentContainer.Controls.Add
でヘッダーとコンテンツを作成し、Accordionコントロールのペインに追加します。

下記がそのコードです。


Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    For I As Integer = 1 To 3
        Dim ap As New AjaxControlToolkit.AccordionPane
        ap.HeaderContainer.Controls.Add(New LiteralControl("ヘッダー" & I.ToString()))
        ap.ContentContainer.Controls.Add(New LiteralControl("コンテンツ" & I.ToString()))
        Me.Accordion1.Panes.Add(ap)
    Next
End Sub

実行した結果は下記の通りです。


次回はAccordionコントロールにデータベースを連結する方法を紹介します。

Microsoft Ajax Control Toolkit - Accordionコントロールのプロパティ　その2-

HIRO — Thu, 26 Apr 2007 23:06:00 GMT

本日はAccordionコントロールのプロパティ、AutoSizeとSuppressHeaderPostbacksプロパティについて説明したいと思います。

1.ペインが開く時の高さを設定する

ペインが開くときの高さの設定をするには AutoSizeプロパティを使用します。Heightプロパティと合わせて使用します。
AutoSizeプロパティに設定できる値は下記の通りです。

None: コンテンツの内容に合わせて広がります。1行しかない場合は1行分、100行あれば100行分といったように、コンテンツ全体が表示されます。
Limit: コンテンツの内容に合わせて広がります。ただし、コンテンツを表示したときの高さがHeightプロパティを超える場合には、自動的にスクロールバーが表示されてHeightを超えないように自動調整されます。
Fill: コンテンツの内容に関係なく常にHeightの値までペインが開きます。

注意：
　　　Internet Exprlorer6 & Internet Explorer7ではLimitモードはとFillは同じ動作をします。（既知の問題）
　　　これはmax-height CSSがサポートされていないのが原因とのことです。
　　　FireFoxで試してみましたが、こちらの方はうまく動作しました。

2.ヘッダーがクリックされたときのポストバックを抑止する
ヘッダーを<a>タグで装飾していて、且つポストバックを抑止したいときにはSuppressHeaderPostbacksプロパティを使用します。
　ヘッダーを<a>タグで装飾しない場合はこのプロパティを使用する必要はありません。
Microsoftのサンプルでは以下のCSSを使用して、AccordionコントロールのHeaaderに<a>タグを使用して装飾がなされています。（ヘッダーにマウスカーソルを持って行くと、カーソルが手のマークになり下線を引いて強調表示される）

#master_content .accordionHeader a
{
color: #FFFFFF;
background: none;
text-decoration: none;
}

#master_content .accordionHeader a:hover
{
background: none;
text-decoration: underline;
}

SuppressHeaderPostbacksプロパティはbool値を設定します。
True: ヘッダーの<a>タグがクリックされてもポストバックしない
false: ヘッダーの<a>タグがクリックされたらポストバックする

今回使用したソースコードは下記の通りです。

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <title>Accordionテスト3</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <ajaxToolkit:Accordion ID="Accordion1" runat="server"
                HeaderCssClass="accordionHeader"
                ContentCssClass="accordionContent"
                AutoSize="Limit"
                Height="200px"
                SuppressHeaderPostbacks="true">
                <Panes>
                    <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
                        <Header><a href="" class="accordionLink">ヘッダー1</a></Header>
                        <Content>コンテンツ1</Content>
                    </ajaxToolkit:AccordionPane>
                    <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
                        <Header><a href="" class="accordionLink">ヘッダー2</a></Header>
                        <Content>コンテンツ2</Content>
                    </ajaxToolkit:AccordionPane>
                    <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
                        <Header><a href="" class="accordionLink">ヘッダー3</a></Header>
                        <Content>コンテンツ3</Content>
                    </ajaxToolkit:AccordionPane>
                </Panes>
            </ajaxToolkit:Accordion>
        </div>
    </form>   
</body>
</html>

実行結果は下記の通りです。
（画像では動作を確認できないので是非試してみてください）

Microsoft Ajax Control Toolkit - Accordionコントロールのプロパティ　その１-

HIRO — Wed, 25 Apr 2007 23:11:00 GMT

本日は、Accordionコントロールのプロパティについて説明したい思います。

1.伸縮するときにフェードイン・フェードアウト効果を適用する
　　FadeTransitions="true"　とする。
コンテンツが表示されるときにはフェードイン、コンテンツが消えていくときはフェードアウトします。

2.伸縮スピードを変更する
　　TransitionDurationプロパティを使用する。
単位はmsec となっており、1秒にする場合は TransitionDuration="1000" とする。

3.初回アクセス時に表示するペインを設定する
SelectedIndexプロパティを使用する。（0から数える）。
2番目のペインを選択するには SelecttedIndex="1" とする。

上記3つのプロパティを使用したソースは下記の通りです。

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
    <title>Accordionテスト3</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <ajaxToolkit:Accordion ID="Accordion1" runat="server" 
                HeaderCssClass="accordionHeader"
                ContentCssClass="accordionContent"
                FadeTransitions="true"
                TransitionDuration="1000"
                SelectedIndex="1">
                <Panes>
                    <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
                        <Header>ヘッダー1</Header>
                        <Content>コンテンツ1</Content>
                    </ajaxToolkit:AccordionPane>
                </Panes>
                <Panes>
                    <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
                        <Header>ヘッダー2</Header>
                        <Content>コンテンツ2</Content>
                    </ajaxToolkit:AccordionPane>
                </Panes>
                <Panes>
                    <ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
                        <Header>ヘッダー3</Header>
                        <Content>コンテンツ3</Content>
                    </ajaxToolkit:AccordionPane>
                </Panes>                
            </ajaxToolkit:Accordion>  
        </div>
    </form>   
</body>
</html>

Microsoft Ajax Control Toolkit - AccordionコントロールにCSSを設定する -

HIRO — Tue, 24 Apr 2007 21:18:00 GMT

前回の基本使用方法では、CSS設定を行っていなかったためペインの区切りがわかりにくいものでした。
　今回は、AccordionコントロールにCSSを設定して見やすくする方法を紹介します。
　
　Accordionコントロールは、ヘッダー部分とコンテンツ部分のそれぞれにCSSを指定することが可能です。
　ヘッダー部分へCSSを指定するには、HeaderCssClassプロパティを、コンテンツ部分にCSSを指定するにはContentCssClassプロパティを使用します。
　
　CSSとソースコードは下記の通りです。
　(CSSはMicrosoftのサンプルを使用しています）

StyleSheet.css

/* Accordion */

.accordionHeader

{

  border: 1px solid #2F4F4F;

  color: white;

  background-color: #2E4d7B;

  font-family: Arial, Sans-Serif;

  font-size: 12px;

  font-weight: bold;

  padding: 5px;

  margin-top: 5px;

  cursor: pointer;

}



.accordionContent

{

  background-color: #D3DEEF;

  border: 1px dashed #2F4F4F;

  border-top: none;

  padding: 5px;

  padding-top: 10px;

}

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <title>Accordionテスト2</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <ajaxToolkit:Accordion ID="Accordion1" runat="server" 
                                HeaderCssClass="accordionHeader"
                                ContentCssClass="accordionContent">
                <Panes>
                    <ajaxToolkit:AccordionPane runat="server" >
                        <Header>ヘッダー1</Header>
                        <Content>コンテンツ1</Content>
                    </ajaxToolkit:AccordionPane>
                </Panes>
                <Panes>
                    <ajaxToolkit:AccordionPane runat="server">
                        <Header>ヘッダー2</Header>
                        <Content>コンテンツ2</Content>
                    </ajaxToolkit:AccordionPane>
                </Panes>
                <Panes>
                    <ajaxToolkit:AccordionPane runat="server">
                        <Header>ヘッダー3</Header>
                        <Content>コンテンツ3</Content>
                    </ajaxToolkit:AccordionPane>
                </Panes>                
            </ajaxToolkit:Accordion>        
        </div>
    </form>   
</body>
</html>

実行結果は下記の通りです。

CSSを設定することで見やすくなりましたね。
次回はAccordionコントロールのそのほかのプロパティの使用方法について説明したいと思います。

Microsoft Ajax Control Toolkit - Accordionコントロールの基本使用方法 -

HIRO — Mon, 23 Apr 2007 22:28:00 GMT

　Accordionコントロールは、アコーディオンが伸縮するかのように、クリックされたヘッダーに対応するペインがアニメーションしながら表示するコントロールです。
　Accordionコントロールの動作を実際に確認したい場合は、ここにアクセスしてみてください。

　Accordionコントロールは、複数のペインから構成されます。
　また1つのペインは、1つのヘッダーと1つのコンテンツから構成されています。

　最低限必要なソースは下記の通りです。

<ajaxToolkit:Accordion ID="Accordion1" runat="server">
    <Panes>
        <ajaxToolkit:AccordionPane runat="server" >
            <Header>ヘッダー1</Header>
            <Content>コンテンツ1</Content>
        </ajaxToolkit:AccordionPane>
    </Panes>
</ajaxToolkit:Accordion>

　ペインを増やすには、上記の<Panes>～</Panes>を追加します。

　3つのペインを持つAccordionコントロールを表示させてみましょう。
　ソースは以下の通りです。

Accordion.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Accordionテスト1</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div>
            <ajaxToolkit:Accordion ID="Accordion1" runat="server">
                <Panes>
                    <ajaxToolkit:AccordionPane runat="server" >
                        <Header>ヘッダー1</Header>
                        <Content>コンテンツ1</Content>
                    </ajaxToolkit:AccordionPane>
                </Panes>
                <Panes>
                    <ajaxToolkit:AccordionPane runat="server">
                        <Header>ヘッダー2</Header>
                        <Content>コンテンツ2</Content>
                    </ajaxToolkit:AccordionPane>
                </Panes>
                <Panes>
                    <ajaxToolkit:AccordionPane runat="server">
                        <Header>ヘッダー3</Header>
                        <Content>コンテンツ3</Content>
                    </ajaxToolkit:AccordionPane>
                </Panes>
            </ajaxToolkit:Accordion>
        </div>
    </form>
</body>
</html>

　上記を実行してみた結果は下記の通りです。

（ヘッダー1がクリックされて、ヘッダー1のコンテンツ1が表示されている状態です。）

　ヘッダー1をクリックするとヘッダー1に対応するコンテンツが、ヘッダー2をクリックするとヘッダー2に対応するコンテンツがアニメーションしながら表示されます。
　しかし、これではどこからどこまでが１つのペインなのかわかりにくいですよね？
　ということで、次回はAccordionコントロールにCSSを設定して、見やすく表示してみたいと思います。

Ajax Control Toolkitのインストール方法はこちらをご覧ください。
Ajax Control Toolkitを用いたプロジェクトの作成方法はこちらをご覧ください。