注意事項
スライドショーサービスから適切な形式で正しいデータが返されるまでは、次のWebページに移動しないでください。Webページをビルドしてテストする際、スライドショーサービスにバグがあったとしても通知はされません。AJAX SlideShowコントロールは、誤った方法で使用されたり、スライドショーサービスから誤った形式のデータが渡されたりしても、単に機能しないだけで、その誤りがユーザーに通知されることはありません。
TreeViewの概要
TreeViewコントロールは、System.Web.UI.WebControls名前空間で提供される標準ナビゲーションコントロールです。TreeViewコントロールの既定の開始場所は、Web.ConfigのTreeViewDefaultStartLocationキーで設定されます。この場所は、TreeViewコントロールのルートになります。それ以外のノードはすべて、コードで子ディレクトリを反復処理することによって追加されます。
次のコードを追加する必要があります。
- ノードが選択されているときに、そのノードのValuePathをcontextKeyとしてWebサービスに渡す。
- ノード外の位置がクエリ文字列によって渡されたときに、選択されたノードを検索し、そのValuePathをcontextKeyとしてWebサービスに渡す。
TreeViewコントロールには、選択されたノードという概念があります。子を持つ各ノードには、子ノードがあることを示す+記号のような選択アイコンが付きます。この+記号をクリックしても、ノードを「選択」したことにはならず、ノード間をナビゲーションしているだけと認識されます。ディレクトリ名をクリックすると、そのディレクトリが選択されます。SlideShowで画像が変更されるのはノードが選択されたときであり、ツリーのナビゲーションを行っているときではありません。
AJAX SlideShowの概要
AJAX SlideShowコントロールは、AJAXControlToolkit.dllに含まれるAJAXコントロールツールキットのメンバです。このコントロールは、Webのパスで示された場所の画像を表示します。そのため、SlideShowコントロールはスライドショーサービスがどこにあるかを認識しなければなりません。このパラメータは、Webのパスとファイル名という形式でWeb.ConfigのSlideShowWebServiceLocationキーに格納されています。
SlideShowコントロールに関係するパラメータはいくつかありますが、その1つは、スライドショーで使用するスライドショーサービスの場所を指定するパラメータです。これは、Web.ConfigファイルのSlideShowDefaultLocationに格納されています。もう1つは、最初に読み込むファイルを指定するパラメータです。このパラメータを使用すると、スライドショーサービスがスライドの配列を作成している間に画像を表示できます。この値は、Web.ConfigのSlideShowDefaultLocationFirstPictureキーに格納されています。
画像を1つのディレクトリに格納している場合は、SlideShowのために必要なすべての値をコントロールのパラメータで設定できます。スクリプトやコードを追加する必要はありません。このアプリケーションではディレクトリを変更するため、一部のSlideShowパラメータを分離コードファイルで設定するようにします。
Webページの修正
default.aspxに、AJAX Script Managerを追加します。
<asp:ScriptManager ID="ScriptManager1" runat="server" />
このスクリプトマネージャは、AJAX Extensionsライブラリにあります。
次に、ツールボックスのナビゲーションタブからTreeControlを追加します。既定のコントロールは次のとおりです。
<asp:TreeView ID="TreeView1" runat="server"> </asp:TreeView>
これを次のように変更します。
<asp:TreeView ID="TreeView1" runat="server"
ExpandDepth=1
ShowExpandCollapse=true
OnSelectedNodeChanged="TreeView1_OnSelectedNodeChanged"
PathSeparator="|"
EnableViewState=true
SelectedNodeStyle-Font-Bold=true
SelectedNodeStyle-ForeColor=red
/>
最も重要なパラメータは、OnSelectedNodeChangedとPathSeparatorの2つです。OnSelectedNodeChangedは、スライドショーサービスを呼び出して新しいスライド配列を入手するためのパラメータです。PathSeparatorは、前述のとおりです。
Imageコントロールを追加します。SlideShowは、このコントロール内に画像を表示します。
<asp:Image ID="imgPhotos" runat="server" Height="300"
Style="width:auto; border:solid 1px #000000;" />
AJAXコントロールツールキットからSlideShow Extender（コントロール）を追加します。既定のコントロールは次のとおりです。
<cc1:SlideShowExtender ID="SlideShowExtender1" runat="server"> </cc1:SlideShowExtender>
これを次のように変更します。
<cc1:SlideShowExtender ID="SlideShowExtender1" runat="server"
TargetControlID="imgPhotos"
SlideShowServiceMethod="GetSlides"
SlideShowServicePath="/SlideService.asmx"
ContextKey="images/"
UseContextKey=true
AutoPlay="true"
NextButtonID="btnNext"
PlayButtonText="Play"
StopButtonText="Stop"
PreviousButtonID="btnPrev"
PlayButtonID="btnPlay"
Loop="true"
ImageTitleLabelID=lblTitle
ImageDescriptionLabelID=lblDescription
/>
TargetControlIdは、スライドショー画像を表示する場所を指定します。また、Prev（戻る）、Stop（停止）、およびNext（進む）機能を持つボタンや、画像のタイトル、説明も必要です。このアプリケーションでは、画像のタイトルにファイル名を表示し、画像の説明にファイルのパスを表示します（これはデバッグ用です）。さらにLabelClickthroughURLを使用して、TreeViewコントロールのナビゲーションをクエリ文字列からテストできるようにします（たとえば、ルート以外のノードへのリンクを電子メールで送信するなど）。
SlideShowの下部に、次のラベルコントロールを追加します。
<center><asp:Label ID="lblTitle" runat=server></asp:Label> </center><br /> <asp:Label ID="LabelTreeSelectedNode" runat=server></asp:Label><br /> <asp:Label ID="LabelClickthroughURL" runat=server></asp:Label><br /> <asp:Label ID="lblDescription" runat=server></asp:Label><br /> <center> <asp:Button ID="btnPrev" Text="Prev" runat="server" /> <asp:Button ID="btnPlay" Text="Play" runat="server" /> <asp:Button ID="btnNext" Text="Next" runat="server" /> </center>
