ASP.NET 4 Unleased - p 108 pot
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 (560.67 KB, 10 trang )
ptg
1044
CHAPTER 22 Using the Navigation Controls
The MenuItemStyle controls are applied to the menu level that corresponds to their order
of declaration. The first MenuItemStyle is applied to the first menu level, the second
MenuItemStyle is applied to the second menu level, and so on.
Finally, the MenuItem class itself includes several useful formatting properties:
. ImageUrl—Enables you to specify the URL for an image that is displayed next to a
menu item.
. PopOutImageUrl—Enables you to specify the URL for an image that is displayed
when a menu item contains child menu items.
. SeparatorImageUrl—Enables you to specify the URL for an image that appears
below a menu item.
. Selectable—Enables you to prevent users from selecting (clicking) a menu item.
. Selected—Enables you to specify whether a menu item is selected.
. Target—Enables you to specify the name of the window that opens when you click
a menu item.
For example, the page in Listing 22.16 displays a menu that resembles a traditional
desktop application menu (see Figure 22.13).
FIGURE 22.13 Displaying a desktop application menu.
From the Library of Wow! eBook
ptg
1045
Using the Menu Control
22
LISTING 22.16 MenuDesktop.aspx
<%@ Page Language=”C#” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“
<html xmlns=” >
<head id=”Head1” runat=”server”>
<style type=”text/css”>
.staticMenuItem
{
color:black;
border:solid 1px black;
padding:2px 4px;
}
.menuHover
{
color:white;
background-color:blue;
}
.dynamicMenuItem
{
color:black;
padding:2px 4px;
}
.dynamicMenu
{
border:Solid 1px black;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5,
Color=’gray’, Positive=’true’)”
}
</style>
<title>Menu Desktop</title>
</head>
<body>
<form id=”form1” runat=”server”>
<div>
<asp:Menu
id=”Menu1”
Orientation=”Horizontal”
StaticMenuItemStyle-CssClass=”staticMenuItem”
StaticHoverStyle-CssClass=”menuHover”
DynamicHoverStyle-CssClass=”menuHover”
DynamicMenuItemStyle-CssClass=”dynamicMenuItem”
DynamicMenuStyle-CssClass=”dynamicMenu”
Runat=”server”>
From the Library of Wow! eBook
ptg
1046
CHAPTER 22 Using the Navigation Controls
<Items>
<asp:MenuItem
Text=”File”
Selectable=”false”>
<asp:MenuItem
Text=”Save” />
<asp:MenuItem
Text=”Open” />
</asp:MenuItem>
<asp:MenuItem
Text=”Format”
Selectable=”false”>
<asp:MenuItem
Text=”Bold”
ImageUrl=”Images/Bold.gif” />
<asp:MenuItem
Text=”Italic”
ImageUrl=”Images/Italic.gif” />
<asp:MenuItem
Text=”Underline”
ImageUrl=”Images/Underline.gif”
SeparatorImageUrl=”Images/Divider.gif” />
<asp:MenuItem
Text=”Left Align”
ImageUrl=”Images/JustifyLeft.gif” />
<asp:MenuItem
Text=”Center Align”
ImageUrl=”Images/JustifyCenter.gif” />
<asp:MenuItem
Text=”Right Align”
ImageUrl=”Images/JustifyRight.gif” />
</asp:MenuItem>
</Items>
</asp:Menu>
</div>
</form>
</body>
</html>
Using Templates with the Menu Control
The Menu control supports templates. You can use templates to completely customize the
appearance of the Menu control.
From the Library of Wow! eBook
ptg
1047
Using the Menu Control
22
The Menu control supports the following two templates:
. DynamicItemTemplate—Applied to dynamic menu items.
. StaticItemTemplate—Applied to static menu items.
The page in Listing 22.17 uses both templates to display menu items. The templates
display a count of child items for each menu item (see Figure 22.14).
FIGURE 22.14 Using templates with the Menu control.
LISTING 22.17 MenuTemplates.aspx
<%@ Page Language=”C#” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“
<script runat=”server”>
protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
{
lblMessage.Text = Menu1.SelectedValue;
}
</script>
<html xmlns=” >
<head id=”Head1” runat=”server”>
<style type=”text/css”>
.menuItem
From the Library of Wow! eBook
ptg
1048
CHAPTER 22 Using the Navigation Controls
{
color:black;
border:Solid 1px Gray;
background-color:#c9c9c9;
padding:2px 5px;
}
</style>
<title>Menu Templates</title>
</head>
<body>
<form id=”form1” runat=”server”>
<div>
<asp:Menu
id=”Menu1”
OnMenuItemClick=”Menu1_MenuItemClick”
Orientation=”Horizontal”
StaticMenuItemStyle-CssClass=”menuItem”
DynamicMenuItemStyle-CssClass=”menuItem”
Runat=”server”>
<StaticItemTemplate>
<%# Eval(“Text”) %>
(<%# Eval(“ChildItems.Count”) %>)
</StaticItemTemplate>
<DynamicItemTemplate>
<%# Eval(“Text”) %>
(<%# Eval(“ChildItems.Count”) %>)
</DynamicItemTemplate>
<Items>
<asp:MenuItem Text=”Produce”>
<asp:MenuItem Text=”Apples” />
<asp:MenuItem Text=”Oranges” />
</asp:MenuItem>
<asp:MenuItem Text=”Beverages”>
<asp:MenuItem Text=”Soda”>
<asp:MenuItem Text=”Coke” />
<asp:MenuItem Text=”Pepsi” />
</asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
From the Library of Wow! eBook
ptg
1049
Using the TreeView Control
22
<hr />
<asp:Label
id=”lblMessage”
EnableViewState=”false”
Runat=”server” />
</div>
</form>
</body>
</html>
You do not need to create LinkButton controls in the templates. The content of the
template is wrapped in a link automatically when it is appropriate.
Using the TreeView Control
The TreeView control is similar to the Menu control. Like the Menu control, you can use the
TreeView control to display hierarchical data. The TreeView control binds to any data source
that implements the IHierarchicalDataSource or IHiearchicalEnumerable interface.
In this section, you learn how to add items declaratively to the TreeView control. You also
learn how to bind a TreeView control to hierarchical data sources such as the
SiteMapDataSource and XmlDataSource controls.
You also see how you can use the TreeView control with database data. A TreeView is built
programmatically from database data.
Finally, you learn how you can use AJAX with the TreeView control to display large sets of
data efficiently. By taking advantage of AJAX, you can update a TreeView without posting
a page back to the server.
Declaratively Adding Tree Nodes
A TreeView control is made up of TreeNode objects. You can build a TreeView control by
declaring TreeNode objects in the TreeView control’s Items collection.
For example, Listing 22.18 contains a TreeView which renders a nested set of links to
pages (see Figure 22.15).
From the Library of Wow! eBook
ptg
1050
CHAPTER 22 Using the Navigation Controls
LISTING 22.18 TreeViewDeclare.aspx
<%@ Page Language=”C#” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“
<html xmlns=” >
<head id=”Head1” runat=”server”>
<title>TreeView Declare</title>
</head>
<body>
<form id=”form1” runat=”server”>
<div>
<asp:TreeView
id=”TreeView1”
Runat=”server”>
<Nodes>
<asp:TreeNode
Text=”Home”
FIGURE 22.15 Displaying a TreeView control.
From the Library of Wow! eBook
ptg
1051
Using the TreeView Control
22
NavigateUrl=”~/Default.aspx”>
<asp:TreeNode
Text=”Products”>
<asp:TreeNode
Text=”First Product”
NavigateUrl=”~/Products/FirstProduct.aspx” />
<asp:TreeNode
Text=”Second Product”
NavigateUrl=”~/Products/SecondProduct.aspx” />
</asp:TreeNode>
<asp:TreeNode
Text=”Services”>
<asp:TreeNode
Text=”First Service”
NavigateUrl=”~/Services/FirstService.aspx” />
<asp:TreeNode
Text=”Second Service”
NavigateUrl=”~/Services/SecondService.aspx” />
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</div>
</form>
</body>
</html>
Some of the TreeNodes in Listing 22.18 include a Text property, and some of the
TreeNodes include both a Text and NavigateUrl property. You can click the TreeNodes that
include a NavigateUrl property to link to a new page.
You also can associate a Value property with a TreeNode. This is useful when you want to
post back to the same page. For example, the page in Listing 22.19 enables you to display
the value of the selected TreeNode in a Label control (see Figure 22.16).
From the Library of Wow! eBook
ptg
1052
CHAPTER 22 Using the Navigation Controls
LISTING 22.19 TreeViewValue.aspx
<%@ Page Language=”C#” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“ /><script runat=”server”>
protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e)
{
lblMessage.Text = TreeView1.SelectedValue;
}
</script>
<html xmlns=” >
<head id=”Head1” runat=”server”>
<style type=”text/css”>
html
{
background-color:silver;
}
.content
{
float:left;
FIGURE 22.16 Selecting a TreeView node.
From the Library of Wow! eBook
ptg
1053
Using the TreeView Control
22
width:350px;
height:500px;
padding:20px;
margin:10px;
background-color:white;
}
</style>
<title>TreeView Value</title>
</head>
<body>
<form id=”form1” runat=”server”>
<div class=”content”>
<asp:TreeView
id=”TreeView1”
OnSelectedNodeChanged=”TreeView1_SelectedNodeChanged”
Runat=”server” >
<Nodes>
<asp:TreeNode
Text=”Home”
Value=”Home”>
<asp:TreeNode
Text=”Products”>
<asp:TreeNode
Text=”First Product”
Value=”FirstProduct” />
<asp:TreeNode
Text=”Second Product”
Value=”SecondProduct” />
</asp:TreeNode>
<asp:TreeNode
Text=”Services”>
<asp:TreeNode
Text=”First Service”
Value=”FirstService” />
<asp:TreeNode
Text=”Second Service”
Value=”SecondService” />
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</div>
From the Library of Wow! eBook
