AJAX SlideShowおよびTreeViewコントロールを使用してスライドショーを作成する

データベースの代わりにファイルシステムを使ったスライドショー

Default.aspx.cs

　分離コードファイルの主な役割は、TreeViewコントロールへのデータの設定、正しいノードの検索、およびノードの選択の処理です。

　ファイルおよびディレクトリの管理のために、次のライブラリをdefault.aspxに追加します。

    using System.IO;

　default.aspx.csの中核となるのはPage_Load関数とTreeView1_OnSelectedNodeChanged関数です。これ以外の関数については簡単にしか触れないので、詳細はダウンロードサンプルを参照してください。

　Page_Load関数は次のとおりです。

protected void Page_Load(object sender, EventArgs e)
{
    GetWebConfigSettings();
    VerifyDirectoriesAndFiles();

    // SET first image
    imgPhotos.ImageUrl = _slideShowDefaultLocation
                       + _slideShowDefaultLocationFirstPicture;
    imgPhotos.AlternateText = _slideShowDefaultLocation 
                            + _slideShowDefaultLocationFirstPicture;

    // set web service path
    SlideShowExtender1.SlideShowServicePath
        = _slideShowWebServiceLocation;
    SlideShowExtender1.ContextKey = _slideShowDefaultLocation;

    // don't add copy of tree to tree on postback
    if (TreeView1.Nodes.Count == 0)
        PopulateTree();


    // Set From QueryString or ViewState
    if ((!String.IsNullOrEmpty(_currentTreePathQueryStringName)) 
       && ((Request[_currentTreePathQueryStringName] != null) 
       || (ViewState[_currentTreePathQueryStringName] != null)))
            SelectNodeBasedOnQueryStringOrViewState();
    // else assume first time to page
    else
    {
        // first time to page
        if (!String.IsNullOrEmpty(_slideShowDefaultLocation))
        {
            ExpandTreePathByDirPath();
        }
    }

    // set labels so that selected info is visible on page
    //LabelTreeSelectedNode.Text = 
    //"<b>SlideShowExtender1.ContextKey:</b>" 
    //+ SlideShowExtender1.ContextKey;
    if (String.IsNullOrEmpty(LabelClickthroughURL.Text))
    {
        LabelClickthroughURL.Text
           = "<a href='mailto:?subject=Picture SlideShow from the 
             Berrys&Body=" + HttpContext.Current.Request.Url + "?" 
           + _currentTreePathQueryStringName + "=" 
           + Server.UrlEncode(_slideShowDefaultLocation) 
           + "'>Send link to this page by email</a><br>";
        }
    }

　最初の2行では、Web.Configからディレクトリ情報と画像情報を取得し、それが実際に存在するかどうかを確認します。

　次の2行では、SlideShowで使用する最初の画像を取得します。この画像は、スライドショーサービスが呼び出されて処理されている間に表示されます。「please wait...」という画像を使用してもかまいませんし、画像を何も表示しないという方法もあります。次の行では、スライドのリストを取得するために使用するサービスの場所をSlideShowに認識させます。

　続く数行では、TreeViewコントロールにまだデータが割り当てられていない場合に限り、割り当てを行います。これはポストバックのために重要です。さらに、次のコードブロックでは、TreeViewコントロール内のどのノードを選択状態として設定する（赤で強調表示する）かをViewStateまたはQueryStringに基づいて決定します。この機能は、たとえばURLを他のユーザーに送信し、そのユーザーがリンクをクリックしたときにTreeViewで内部ノードから読み込みを行いたい場合などに役立ちます。最後の行では、デバッグ用として、現在のコンテキストキーをページ上のラベルに表示します。

　TreeView1_OnSelectedNodeChanged関数は次のとおりです。

protected void TreeView1_OnSelectedNodeChanged(object sender, 
                                               EventArgs e)
{
    // DFB: Get Location of Node Selected used by TreeView 
    // to find a node
    _currentTreePath = TreeView1.SelectedNode.ValuePath;
    //lblDescription.Text = "<b>Selected ValuePath :</b>" 
    //+ _currentTreePath ;

    // DFB: Get Location of web Directory
    SlideShowExtender1.ContextKey = TreeView1.SelectedNode.Value;
    //LabelTreeSelectedNode.Text = "<b>SlideShowExtender1.ContextKey:
    //</b> " + SlideShowExtender1.ContextKey +
    // "<br><b>Server.MapPath(ContextKey)</b>:" 
    //+ Server.MapPath(SlideShowExtender1.ContextKey);

    // DFB: If Path is not empty, add it to state so we have it 
    //on postback
    if (!String.IsNullOrEmpty(_currentTreePath))
    {
        ViewState.Add(_currentTreePath, _currentTreePath);

        LabelClickthroughURL.Text
           = "<a href='mailto:?subject=Picture SlideShow from the 
             Berrys&Body=" + HttpContext.Current.Request.Url + "?" 
           + _currentTreePathQueryStringName + "=" 
           + Server.UrlEncode(_currentTreePath) 
           + "'>Send link to this page by email</a><br>";
    }
}

　この関数は、ディレクトリ名がクリックされたときに呼び出されます。ディレクトリ名の左側にある展開/折りたたみ記号がクリックされたときではありません。ディレクトリ名が選択されたら、Webサービスを通じてすべての有効な画像（Web.configに定義）を検出してSlideShowコントロールに読み込むか、画像「No Image Found」を読み込む必要があります。

　この関数の最初の2行では、ValuePathを取得してページ上のラベルに設定します。次の数行では、ディレクトリのValueを取得します。この値がSlide Serviceの新しいcontextKeyとなるので、これをページ上のラベルに設定します。次のコードブロックでは、選択されているValuePathをViewStateに追加し、そのValuePathを使用してリンクを作成します。このリンクを他のユーザーに送信すると、ユーザーがリンクをクリックしたときに、この現在のノードを表示している状態のSlideShowに戻ることができます。

　default.aspxとdefault.aspx.csへの記述が終わったら、Web.Configに作業用Webサービスと有効な値が設定されていることを確認します。

まとめ

　まずスライドショーサービスをビルドして、このサービスが有効な情報を返すことを確認します。関数シグネチャは厳密であるため、文字や大文字と小文字を変更しないでください。次に、ナビゲーション用のTreeViewと表示用のAJAX SlideShowを追加して、default.aspxと分離コードページをビルドします。