ASP.NET 4 Unleased - p 108 pot

PopOutImageUrl—Enables you to specify the URL for an image that is displayed when a menu item contains child menu items.. For example, the page in Listing 22.16 displays a menu that rese

Trang 1

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

Trang 2

LISTING 22.16 MenuDesktop.aspx

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

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

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

.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>

<div>

<asp:Menu

id=”Menu1”

Orientation=”Horizontal”

StaticMenuItemStyle-CssClass=”staticMenuItem”

StaticHoverStyle-CssClass=”menuHover”

DynamicHoverStyle-CssClass=”menuHover”

DynamicMenuItemStyle-CssClass=”dynamicMenuItem”

DynamicMenuStyle-CssClass=”dynamicMenu”

Runat=”server”>

Trang 3

<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

Trang 4

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

protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)

{

lblMessage.Text = Menu1.SelectedValue;

}

</script>

.menuItem

Trang 5

{

color:black;

border:Solid 1px Gray;

background-color:#c9c9c9;

padding:2px 5px;

}

</style>

<title>Menu Templates</title>

</head>

<body>

<div>

<asp:Menu

id=”Menu1”

OnMenuItemClick=”Menu1_MenuItemClick”

Orientation=”Horizontal”

StaticMenuItemStyle-CssClass=”menuItem”

DynamicMenuItemStyle-CssClass=”menuItem”

Runat=”server”>

<%# Eval(“Text”) %>

(<%# Eval(“ChildItems.Count”) %>)

</StaticItemTemplate>

<%# 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>

</Items>

</asp:Menu>

Trang 6

<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

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)

Trang 7

LISTING 22.18 TreeViewDeclare.aspx

<title>TreeView Declare</title>

</head>

<body>

<div>

<asp:TreeView

id=”TreeView1”

Runat=”server”>

<Nodes>

<asp:TreeNode

Text=”Home”

FIGURE 22.15 Displaying a TreeView control

Trang 8

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>

</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)

Trang 9

LISTING 22.19 TreeViewValue.aspx

protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e)

{

lblMessage.Text = TreeView1.SelectedValue;

}

</script>

html

{

background-color:silver;

}

.content

{

float:left;

FIGURE 22.16 Selecting a TreeView node

Trang 10

width:350px;

height:500px;

padding:20px;

margin:10px;

background-color:white;

}

</style>

<title>TreeView Value</title>

</head>

<body>

<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>

</Nodes>

</asp:TreeView>

</div>

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