TreeView.PopulateNodesFromClient TreeView.PopulateNodesFromClient TreeView.PopulateNodesFromClient TreeView.PopulateNodesFromClient Property

定義

クライアントからの要求に応じてノードにデータを設定するかどうかを示す値を取得または設定します。Gets or sets a value indicating whether node data is populated on demand from the client.

public:
 property bool PopulateNodesFromClient { bool get(); void set(bool value); };
public bool PopulateNodesFromClient { get; set; }
member this.PopulateNodesFromClient : bool with get, set
Public Property PopulateNodesFromClient As Boolean

プロパティ値

クライアントからの要求に応じてツリー ノード データを設定する場合は true。それ以外の場合は falsetrue to populate tree node data on demand from the client; otherwise, false. 既定値は、true です。The default is true.

次のコード例は、 PopulateNodesFromClientプロパティを使用して、 TreeViewコントロール内のノードをクライアント側で作成できるようにする方法を示しています。The following code example demonstrates how to use the PopulateNodesFromClient property to enable client-side population of the nodes in the TreeView control. クライアント側のノードの作成が有効になっていると、ノードがクライアントに動的に設定され、サーバーにポストバックする必要がなくなります。Notice that when client-side node population is enabled, nodes are populated dynamically on the client, without the need to post back to the server.


<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

  void PopulateNode(Object sender, TreeNodeEventArgs e)
  {

    // Call the appropriate method to populate a node at a particular level.
    switch(e.Node.Depth)
    {
      case 0:
        // Populate the first-level nodes.
        PopulateCategories(e.Node);
        break;
      case 1:
        // Populate the second-level nodes.
        PopulateProducts(e.Node);
        break;
      default:
        // Do nothing.
        break;
    }
    
  }

  void PopulateCategories(TreeNode node)
  {
    
    // Query for the product categories. These are the values
    // for the second-level nodes.
    DataSet ResultSet = RunQuery("Select CategoryID, CategoryName From Categories");

    // Create the second-level nodes.
    if(ResultSet.Tables.Count > 0)
    {
    
      // Iterate through and create a new node for each row in the query results.
      // Notice that the query results are stored in the table of the DataSet.
      foreach (DataRow row in ResultSet.Tables[0].Rows)
      {
        
        // Create the new node. Notice that the CategoryId is stored in the Value property 
        // of the node. This will make querying for items in a specific category easier when
        // the third-level nodes are created. 
        TreeNode newNode = new TreeNode();
        newNode.Text = row["CategoryName"].ToString(); 
        newNode.Value = row["CategoryID"].ToString();        

        // Set the PopulateOnDemand property to true so that the child nodes can be 
        // dynamically populated.
        newNode.PopulateOnDemand = true;
        
        // Set additional properties for the node.
        newNode.SelectAction = TreeNodeSelectAction.Expand;
        
        // Add the new node to the ChildNodes collection of the parent node.
        node.ChildNodes.Add(newNode);
        
      }
      
    }
    
  }

  void PopulateProducts(TreeNode node)
  {

    // Query for the products of the current category. These are the values
    // for the third-level nodes.
    DataSet ResultSet = RunQuery("Select ProductName From Products Where CategoryID=" + node.Value);

    // Create the third-level nodes.
    if(ResultSet.Tables.Count > 0)
    {
    
      // Iterate through and create a new node for each row in the query results.
      // Notice that the query results are stored in the table of the DataSet.
      foreach (DataRow row in ResultSet.Tables[0].Rows)
      {
      
        // Create the new node.
        TreeNode NewNode = new TreeNode(row["ProductName"].ToString());
        
        // Set the PopulateOnDemand property to false, because these are leaf nodes and
        // do not need to be populated.
        NewNode.PopulateOnDemand = false;
        
        // Set additional properties for the node.
        NewNode.SelectAction = TreeNodeSelectAction.None;
        
        // Add the new node to the ChildNodes collection of the parent node.
        node.ChildNodes.Add(NewNode);
        
      }
      
    }

  }

  DataSet RunQuery(String QueryString)
  {

    // Declare the connection string. This example uses Microsoft SQL Server 
    // and connects to the Northwind sample database.
    String ConnectionString = "server=localhost;database=NorthWind;Integrated Security=SSPI"; 

    SqlConnection DBConnection = new SqlConnection(ConnectionString);
    SqlDataAdapter DBAdapter;
    DataSet ResultsDataSet = new DataSet();

    try
    {

      // Run the query and create a DataSet.
      DBAdapter = new SqlDataAdapter(QueryString, DBConnection);
      DBAdapter.Fill(ResultsDataSet);

      // Close the database connection.
      DBConnection.Close();

    }
    catch(Exception ex)
    {

      // Close the database connection if it is still open.
      if(DBConnection.State == ConnectionState.Open)
      {
        DBConnection.Close();
      }
      
      Message.Text = "Unable to connect to the database.";

    }

    return ResultsDataSet;

  }

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
  <head runat="server">
    <title>TreeView PopulateNodesFromClient Example</title>
</head>
<body>
    <form id="form1" runat="server">
    
      <h3>TreeView PopulateNodesFromClient Example</h3>
    
      <asp:TreeView id="LinksTreeView"
        Font-Names= "Arial"
        ForeColor="Blue"
        EnableClientScript="true"
        PopulateNodesFromClient="true"  
        OnTreeNodePopulate="PopulateNode"
        runat="server">
         
        <Nodes>
        
          <asp:TreeNode Text="Inventory" 
            SelectAction="Expand"  
            PopulateOnDemand="true"/>
        
        </Nodes>
        
      </asp:TreeView>
      
      <br /><br />
      
      <asp:Label id="Message" runat="server"/>

    </form>
  </body>
</html>


<%@ Page Language="VB" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

  Sub PopulateNode(ByVal sender As Object, ByVal e As TreeNodeEventArgs)

    ' Call the appropriate method to populate a node at a particular level.
    Select Case e.Node.Depth

      Case 0
        ' Populate the first-level nodes.
        PopulateCategories(e.Node)

      Case 1
        ' Populate the second-level nodes.
        PopulateProducts(e.Node)

      Case Else
        ' Do nothing.

    End Select

  End Sub

  Sub PopulateCategories(ByVal node As TreeNode)

    ' Query for the product categories. These are the values
    ' for the second-level nodes.
    Dim ResultSet As DataSet = RunQuery("Select CategoryID, CategoryName From Categories")

    ' Create the second-level nodes.
    If ResultSet.Tables.Count > 0 Then

      ' Iterate through and create a new node for each row in the query results.
      ' Notice that the query results are stored in the table of the DataSet.
      Dim row As DataRow

      For Each row In ResultSet.Tables(0).Rows

        ' Create the new node. Notice that the CategoryId is stored in the Value property 
        ' of the node. This will make querying for items in a specific category easier when
        ' the third-level nodes are created. 
        Dim newNode As TreeNode = New TreeNode()
        Newnode.Text = row("CategoryName").ToString() 
        Newnode.Value = row("CategoryID").ToString()

        ' Set the PopulateOnDemand property to true so that the child nodes can be 
        ' dynamically populated.
        newNode.PopulateOnDemand = True

        ' Set additional properties for the node.
        newNode.SelectAction = TreeNodeSelectAction.Expand

        ' Add the new node to the ChildNodes collection of the parent node.
        node.ChildNodes.Add(newNode)

      Next

    End If

  End Sub

  Sub PopulateProducts(ByVal node As TreeNode)

    ' Query for the products of the current category. These are the values
    ' for the third-level nodes.
    Dim ResultSet As DataSet = RunQuery("Select ProductName From Products Where CategoryID=" & node.Value)

    ' Create the third-level nodes.
    If ResultSet.Tables.Count > 0 Then

      ' Iterate through and create a new node for each row in the query results.
      ' Notice that the query results are stored in the table of the DataSet.
      Dim row As DataRow

      For Each row In ResultSet.Tables(0).Rows

        ' Create the new node.
        Dim NewNode As TreeNode = New TreeNode(row("ProductName").ToString())

        ' Set the PopulateOnDemand property to false, because these are leaf nodes and
        ' do not need to be populated.
        NewNode.PopulateOnDemand = False

        ' Set additional properties for the node.
        NewNode.SelectAction = TreeNodeSelectAction.None

        ' Add the new node to the ChildNodes collection of the parent node.
        node.ChildNodes.Add(NewNode)

      Next

    End If

  End Sub

  Function RunQuery(ByVal QueryString As String) As DataSet

    ' Declare the connection string. This example uses Microsoft SQL Server 
    ' and connects to the Northwind sample database.
    Dim ConnectionString As String = "server=localhost;database=NorthWind;Integrated Security=SSPI"

    Dim DBConnection As SqlConnection = New SqlConnection(ConnectionString)
    Dim DBAdapter As SqlDataAdapter
    Dim ResultsDataSet As DataSet = New DataSet

    Try

      ' Run the query and create a DataSet.
      DBAdapter = New SqlDataAdapter(QueryString, DBConnection)
      DBAdapter.Fill(ResultsDataSet)

      ' Close the database connection.
      DBConnection.Close()

    Catch ex As Exception

      ' Close the database connection if it is still open.
      If DBConnection.State = ConnectionState.Open Then

        DBConnection.Close()

      End If

      Message.Text = "Unable to connect to the database."

    End Try

    Return ResultsDataSet

  End Function

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
  <head runat="server">
    <title>TreeView PopulateNodesFromClient Example</title>
</head>
<body>
    <form id="form1" runat="server">
    
      <h3>TreeView PopulateNodesFromClient Example</h3>
    
      <asp:TreeView id="LinksTreeView"
        Font-Names= "Arial"
        ForeColor="Blue"
        EnableClientScript="true"
        PopulateNodesFromClient="true"  
        OnTreeNodePopulate="PopulateNode"
        runat="server">
         
        <Nodes>
        
          <asp:TreeNode Text="Inventory" 
            SelectAction="Expand"  
            PopulateOnDemand="true"/>
        
        </Nodes>
        
      </asp:TreeView>
      
      <br /><br />
      
      <asp:Label id="Message" runat="server"/>

    </form>
  </body>
</html>

注釈

場合によっては、ユーザー入力に依存するデータサイズやカスタムコンテンツによってツリー構造を静的に定義するのは現実的ではありません。Sometimes, it is not practical to statically predefine the tree structure due to data size or custom content that depends on user input. このため、コントロールはTreeView動的なノードの作成をサポートしています。Because of this, the TreeView control supports dynamic node population. trueノードのPopulateOnDemandプロパティをに設定すると、ノードが展開されるときに、実行時にそのノードが設定されます。When the PopulateOnDemand property for a node is set to true, that node gets populated at run time when the node is expanded.

必要に応じてノードを設定できるだけでなく、サポートされているクライアントブラウザーでノードを直接設定することもできます。In addition to populating nodes on demand, it is possible to populate the nodes directly on a supported client browser. プロパティがにtrue設定されている場合は、サービスがクライアントから呼び出され、ツリーノードが設定されます。これにより、サーバーにポストバックする必要がなくなります。 PopulateNodesFromClientWhen the PopulateNodesFromClient property is set to true, a service is called from the client to populate the tree nodes, which eliminates the need to post back to the server. それ以外のTreeView場合、コントロールはサーバーにポストバックしてノードにデータを設定します。Otherwise, the TreeView control posts back to the server to populate the nodes.

注意

プロパティEnableClientScriptをに設定true するにPopulateNodesFromClientは、プロパティもに設定する必要があります。trueThe EnableClientScript property must also be set to true in order for the PopulateNodesFromClient property to be set to true.

クライアント上のノードを設定するには、まずPopulateNodesFromClientプロパティをtrueに設定してPopulateOnDemandから、ノードのプロパティtrueをに設定します。To populate a node on the client, first set the PopulateNodesFromClient property to true and then set the PopulateOnDemand property for the node to true. 次に、プログラムを使用してノードをTreeNodePopulate設定するイベントのイベント処理メソッドを定義します。Next, define an event-handling method for the TreeNodePopulate event that programmatically populates the node. 一般的なイベント処理メソッドは、データソースからノードデータを取得し、データをノード構造に配置した後、作成されるノードChildNodesのコレクションにノード構造を追加します。A typical event-handling method retrieves node data from a data source, places the data into a node structure, and then adds the node structure to the ChildNodes collection of the node being populated. ノード構造を作成するにはTreeNode 、親ノードChildNodesのコレクションにオブジェクトを追加します。You create a node structure by adding TreeNode objects to the ChildNodes collection of a parent node.

注意

trueノードのPopulateOnDemandプロパティがに設定されている場合は、ノードを動的に設定する必要があります。When the PopulateOnDemand property for a node is set to true, the node must be populated dynamically. その下にある別のノードを宣言によって入れ子にすることはできません。それ以外の場合は、ページでエラーが発生します。You cannot declaratively nest another node below it; otherwise, an error will occur on the page.

注意

クライアント側のノードの作成機能は、コールバックスクリプトをサポートするブラウザーでサポートされています。The client-side node population feature is supported in browsers that support callback scripts. ブラウザーがコールバックスクリプトへSupportsCallback HttpBrowserCapabilitiesのアクセスをサポートしているかどうかを確認するには、クラスのプロパティを使用します。To check whether a browser supports callback scripts access, use the SupportsCallback property of the HttpBrowserCapabilities class. クラスのHttpBrowserCapabilities Browserプロパティを使用して、現在の要求に対するクラスのインスタンスにアクセスできます。HttpRequestYou can access the instance of the HttpBrowserCapabilities class for the current request through the Browser property of the HttpRequest class.

このプロパティの値は、ビューステートに格納されます。The value of this property is stored in view state.

適用対象

こちらもご覧ください