Professional ASP.NET 3.5 in C# and Visual Basic Part 75 ppt

The Menu control has a number of different elements for modifying the appearance of dynamic items, including the following: ❑ ❑ ❑ ❑ ❑ These elements change menu items the same way a

Trang 1

Adding Styles to Dynamic Items

Adding styles to the dynamic items of the menu control is just as easy as adding them to static items

The Menu control has a number of different elements for modifying the appearance of dynamic

items, including the following:

❑ <DynamicHoverStyle>

❑ <DynamicItemTemplate>

❑ <DynamicMenuItemStyle>

❑ <DynamicMenuStyle>

❑ <DynamicSelectedStyle>

These elements change menu items the same way as the static versions of these elements, but they change only the items that dynamically pop-out from the static items Listing 14-19 shows an example of apply-ing the hover style to dynamic items

Listing 14-19: Adding a hover style to dynamic items in the menu control

<asp:Menu ID="Menu1" runat="server" DataSourceID="Sitemapdatasource1">

<StaticHoverStyle BackColor="DarkGray" BorderColor="Black" BorderStyle="Solid"

BorderWidth="1"></StaticHoverStyle>

<DynamicHoverStyle BackColor="DarkGray" BorderColor="Black" BorderStyle="Solid"

BorderWidth="1"></DynamicHoverStyle>

</asp:Menu>

This code produces the results shown in Figure 14-22

Figure 14-22

Trang 2

Changing the Layout of the Menu Items

By default, the dynamic menu items are displayed from left to right This means that, as the items in the

menu expand, they are continually displayed in a vertical fashion You can actually control this behavior,

but another option is available to you

The other option is to have the first level of menu items appear directly below the first static item

(hori-zontally) You change this behavior by using theOrientationattribute of the Menu control, as shown in

Listing 14-20

Listing 14-20: Forcing the menu items to use a horizontal orientation

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"

Orientation="Horizontal">

</asp:Menu>

This code produces the results shown in Figure 14-23

Figure 14-23

TheOrientationattribute can take a value ofHorizontalorVerticalonly The default value is

Vertical

Changing the Pop-Out Symbol

As the default, an arrow is used as the pop-out symbol for the menu items generated, whether they are

static or dynamic This is shown in Figure 14-24

Figure 14-24 You are not forced to use this arrow symbol; in fact, you can change it to an image with relatively little

work Listing 14-21 shows how to accomplish this task

Trang 3

Listing 14-21: Using custom images

Orientation="Horizontal" DynamicPopOutImageUrl="myArrow.gif"

StaticPopOutImageUrl="myArrow.gif">

</asp:Menu>

To change the pop-out symbol to an image of your choice, you use theDynamicPopOutImageUrlor Stat-icPopOutImageUrlproperties TheStringvalue these attributes take is simply the path of the image

you want to use Depending on the image used, it produces something similar to what you see in

Figure 14-25

Separating Menu Items with Images

Another nice styling option of the Menu control is the capability to add a divider image to the menu

items You use theStaticBottomSeparatorImageUrl,StaticTopSeparatorImageUrl, DynamicBottom-SeparatorImageUrl, andDynamicTopSeparatorImageUrlproperties depending on where you want to

place the separator image

For example, if you wanted to place a divider image under only the dynamic menu items, you use the

DynamicBottomSeparatorImageUrlproperty, as shown in Listing 14-22

Listing 14-22: Applying divider images to dynamic items

DynamicBottomSeparatorImageUrl="myDivider.gif">

</asp:Menu>

All the properties of the Menu control that define the image to use for the dividers take aStringvalue that points to the location of the image The result of Listing 14-22 is shown in Figure 14-26

Trang 4

Figure 14-26

Menu Events

The Menu control exposes events such as the following:

❑ DataBinding

❑ DataBound

❑ Disposed

❑ MenuItemClick

❑ MenuItemDataBound

❑ PreRender

❑ Unload

One nice event to be aware of is theMenuItemClickevent This event, shown in Listing 14-23, enables

you to take some action when the end user clicks one of the available menu items

Listing 14-23: Using the MenuItemClick event

VB

Protected Sub Menu1_MenuItemClick(ByVal sender As Object, _

ByVal e As System.Web.UI.WebControls.MenuEventArgs)

’ Code for event here

End Sub

Trang 5

protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)

{

// Code for event here

}

This delegate uses theMenuEventArgsdata class and provides you access to the text and value of the item selected from the menu

Binding the Menu Control to an XML File

Just as with the TreeView control, it is possible to bind the Menu control to items that come from other data source controls provided with ASP.NET 3.5 Although most developers are likely to use the Menu control to enable end users to navigate to URL destinations, you can also use the Menu control to enable users to make selections

As an example, take the previous XML file,Hardware.xml, which was used with the TreeView control

from Listing 14-8 earlier in the chapter For this example, the Menu control works with an XmlDataSource control When the end user makes a selection from the menu, you populate a Listbox on the page with

the items selected The code for this is shown in Listing 14-24

Listing 14-24: Using the Menu control with an XML file

VB

<%@ Page Language="VB" %>

Protected Sub Menu1_MenuItemClick(ByVal sender As Object, _

ByVal e As System.Web.UI.WebControls.MenuEventArgs)

Listbox1.Items.Add(e.Item.Parent.Value & " : " & e.Item.Value) End Sub

</script>

<title>Menu Server Control</title>

</head>

<body>

<asp:Menu ID="Menu1" runat="server" DataSourceID="XmlDataSource1"

OnMenuItemClick="Menu1_MenuItemClick">

<asp:MenuItemBinding DataMember="Item"

TextField="Category"></asp:MenuItemBinding>

<asp:MenuItemBinding DataMember="Option"

TextField="Choice"></asp:MenuItemBinding>

</DataBindings>

Continued

Trang 6

<p>

<asp:ListBox ID="Listbox1" runat="server">

</asp:ListBox></p>

<asp:xmldatasource ID="XmlDataSource1" runat="server"

datafile="Hardware.xml" />

</form>

</body>

</html>

C#

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

protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)

{

Listbox1.Items.Add(e.Item.Parent.Value + " : " + e.Item.Value);

}

</script>

From this example, you can see that instead of using the<asp:TreeNodeBinding>elements, as we

did with the TreeView control, the Menu control uses the<asp:MenuItemBinding>elements to make

connections to items listed in the XML file,Hardware.xml In addition, the root element of the Menu

control, the<asp:Menu>element, now includes theOnMenuItemClickattribute, which points to the

event delegateMenu1_MenuItemClick

TheMenu1_MenuItemClickdelegate includes the data classMenuEventArgs, which enables you to get

at both the values of the child and parent elements selected For this example, both are used and then

populated into the Listbox control, as illustrated in Figure 14-27

Figure 14-27

Trang 7

SiteMap Data Provider

A series of data providers in the form of DataSource controls are available in ASP.NET 3.5 One of

these DataSource controls now at your disposal, which you looked at earlier in the chapter, is the

SiteMapDataSource control This DataSource control was developed to work with site maps and the

controls that can bind to them

Some controls do not need a SiteMapDataSource control in order to bind to the application’s site map

(which is typically stored in theWeb.sitemapfile) Earlier in the chapter, you saw this in action when

using the SiteMapPath control This control was able to work with theWeb.sitemapfile directly —

without the need for this data provider

Certain navigation controls, however, such as the TreeView control and the DropDownList control,

require an intermediary SiteMapDataSource control to retrieve the site navigation information

The SiteMapDataSource control is simple to use as demonstrated throughout this chapter The SiteMap-DataSource control in its simplest form is illustrated here:

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

In this form, the SiteMapDataSource control simply grabs the info as a tree hierarchy (as consistently

demonstrated so far) Be aware that a number of properties do change how the data is displayed in any control that binds to the data output

ShowStartingNode

TheShowStartingNodeproperty determines whether the root node of the.sitemapfile is retrieved

with the retrieved collection of node objects This property takes aBooleanvalue and is set toTrue

by default If you are working with theWeb.sitemapfile shown in Listing 14-1, you construct your

SiteMapDataSource control as shown in Listing 14-25 to remove the root node from the collection

Listing 14-25: Removing the root node from the retrieved node collection

</head>

<body>

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server"

ShowStartingNode="False" />

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1">

</asp:Menu>

</form>

</body>

</html>

Trang 8

This code produces a menu like the one shown in Figure 14-28.

Figure 14-28

From this screenshot, you can see that indeed the root node has been removed, and the menu shown

starts by using all the child nodes of the root node

StartFromCurrentNode

TheStartFromCurrentNodeproperty causes the SiteMapDataProvider to retrieve only a node collection

that starts from the current node of the page being viewed By default, this is set toFalse, meaning

that the SiteMapDataProvider always retrieves all the available nodes (from the root node to the current

node)

For an example of this, use the.sitemapfile from Listing 14-1 and create a page calledMarkets.aspx

This page in the hierarchy of the node collection is a child node of the Finance node, as well as having

two child nodes itself: U.S Market Report and NYSE An example of setting theStartFromCurrentNode

property toTrueis shown in Listing 14-26

Listing 14-26: The Markets.aspx page using the StartFromCurrentNode property

</head>

<body>

StartFromCurrentNode="True" />

</asp:Menu>

</form>

</body>

</html>

Trang 9

This simple property addition produces the result shown in Figure 14-29.

Figure 14-29

StartingNodeOffset

TheStartingNodeOffsetproperty takes anIntegervalue that determines the starting point of the

hierarchy collection Be default, this property is set to0, meaning that the node collection retrieved by

the SiteMapDataSource control starts at the root node Any other value provides the offset from the root node and, in turn, makes this the new starting point From the example provided in Listing 14-1, you

know that the collection starts with the Home page found atDefault.aspx, a page that you have seen in numerous examples in this chapter

If you set this property’s value to1, the starting point of the collection is one space off the default starting point (the Home page starting atDefault.aspx) For example, if the page using the SiteMapDataSource control is theMarketsUS.aspxpage, the node collection starts with the Finance page (Finance.aspx)

Home Offset 0

News Offset 1

U.S Offset 2

World Offset 2

Technology Offset 2

Sports Offset 2

Finance Offset 1

Quotes Offset 2

Markets Offset 2

U.S Market Report Offset 3

NYSE Offset 3

Funds Offset 2

Weather Offset 1

From this hierarchy, you can see how much each node is offset from the root node Therefore, if you set theStartingNodeOffsetproperty to1and you are browsing on the U.S Market Report page, you can see that the node collection starts with the Finance page (Finance.aspx) and the other child nodes of the root node (News and Weather) are not represented in the node collection as theFinance.aspxpage is on the direct hierarchical path of the requested page

Trang 10

TheStartingNodeUrlproperty enables you to specify the page found in the.sitemapfile from which the

node collection should start By default, the value of this property is empty; but when set to something

such asFinance.aspx,, the collection starts with the Finance page as the root node of the node collection

Listing 14-27 shows an example of using theStartingNodeUrlproperty

Listing 14-27: Using the StartingNodeUrl property

</head>

<body>

StartingNodeUrl="Finance.aspx" />

</asp:Menu>

</form>

</body>

</html>

When theStartingNodeUrlproperty value is encountered, the value is compared against theurl

attributes in theWeb.sitemapfile When a match is found, the matched page is the one used as the root

node in the node collection retrieved by the SiteMapDataSource control

SiteMap API

TheSiteMapclass is an in-memory representation of the site’s navigation structure This is a great class

for programmatically working around the hierarchical structure of your site TheSiteMapclass comes

with a couple of objects that make working with the navigation structure easy These objects (or public

properties) are described in the following table

Properties Description

CurrentNode Retrieves aSiteMapNodeobject for the current page

RootNode Retrieves aSiteMapNodeobject that starts from the root node and the

rest of the site’s navigation structure

Provider Retrieves the defaultSiteMapProviderfor the current site map

Providers Retrieves a collection of available, namedSiteMapProviderobjects

Listing 14-28 shows an example of working with someSiteMapobjects by demonstrating how to use the

CurrentNodeobject from theMarkets.aspxpage

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