【オンラインギャラリー】TreeViewとDataListコントロールを使用してオンラインギャラリーを作成する
6619 ワード
ASP.Net 2.0にはTreeViewのような多くのWebコントロールが含まれています.階層を持つデータを表示するように設計されています.TreeViewは、XMLDataSourceやSiteMapDataSourceなどの階層データソースにバインドすることができ、もちろんプログラミングして構築することもできる.TreeViewでSiteMapDataSourceにバインドしてWebサイトの地図を表示する例については、シリーズ記事『Examining ASP.NET 2.0's Site Navigation』(http://aspnet.4guysfromrolla.com/articles/111605-1.aspx)
一般的な階層データはweb serverのファイルシステムfile systemである.多くの場合、私たちが閲覧する多くのファイルと二次フォルダが含まれているフォルダがあるかもしれません.名前空間を通してIOのクラスは、プログラムを通じてwebsiteのディレクトリシステムでTreeViewコントロールを埋め込むことができ、ユーザーがフォルダをクリックすると、そのフォルダの下のファイルが表示されます.
図1
本稿では、簡単な画像展示ページを作成する方法について考察する.2つのコントロールを使用します.TreeViewは、ファイルシステムを表示するために使用されます.DataListコントロールは、あるフォルダの画像を表示するために使用されます.
Displaying the TreeView
この例では、次の2つのセクションを作成します.
.TreeViewコントロール:指定したノードの下にあるフォルダをリストします.
.Data Webコントロール:選択したフォルダの下にあるファイルをリストします.本明細書では、DataListを使用するが、場合によってはGridView,DetailsView,FormView,Repeaterコントロールの方が良いかもしれない.
プログラミングを始めましょう対ASP.NET 2.0 TreeViewのデータは、「明示的」(XMLDataSourceまたはSiteMapDataSource)またはプログラミングによって付与することができる.リターンディレクトリ情報を内蔵コントロールは利用できないため、TreeViewにデータをプログラミングでバインドする必要がある.具体的には、あるルートディレクトリの情報を取得する必要があります.次はサブディレクトリです.含むフォルダに対してTreeViewにTreeNodeノードを追加する.
.NetFrameworkにはfileシステムを処理するための多くのクラスが含まれています.これらのクラスはSystemに含まれています.IOネーミングスペースに例えばクラスDirectoryInfoは、指定ディレクトリのサブディレクトリを返す方法(GetDirectories()を含む)、もちろん指定ディレクトリの下のすべてのファイルを返す方法(GetFiles()もある.
次のコードでは、あるルートディレクトリの下のファイル階層でPictureTreeというIDのTreeViewコントロールを埋め込み、ルートディレクトリは定数VirtualImageRootで指定する.コードで使用されるAddNodeAndDescentsメソッドによるファイルシステムの再帰操作(recurse)(再帰の詳細は、以前の記事『Recursion,Why It's Cool』(http://www.4guysfromrolla.com/Webtech/060299-2.shtml))
選択したフォルダのファイルを表示
TreeViewにファイルシステムを表示した後、残りは選択したフォルダのファイルを表示することです.このため、現在選択されているフォルダのファイルリストにバインドするdata Webコントロールをページに追加します.しかし、どのフォルダが選択されているか、ユーザーがいつ別のフォルダのファイルを表示したいかをどのように知ることができますか?
TreeViewにはselectedValueプロパティがあり、現在選択されているノードのvalueを返します.フォルダの相対パスを対応するノードのvalueに割り当てたことを覚えています.選択したフォルダのパスがある、フォルダ内のファイルリストを取得するには、DirectoryInfo objectオブジェクトを作成し、そのGetFiles()メソッドを使用します.このメソッドは、FileInfo objectsオブジェクトのセットを返し、data Webコントロールにバインドします(本明細書では、DataListコントロールを使用します).
TreeViewのノードをクリックすると、postbackが発生するTreeViewのSelectedNodeChanged eventイベントがトリガーされる.このとき、選択したフォルダのデータをdata Webコントロールに再バインドします.
上記機能は、以下のコードで実現することができる.DisplayPicturesInFolder(virtualFoldERPath)メソッドは、指定するフォルダ内のファイルを取得し、PicturesInFolderとしてIDを持つDataListコントロールにバインドする.一方、SelectedNodeChangedイベントプロセッサは、単にDisplayPicturesInFolder(virtualFolderPath)メソッドを呼び出し、選択ノードのvalue値を伝達する.
DisplayPicturesInfolder(virtualFoldERPath)メソッドの最初の行のコードは、まず、要求されたパスが定数VirtualImageRootで指定するルートディレクトリの下にあることを確認するチェックを行う.
PicturesInfolderとしてIDが付けられているDataListコントロールには、画像の名前(ファイル拡張子は含まれていません)を表示し、画像を表示するImage Webコントロールが含まれているItemTemplateテンプレートが1つしか含まれていません.
最終的な効果は簡単な画像管理プログラムです.TreeViewコントロールは、ファイルシステムのルートディレクトリの下にあるサブフォルダをリストし、特定のフォルダをクリックすると、その画像が右側に表示されます.Webサーバにimageファイルをアップロードしたり、編集したり、削除したりすると、このプログラムはすぐにこれらの変更を反映することができます!
図2
図3
一般的な階層データはweb serverのファイルシステムfile systemである.多くの場合、私たちが閲覧する多くのファイルと二次フォルダが含まれているフォルダがあるかもしれません.名前空間を通してIOのクラスは、プログラムを通じてwebsiteのディレクトリシステムでTreeViewコントロールを埋め込むことができ、ユーザーがフォルダをクリックすると、そのフォルダの下のファイルが表示されます.
図1
本稿では、簡単な画像展示ページを作成する方法について考察する.2つのコントロールを使用します.TreeViewは、ファイルシステムを表示するために使用されます.DataListコントロールは、あるフォルダの画像を表示するために使用されます.
Displaying the TreeView
この例では、次の2つのセクションを作成します.
.TreeViewコントロール:指定したノードの下にあるフォルダをリストします.
.Data Webコントロール:選択したフォルダの下にあるファイルをリストします.本明細書では、DataListを使用するが、場合によってはGridView,DetailsView,FormView,Repeaterコントロールの方が良いかもしれない.
プログラミングを始めましょう対ASP.NET 2.0 TreeViewのデータは、「明示的」(XMLDataSourceまたはSiteMapDataSource)またはプログラミングによって付与することができる.リターンディレクトリ情報を内蔵コントロールは利用できないため、TreeViewにデータをプログラミングでバインドする必要がある.具体的には、あるルートディレクトリの情報を取得する必要があります.次はサブディレクトリです.含むフォルダに対してTreeViewにTreeNodeノードを追加する.
.NetFrameworkにはfileシステムを処理するための多くのクラスが含まれています.これらのクラスはSystemに含まれています.IOネーミングスペースに例えばクラスDirectoryInfoは、指定ディレクトリのサブディレクトリを返す方法(GetDirectories()を含む)、もちろん指定ディレクトリの下のすべてのファイルを返す方法(GetFiles()もある.
次のコードでは、あるルートディレクトリの下のファイル階層でPictureTreeというIDのTreeViewコントロールを埋め込み、ルートディレクトリは定数VirtualImageRootで指定する.コードで使用されるAddNodeAndDescentsメソッドによるファイルシステムの再帰操作(recurse)(再帰の詳細は、以前の記事『Recursion,Why It's Cool』(http://www.4guysfromrolla.com/Webtech/060299-2.shtml))
Private Const VirtualImageRoot = "~/Images/Public/"
Private Sub PopulateTree()
'Populate the tree based on the subfolders of the specified VirtualImageRoot
Dim rootFolder As New DirectoryInfo(Server.MapPath(VirtualImageRoot))
Dim root As TreeNode = AddNodeAndDescendents(rootFolder, Nothing)
'Add the root to the TreeView
PictureTree.Nodes.Add(root)
End Sub
Private Function AddNodeAndDescendents(ByVal folder As DirectoryInfo, ByVal parentNode As
TreeNode) As TreeNode
'Add the TreeNode, displaying the folder's name and storing the full path to the folder as
the value...
Dim virtualFoldERPath As String
If parentNode Is Nothing Then
virtualFolderPath = VirtualImageRoot
Else
virtualFolderPath = parentNode.Value & folder.Name & "/"
End If
Dim node As New TreeNode(folder.Name, virtualFolderPath)
'Recurse through this folder's subfolders
Dim subFolders As DirectoryInfo() = folder.GetDirectories()
For Each subFolder As DirectoryInfo In subFolders
Dim child As TreeNode = AddNodeAndDescendents(subFolder, node)
node.ChildNodes.Add(child)
Next
Return node 'Return the new TreeNode
End Function display value hidden value . display value ； hidden value postbacks， . 2 TreeNode ——Dim node As New TreeNode(text, value). text ， value (virtual path). -/Images/Public/Picture1.jpg. ， (physical path)， C:MySitesImageGalleryImagesPublicPicture1.jpg. virtual paths physical paths virtual paths physical paths 《Using Server.MapPath》(http://www.4guysfromrolla.com/Webtech/121799-1.shtml) 選択したフォルダのファイルを表示
TreeViewにファイルシステムを表示した後、残りは選択したフォルダのファイルを表示することです.このため、現在選択されているフォルダのファイルリストにバインドするdata Webコントロールをページに追加します.しかし、どのフォルダが選択されているか、ユーザーがいつ別のフォルダのファイルを表示したいかをどのように知ることができますか?
TreeViewにはselectedValueプロパティがあり、現在選択されているノードのvalueを返します.フォルダの相対パスを対応するノードのvalueに割り当てたことを覚えています.選択したフォルダのパスがある、フォルダ内のファイルリストを取得するには、DirectoryInfo objectオブジェクトを作成し、そのGetFiles()メソッドを使用します.このメソッドは、FileInfo objectsオブジェクトのセットを返し、data Webコントロールにバインドします(本明細書では、DataListコントロールを使用します).
TreeViewのノードをクリックすると、postbackが発生するTreeViewのSelectedNodeChanged eventイベントがトリガーされる.このとき、選択したフォルダのデータをdata Webコントロールに再バインドします.
上記機能は、以下のコードで実現することができる.DisplayPicturesInFolder(virtualFoldERPath)メソッドは、指定するフォルダ内のファイルを取得し、PicturesInFolderとしてIDを持つDataListコントロールにバインドする.一方、SelectedNodeChangedイベントプロセッサは、単にDisplayPicturesInFolder(virtualFolderPath)メソッドを呼び出し、選択ノードのvalue値を伝達する.
Protected Sub PictureTree_SelectedNodeChanged(ByVal sender As Object, ByVal e As
System.EventArgs) Handles PictureTree.SelectedNodeChanged
'Refresh the DataList whenever a new node is selected
DisplayPicturesInFolder(PictureTree.SelectedValue)
End Sub
Private Sub DisplayPicturesInFolder(ByVal virtualFolderPath As String)
'Security check: make sure folderPath starts with VirtualImageRoot and doesn't include any
".."
If Not virtualFolderPath.StartsWith(VirtualImageRoot) OrElse virtualFolderPath.IndexOf("..")
>= 0 Then
Throw New ApplicationException("Attempting to view a folder outside of the public image
folder!")
End If
'Get information about the files in the specified folder
Dim folder As New DirectoryInfo(Server.MapPath(virtualFolderPath))
Dim fileList As FileInfo() = folder.GetFiles()
PicturesInFolder.DataSource = fileList
PicturesInFolder.DataBind()
End Sub ： DisplayPicturesInfolder(virtualFoldERPath)メソッドの最初の行のコードは、まず、要求されたパスが定数VirtualImageRootで指定するルートディレクトリの下にあることを確認するチェックを行う.
PicturesInfolderとしてIDが付けられているDataListコントロールには、画像の名前(ファイル拡張子は含まれていません)を表示し、画像を表示するImage Webコントロールが含まれているItemTemplateテンプレートが1つしか含まれていません.
<ASP:DataList ID="PicturesInFolder" runat="server" Width="100%" CellPadding="5">
<ItemTemplate>
<h3><asp:Label runat="server" ID="FileNameLabel" Text='<%#
System.IO.Path.GetFilenameWithoutExtension(Eval("Name")) %>'></asp:Label></h3>
<asp:Image runat="server" ID="Picture" ImageUrl='<%# PictureTree.SelectedValue & Eval
("Name").ToString() %>' />
<br /><br />
</ItemTemplate>
<AlternatingItemStyle BackColor="#E0E0E0" />
</asp:DataList> 最終的な効果は簡単な画像管理プログラムです.TreeViewコントロールは、ファイルシステムのルートディレクトリの下にあるサブフォルダをリストし、特定のフォルダをクリックすると、その画像が右側に表示されます.Webサーバにimageファイルをアップロードしたり、編集したり、削除したりすると、このプログラムはすぐにこれらの変更を反映することができます!
図2
図3