ASP.NET 4 Unleased - p 110 pps

DataView view = new DataViewtreeViewData; view.RowFilter = “ParentID=” + parentTreeViewNode.Value; foreach DataRowView row in view { TreeNode newNode = new TreeNoderow[“Subject”].ToStrin

Trang 1

DataView view = new DataView(treeViewData);

view.RowFilter = “ParentID=” + parentTreeViewNode.Value;

foreach (DataRowView row in view)

{

TreeNode newNode = new TreeNode(row[“Subject”].ToString(),

row[“MessageId”].ToString());

parentTreeViewNode.ChildNodes.Add(newNode);

AddChildTreeViewNodes(treeViewData, newNode);

}

</script>

</style>

<title>TreeView Database</title>

</head>

<body>

<div>

<asp:TreeView

id=”TreeView1”

Runat=”server” />

</div>

</form>

</body>

</html>

The page in Listing 22.26 filters the contents of the Discuss database table by its ParentID

column First, the top-level nodes are added to the TreeView Next, the child nodes are

recursively added to the TreeView with the help of the AddChildTreeViewNodes() method

Using Populate On Demand and AJAX

You can use the TreeView control even when working with a large set of data For

example, the Microsoft MSDN website (msdn.Microsoft.com) has links to thousands of

articles This website uses a tree view to display the nested links to the articles

Because thousands of articles are hosted at the MSDN website, not all the tree nodes are

downloaded to the browser when you open a page Instead, additional nodes are

down-loaded to your browser only when you expand a particular node

Trang 2

You can use a feature named Populate On Demand with the TreeView control When you

enable the PopulateOnDemand property for a Tree node, child nodes are not added to the

parent node until the parent node is expanded

For example, the page in Listing 22.27 contains an infinitely expanding TreeView Each

time you expand a Tree node, five new child nodes display Each time you expand a child

node, five more child nodes display, and so on (see Figure 22.20)

FIGURE 22.20 An infinitely expanding TreeView control

LISTING 22.27 TreeViewPopulateOnDemand.aspx

<%@ Page Language=”C#” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

void TreeView1_TreeNodePopulate(object s, TreeNodeEventArgs e)

{

for (int i=0;i<5;i++)

{

TreeNode newNode = new TreeNode();

newNode.Text = String.Format(“{0}.{1}”, e.Node.Text, i);

newNode.PopulateOnDemand = true;

e.Node.ChildNodes.Add(newNode);

}

Trang 3

}

</script>

<title>TreeView Populate On Demand</title>

</head>

<body>

<div>

<%=DateTime.Now.ToString(“T”) %>

<hr />

<asp:TreeView

ID=”TreeView1”

ExpandDepth=”0”

OnTreeNodePopulate=”TreeView1_TreeNodePopulate”

Runat=”server”>

<Nodes>

<asp:TreeNode

PopulateOnDemand=”true”

Text=”Node 0” />

</Nodes>

</asp:TreeView>

</div>

</form>

</body>

</html>

The TreeView in Listing 22.27 includes a single statically declared TreeNode This TreeNode

includes a PopulateOnDemand property set to the value True

Additionally, the TreeView control itself includes a TreeNodePopulate event handler

When you expand a TreeNode that has its PopulateOnDemand property enabled, the

TreeNodePopulate event handler executes In the case of Listing 22.27, the event handler

adds five new TreeNodes to the TreeNode that was expanded

When you use the Populate On Demand feature, the page containing the TreeView is not

posted back to the server when you expand a TreeNode Instead, the browser uses AJAX

(Asynchronous JavaScript and XML) to communicate with the web server The additional

TreeNodes are retrieved from the server, without performing a postback

The page in Listing 22.27 displays the current time when you open the page The time is

not updated when you expand a particular TreeNode The time is not updated because the

Trang 4

only content in the page that is updated when you expand a node is the TreeView

content AJAX can have a dramatic impact on performance because it does not require the

entire page to be re-rendered each time you expand a TreeNode

NOTE

If, for some reason, you don’t want to use AJAX with Populate On Demand, you can

assign the value False to the TreeView control’s PopulateNodesFromClient property

The page in Listing 22.28 contains a more realistic sample of using Populate On Demand

and AJAX This page uses a TreeView control to display the contents of the Discuss

data-base table (see Figure 22.21)

FIGURE 22.21 Displaying database data with AJAX

LISTING 22.28 TreeViewAJAX.aspx

<%@ Import Namespace=”System.Web.Configuration” %>

<%@ Import Namespace=”System.Data” %>

<%@ Import Namespace=”System.Data.SqlClient” %>

Trang 5

/// <summary>

/// Only populate the TreeView when the page first loads

/// </summary>

void Page_Load()

{

if (!Page.IsPostBack)

PopulateTopNodes();

}

/// <summary>

/// Get the top level nodes (nodes with a null ParentId)

/// </summary>

private void PopulateTopNodes()

{

string selectCommand = “SELECT MessageId,ParentId,Subject FROM Discuss

WHERE ParentId IS NULL”;

string conString =

WebConfigurationManager.ConnectionStrings[“Discuss”].ConnectionString;

SqlDataAdapter dad = new SqlDataAdapter(selectCommand, conString);

DataTable dtblMessages = new DataTable();

dad.Fill(dtblMessages);

foreach (DataRow row in dtblMessages.Rows)

{

TreeView1.Nodes.Add(newNode);

}

/// <summary>

/// Get the child nodes of the expanded node

/// </summary>

protected void TreeView1_TreeNodePopulate(object sender, TreeNodeEventArgs e)

{

string selectCommand = “SELECT MessageId,ParentId,Subject FROM Discuss

WHERE ParentId=@ParentId”;

string conString =

WebConfigurationManager.ConnectionStrings[“Discuss”].ConnectionString;

SqlDataAdapter dad = new SqlDataAdapter(selectCommand, conString);

dad.SelectCommand.Parameters.AddWithValue(“@ParentId”, e.Node.Value);

DataTable dtblMessages = new DataTable();

dad.Fill(dtblMessages);

Trang 6

foreach (DataRow row in dtblMessages.Rows)

{

e.Node.ChildNodes.Add(newNode);

}

</script>

</style>

<title>TreeView AJAX</title>

</head>

<body>

<div>

<%= DateTime.Now.ToString(“T”) %>

<hr />

<asp:TreeView

id=”TreeView1”

ExpandDepth=”0”

OnTreeNodePopulate=”TreeView1_TreeNodePopulate”

Runat=”server” />

</div>

</form>

</body>

</html>

When the page in Listing 22.28 first opens, only the first-level message subjects display

These messages are retrieved by the PopulateTopNodes() method

When you expand a thread, the matching replies are retrieved for the thread These replies

are retrieved in the TreeView1_TreeNodePopulate() event handler

The TreeView in Listing 22.28 performs well even when working with a large set of data

At any time, only the child messages of a message are retrieved from the database At no

time are all the messages retrieved from the database

Trang 7

When the page is used with a modern browser, AJAX retrieves the messages from the web

server The page does not need to be posted back to the web server when you expand a

particular message thread

Formatting the TreeView Control

The TreeView control supports an abundance of properties that have an effect on how the

TreeView is formatted

Following are some of the more useful properties of a TreeView control, which modify its

appearance (this is not a complete list):

image

initially

image

to display when binding to a data source

node

image (typically, an invisible spacer image)

Possible values are All, Leaf, None, Parent, and Root

appear next to each expandable node

TreeView control (The Skip Link contains hidden text that is accessible only to users

of assistive devices.)

navi-gate to a URL with the control

Trang 8

The two most interesting properties in this list are the ImageSet and the ShowLines

prop-erties You can set the ImageSet property to any of the following values to modify the

images displayed by the TreeView control:

Arrows

BulletedList

BulletedList2

BulletedList3

BulletedList4

Contacts

Custom

Events

Faq

Inbox

Msdn

News

Simple

Simple2

WindowsHelp

XPFileExplorer

The ShowLines property causes connecting line images to be rendered between TreeView

nodes Displaying lines between Tree nodes can make it easier to visually discern the

nested relationships between nodes If you want to create custom lines, you can specify a

value for the LinesImagesFolder property

VISUAL WEB DEVELOPER NOTE

Visual Web Developer includes a TreeView Line Image Generator that enables you to

create custom connecting lines You can open this tool in Design view by selecting the

TreeView control and opening the Tasks dialog box and selecting Customize Line

Images

The page in Listing 22.29 illustrates how to use both the ImageSet and ShowLines

proper-ties (see Figure 22.22)

Trang 9

LISTING 22.29 TreeViewImageSet.aspx

<title>TreeView ImageSet</title>

</head>

<body>

<div>

<asp:TreeView

id=”TreeView1”

ImageSet=”XPFileExplorer”

ShowLines=”true”

Runat=”server”>

<Nodes>

<asp:TreeNode

Text=”Home”>

<asp:TreeNode Text=”Products”>

<asp:TreeNode Text=”First Product” />

FIGURE 22.22 Formatting a TreeView with an image set and lines

Trang 10

<asp:TreeNode Text=”Second Product” />

</asp:TreeNode>

<asp:TreeNode Text=”Services”>

<asp:TreeNode Text=”First Service” />

<asp:TreeNode Text=”Second Service” />

</asp:TreeNode>

</Nodes>

</asp:TreeView>

</div>

</form>

</body>

</html>

The TreeNode object itself also supports several properties that have an effect on the

appearance of its containing TreeView Following is a list of the most useful properties of

the TreeNode object:

node Possible values are Expand, None, Select, or SelectExpand

navi-gate to a URL

You can style the TreeView control by attaching Cascading Style Sheet classes to the Style

object exposed by the TreeView control The TreeView control supports the following

Style objects:

Định dạng
Số trang	10
Dung lượng	566,13 KB