ASP.NET 4 Unleased - p 111 ppsx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (567.92 KB, 10 trang )
ptg
1074
CHAPTER 22 Using the Navigation Controls
. RootNodeStyle—Applied to root nodes (Tree nodes with no parent nodes).
. SelectedNodeStyle—Applied to the selected node.
For example, the page in Listing 22.30 uses several of these Style objects to format a
TreeView control (see Figure 22.23).
FIGURE 22.23 Using Styles with the TreeView control.
LISTING 22.30 TreeViewStyles.aspx
<%@ Page Language=”C#” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“
<html xmlns=” >
<head id=”Head1” runat=”server”>
<style type=”text/css”>
.treeNode
{
color:blue;
font:14px Arial, Sans-Serif;
}
.rootNode
{
font-size:18px;
width:100%;
border-bottom:Solid 1px black;
From the Library of Wow! eBook
ptg
1075
Using the TreeView Control
22
}
.leafNode
{
border:Dotted 2px black;
padding:4px;
background-color:#eeeeee;
font-weight:bold;
}
</style>
<title>TreeView Styles</title>
</head>
<body>
<form id=”form1” runat=”server”>
<div>
<asp:TreeView
id=”TreeView1”
NodeStyle-CssClass=”treeNode”
RootNodeStyle-CssClass=”rootNode”
LeafNodeStyle-CssClass=”leafNode”
Runat=”server”>
<Nodes>
<asp:TreeNode
Text=”Home”>
<asp:TreeNode Text=”Products”>
<asp:TreeNode Text=”First Product” />
<asp:TreeNode Text=”Second Product” />
</asp:TreeNode>
<asp:TreeNode Text=”Services”>
<asp:TreeNode Text=”First Service” />
<asp:TreeNode Text=”Second Service” />
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</div>
</form>
</body>
</html>
Furthermore, you can apply styles to particular Tree node levels by taking advantage of the
TreeView control’s LevelStyles property. The page in Listing 22.31 uses the LevelStyles
property to format first level nodes differently than second level nodes and third level
nodes (see Figure 22.24).
From the Library of Wow! eBook
ptg
1076
CHAPTER 22 Using the Navigation Controls
LISTING 22.31 TreeViewLevelStyles.aspx
<%@ Page Language=”C#” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“
<html xmlns=” >
<head id=”Head1” runat=”server”>
<style type=”text/css”>
.nodeLevel1
{
font:40px Arial,Sans-Serif;
}
.nodeLevel2
{
font:20px Arial,Sans-Serif;
}
.nodeLevel3
{
font:10px Arial,Sans-Serif;
}
</style>
<title>TreeView Level Styles</title>
</head>
<body>
FIGURE 22.24 Applying styles to different TreeView node levels.
From the Library of Wow! eBook
ptg
1077
Building a SQL Hierarchical Data Source Control
22
<form id=”form1” runat=”server”>
<div>
<asp:TreeView
id=”TreeView1”
Runat=”server”>
<LevelStyles>
<asp:TreeNodeStyle CssClass=”nodeLevel1” />
<asp:TreeNodeStyle CssClass=”nodeLevel2” />
<asp:TreeNodeStyle CssClass=”nodeLevel3” />
</LevelStyles>
<Nodes>
<asp:TreeNode
Text=”Home”>
<asp:TreeNode Text=”Products”>
<asp:TreeNode Text=”First Product” />
<asp:TreeNode Text=”Second Product” />
</asp:TreeNode>
<asp:TreeNode Text=”Services”>
<asp:TreeNode Text=”First Service” />
<asp:TreeNode Text=”Second Service” />
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</div>
</form>
</body>
</html>
Building a SQL Hierarchical Data Source Control
In this final section of this chapter, we build a SqlHierarchicalDataSource control. This
custom control enables you to declaratively and (thus) easily bind controls such as the
Menu and TreeView controls to data retrieved from a database.
NOTE
The code samples in this section can be found in the SqlHierarchicalDataSourceVB
and SqlHierarchicalDataSourceCS applications in the accompanying source code on
the book’s website.
From the Library of Wow! eBook
ptg
1078
CHAPTER 22 Using the Navigation Controls
The page in Listing 22.32 illustrates how you can use the SqlHierarchicalDataSource
control to bind a Menu control to a database table that contains nested categories.
LISTING 22.32 ShowMenu.aspx
<%@ Page Language=”C#” %>
<%@ Register TagPrefix=”custom” Namespace=”AspNetUnleashed” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“
<script runat=”server”>
protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
{
lblSelected.Text = Menu1.SelectedValue;
}
</script>
<html xmlns=” >
<head id=”Head1” runat=”server”>
<style type=”text/css”>
.menu
{
border:solid 1px black;
padding:4px;
}
</style>
<title>Show Menu</title>
</head>
<body>
<form id=”form1” runat=”server”>
<div>
<asp:Menu
id=”Menu1”
DataSourceId=”srcCategories”
OnMenuItemClick=”Menu1_MenuItemClick”
Orientation=”Horizontal”
DynamicMenuStyle-CssClass=”menu”
Runat=”server”>
<DataBindings>
<asp:MenuItemBinding TextField=”Name” ValueField=”Name” />
</DataBindings>
</asp:Menu>
<custom:SqlHierarchicalDataSource
id=”srcCategories”
ConnectionString=’<%$ ConnectionStrings:Categories %>’
From the Library of Wow! eBook
ptg
1079
Building a SQL Hierarchical Data Source Control
22
DataKeyName=”CategoryId”
DataParentKeyName=”ParentId”
SelectCommand=”SELECT CategoryId, ParentId, Name FROM Categories”
Runat=”server” />
<hr />
<asp:Label
id=”lblSelected”
Runat=”server” />
</div>
</form>
</body>
</html>
When you open the page in Listing 22.32, all the rows from the Categories table display
in the Menu control.
The SqlHierarchicalDataSource control includes two properties: DataKeyName and
DataParentKeyName. The DataKeyName property represents the name of a database column
that contains a unique value for each database table row. The DataParentKeyName column
represents the name of a database column that relates each row to its parent row.
Furthermore, the Menu control includes a MenuItemBinding, which associates the database
Name column with the Menu item Text property and the Name column with the Menu
item Value property.
You also can use the SqlHierarchicalDataSource control when working with the
TreeView control. The page in Listing 22.33 displays all the rows from the Discuss data-
base table in a TreeView control.
LISTING 22.33 ShowTreeView.aspx
<%@ Page Language=”C#” %>
<%@ Register TagPrefix=”custom” Namespace=”AspNetUnleashed” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“
<script runat=”server”>
protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e)
{
lblSelected.Text = TreeView1.SelectedValue;
}
</script>
<html xmlns=” >
<head id=”Head1” runat=”server”>
From the Library of Wow! eBook
ptg
1080
CHAPTER 22 Using the Navigation Controls
<title>Show TreeView</title>
</head>
<body>
<form id=”form1” runat=”server”>
<div>
<asp:TreeView
id=”TreeView1”
DataSourceID=”srcDiscuss”
OnSelectedNodeChanged=”TreeView1_SelectedNodeChanged”
ImageSet=”News”
Runat=”server”>
<DataBindings>
<asp:TreeNodeBinding
TextField=”Subject”
ValueField=”MessageId” />
</DataBindings>
</asp:TreeView>
<custom:SqlHierarchicalDataSource
id=”srcDiscuss”
ConnectionString=’<%$ ConnectionStrings:Discuss %>’
DataKeyName=”MessageId”
DataParentKeyName=”ParentId”
SelectCommand=”SELECT MessageId,ParentId,Subject FROM Discuss”
Runat=”server” />
<hr />
You selected message number:
<asp:Label
id=”lblSelected”
Runat=”server” />
</div>
</form>
</body>
</html>
When you open the page in Listing 22.33, the contents of the Discuss database table
display in the TreeView control.
All the code for the SqlHierarchicalDataSource control is included on the book’s website.
The control is composed out of five separate classes:
From the Library of Wow! eBook
ptg
1081
Summary
22
. SqlHierarchicalDataSource—Represents the actual control. It inherits from the base
SqlDataSource control and implements the IHierarchicalDataSource interface.
. SqlHierarchicalDataSourceView—Represents the hierarchical data returned by the
control. It inherits from the base HierarchicalDataSourceView class.
. SqlHierarchicalEnumerable—Represents a collection of SqlNodes.
. SqlNode—Represents a particular database row from the data source. It includes
methods for retrieving child and parent rows.
. SqlNodePropertyDescriptor—Inherits from the base PropertyDescriptor class. It
converts the database columns represented by a SqlNode into class properties so that
you can bind to the columns using TreeView and Menu control DataBindings.
Summary
In this chapter, you learned how to use the SiteMapPath, Menu, and TreeView controls.
First, you learned how to use the SiteMapPath control to display a breadcrumb trail. You
learned how to format the SiteMapPath control with styles and templates.
Next, you explored the Menu control. You learned how to create both vertical and horizon-
tal menus. You also learned how you can bind a Menu control to different data sources
such as Site Maps, XML documents, and database data.
The TreeView control was also discussed. You learned how to display check boxes with a
TreeView control. You also learned how to bind a TreeView control to different data
sources such as Site Maps, XML documents, and database data. You learned how to display
a large set of Tree nodes efficiently by using AJAX and the TreeView control.
Finally, we created a custom SqlHierarchicalDataSource control that enables you to
easily bind controls such as the Menu and TreeView controls to hierarchical database data.
From the Library of Wow! eBook
ptg
This page intentionally left blank
From the Library of Wow! eBook
ptg
CHAPTER 23
Using Site Maps
IN THIS CHAPTER
. Using the SiteMapDataSource
Control
. Using the SiteMap Class
. Advanced Site Map
Configuration
. Creating Custom Site Map
Providers
. Generating a Google SiteMap
File
. Summary
This chapter jumps into the details of Site Maps. First, you
learn how to use the SiteMapDataSource control to repre-
sent a Site Map on a page. For example, you learn how to
use the SiteMapDataSource control to display a list of all
the pages contained in a folder.
Next, you explore the SiteMap and SiteMapNode classes. You
learn how to create new Site Map nodes dynamically. You
also learn how to programmatically retrieve Site Map nodes
and display the properties of a node in a page.
This chapter also examines several advanced features of Site
Maps. For example, you learn how to show different Site
Maps to different users depending on their roles. You also
learn how you can extend Site Maps with custom attributes.
You also learn how to create custom Site Map providers.
The first custom Site Map provider—the
AutoSiteMapProvider—automatically builds a Site Map
based on the folder and page structure of your website.
The second custom Site Map provider—the
SqlSiteMapProvider—enables you to store a Site Map in a
Microsoft SQL Server database table.
Finally, you learn how to generate Google SiteMaps from
ASP.NET Site Maps automatically. You can use a Google
SiteMap to improve the way that your website is indexed
by the Google search engine.
From the Library of Wow! eBook
