ASP.Net/Asp Control/Menu
Содержание
- 1 Adding a hover style to dynamic items in the menu control
- 2 Adding a hover style to static items in the menu control
- 3 Applying divider images to dynamic items
- 4 A simple use of the Menu control
- 5 Data Binding with Menu Control
- 6 Forcing the menu items to use a horizontal orientation
- 7 Menu control
- 8 Menu style
- 9 Menu style: Orientation, StaticSubMenuIndent
- 10 Menu with CSS style
- 11 Style menu
- 12 Using custom images
- 13 Using the MenuItemClick event (C#)
- 14 Using the MenuItemClick event (VB)
<%@ Page Language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Menu Server Control</title>
</head>
<body>
<form id="form1" runat="server">
<asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />
<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>
</form>
</body>
</html>
File: Web.sitemap
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.ru/AspNet/SiteMap-File-1.0" >
<siteMapNode title="Home" description="Home Page" url="Default.aspx">
<siteMapNode title="News" description="The Latest News" url="News.aspx">
<siteMapNode title="U.S." description="U.S. News" url="News.aspx?cat=us" />
<siteMapNode title="World" description="World News" url="News.aspx?cat=world" />
<siteMapNode title="Technology" description="Technology News" url="News.aspx?cat=tech" />
<siteMapNode title="Sports" description="Sports News" url="News.aspx?cat=sport" />
</siteMapNode>
<siteMapNode title="Weather" description="The Latest Weather" url="Weather.aspx" />
</siteMapNode>
</siteMap>
<%@ Page Language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Menu Server Control</title>
</head>
<body>
<form id="form1" runat="server">
<asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />
<asp:Menu ID="Menu1" Runat="server" DataSourceID="SiteMapDataSource1">
<StaticHoverStyle BackColor="DarkGray" BorderColor="Black" BorderStyle="Solid"
BorderWidth="1"></StaticHoverStyle>
</asp:Menu>
</form>
</body>
</html>
File: Web.sitemap
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.ru/AspNet/SiteMap-File-1.0" >
<siteMapNode title="Home" description="Home Page" url="Default.aspx">
<siteMapNode title="News" description="The Latest" url="News.aspx">
<siteMapNode title="U.S." description="U.S." url="News.aspx?cat=us" />
<siteMapNode title="World" description="World" url="News.aspx?cat=world" />
<siteMapNode title="Technology" description="Technology" url="News.aspx?cat=tech" />
<siteMapNode title="Sports" description="Sports" url="News.aspx?cat=sport" />
</siteMapNode>
<siteMapNode title="Weather" description="The Latest Weather" url="Weather.aspx" />
</siteMapNode>
</siteMap>
Applying divider images to dynamic items
<asp:Menu ID="Menu1"
Runat="server"
DataSourceID="SiteMapDataSource1"
DynamicBottomSeparatorImageUrl="myDivider.gif">
</asp:Menu>
A simple use of the Menu control
<%@ Page Language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Menu Server Control</title>
</head>
<body>
<form id="form1" runat="server">
<asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />
<asp:Menu ID="Menu1" Runat="server" DataSourceID="SiteMapDataSource1">
</asp:Menu>
</form>
</body>
</html>
File: Web.sitemap
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.ru/AspNet/SiteMap-File-1.0" >
<siteMapNode title="Home" description="Home Page" url="Default.aspx">
<siteMapNode title="News" description="The Latest News" url="News.aspx">
<siteMapNode title="U.S." description="U.S. News" url="News.aspx?cat=us" />
<siteMapNode title="World" description="World News" url="News.aspx?cat=world" />
<siteMapNode title="Technology" description="Technology News" url="News.aspx?cat=tech" />
<siteMapNode title="Sports" description="Sports News" url="News.aspx?cat=sport" />
</siteMapNode>
<siteMapNode title="Weather" description="The Latest Weather" url="Weather.aspx" />
</siteMapNode>
</siteMap>
Data Binding with Menu Control
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Data Binding with Menu control</title>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<asp:Menu id="menuMain" runat="server" DataSourceID="siteSource" />
<asp:SiteMapDataSource ID="siteSource"
runat="server"
ShowStartingNode="false" />
</div>
</form>
</body>
</html>
File: Web.sitemap
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.ru/AspNet/SiteMap-File-1.0" >
<siteMapNode url="BookHome.aspx" title="Home"
description="Return to home page">
<siteMapNode url="Catalog.aspx" title="Catalog" >
<siteMapNode url="Categories.aspx" title="Categories" >
<siteMapNode url="List.aspx?cat=1" title="Graphics" />
<siteMapNode url="List.aspx?cat=2" title="Internet" />
<siteMapNode url="List.aspx?cat=3" title="Networking" />
</siteMapNode>
<siteMapNode url="Series.aspx" title="Series" >
<siteMapNode url="List.aspx?series=1" title="Core Series" />
<siteMapNode url="List.aspx?series=2" title=".NET Series" />
<siteMapNode url="List.aspx?series=3" title="Signature Series"/>
</siteMapNode>
</siteMapNode>
<siteMapNode url="Search.aspx" title="Search" />
<siteMapNode url="Help.aspx" title="Help" >
<siteMapNode url="About.aspx" title="About Us" />
<siteMapNode url="Contact.aspx" title="Contact Us" />
</siteMapNode>
</siteMapNode>
</siteMap>
<%@ Page Language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Menu Server Control</title>
</head>
<body>
<form id="form1" runat="server">
<asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />
<asp:Menu ID="Menu1" Runat="server" DataSourceID="SiteMapDataSource1"
Orientation="Horizontal">
</asp:Menu>
</form>
</body>
</html>
File: Web.sitemap
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.ru/AspNet/SiteMap-File-1.0" >
<siteMapNode title="Home" description="Home Page" url="Default.aspx">
<siteMapNode title="News" description="The Latest News" url="News.aspx">
<siteMapNode title="U.S." description="U.S. News" url="News.aspx?cat=us" />
<siteMapNode title="World" description="World News" url="News.aspx?cat=world" />
<siteMapNode title="Technology" description="Technology News" url="News.aspx?cat=tech" />
<siteMapNode title="Sports" description="Sports News" url="News.aspx?cat=sport" />
</siteMapNode>
<siteMapNode title="Weather" description="The Latest Weather" url="Weather.aspx" />
</siteMapNode>
</siteMap>
Menu control
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Menu Samples</title>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<asp:Menu id="menuOne"
runat="server"
DataSourceID="siteSource1"
BackColor="#B5C7DE"
DynamicHorizontalOffset="2"
Font-Names="Verdana"
Font-Size="1em"
ForeColor="#284E98"
StaticSubMenuIndent="10px" >
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#284E98" ForeColor="White" />
<DynamicMenuStyle BackColor="#B5C7DE" />
<StaticSelectedStyle BackColor="#507CD1" />
<DynamicSelectedStyle BackColor="#507CD1" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticHoverStyle BackColor="#284E98" ForeColor="White" />
</asp:Menu>
<br />
<br />
<br /> <br /> <br />
<asp:SiteMapDataSource ID="siteSource1" runat="server"
ShowStartingNode="false" />
</div>
</form>
</body>
</html>
File: Web.sitemap
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.ru/AspNet/SiteMap-File-1.0" >
<siteMapNode title="Home" description="Home Page" url="Default.aspx">
<siteMapNode title="News" description="The Latest News" url="News.aspx">
<siteMapNode title="U.S." description="U.S. News" url="News.aspx?cat=us" />
<siteMapNode title="World" description="World News" url="News.aspx?cat=world" />
<siteMapNode title="Technology" description="Technology News" url="News.aspx?cat=tech" />
<siteMapNode title="Sports" description="Sports News" url="News.aspx?cat=sport" />
</siteMapNode>
<siteMapNode title="Weather" description="The Latest Weather" url="Weather.aspx" />
</siteMapNode>
</siteMap>
Menu style
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:Menu ID="Menu1"
runat="server"
BackColor="#FFFBD6"
ForeColor="#990000"
Font-Names="Verdana"
Font-Size="0.8em"
StaticSubMenuIndent="10px"
DynamicHorizontalOffset="2"
Orientation="Horizontal">
<StaticSelectedStyle BackColor="#FFCC66" />
<StaticMenuItemStyle HorizontalPadding="5" VerticalPadding="2" />
<DynamicMenuStyle BackColor="#FFFBD6" />
<DynamicSelectedStyle BackColor="#FFCC66" />
<DynamicMenuItemStyle HorizontalPadding="5" VerticalPadding="2" />
<DynamicHoverStyle Font-Bold="True" BackColor="#990000" ForeColor="White" />
<Items>
<asp:MenuItem Value="New Item" Text="Windows">
<asp:MenuItem Value="Windows XP" Text="Windows XP">
<asp:MenuItem Value="Home Edition" Text="Home Edition"></asp:MenuItem>
<asp:MenuItem Value="Professional" Text="Professional"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Value="Windows 2003 Server" Text="Windows 2003 Server"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Value="New Item" Text="Mac OS X">
<asp:MenuItem Value="Mac OS X" Text="Mac OS X">
<asp:MenuItem Value="10.3" Text="10.3"></asp:MenuItem>
<asp:MenuItem Value="10.4" Text="10.4"></asp:MenuItem>
</asp:MenuItem>
</asp:MenuItem>
</Items>
<StaticHoverStyle Font-Bold="True" BackColor="#990000" ForeColor="White" />
</asp:Menu>
</form>
</body>
</html>
Menu style: Orientation, StaticSubMenuIndent
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Menu Samples</title>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<asp:Menu id="menuTwo"
runat="server"
DataSourceID="siteSource1"
BackColor="#FFFBD6"
DynamicHorizontalOffset="2"
Font-Names="Verdana"
Font-Size="1em"
ForeColor="#990000"
Orientation="Horizontal"
StaticSubMenuIndent="10px" >
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#990000" ForeColor="White" />
<DynamicMenuStyle BackColor="#FFFBD6" />
<StaticSelectedStyle BackColor="#FFCC66" />
<DynamicSelectedStyle BackColor="#FFCC66" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticHoverStyle BackColor="#990000" ForeColor="White" />
</asp:Menu>
<br />
<br />
<br />
<br />
<asp:SiteMapDataSource ID="siteSource1" runat="server"
ShowStartingNode="false" />
</div>
</form>
</body>
</html>
Menu with CSS style
<%@ Page Language="C#"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head id="Head1" runat="server">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Styling a Menu</title>
<style type="text/css" rel="stylesheet">
#logo {
float: left;
width: 10.5em;
background: #CCCCCC;
padding: 0.5em 0.5em 0.5em 1em;
margin: 0;
}
.primaryStaticMenu
{
background-color: transparent;
float: right;
}
.primaryStaticMenuItem
{
width: 10em;
background-color: #f7f2ea;
border-width: 1px;
border-color: #efefef #aaab9c #ccc #efefef;
border-style: solid;
color: #777777;
padding: 0.5em 0 0.5em 1em;
}
.primaryStaticHover
{
color: #800000;
background: #f0e7d7;
}
.primaryDynamicMenu
{
background-color: #f7f2ea;
border-bottom: solid 1px #ccc;
}
.primaryDynamicMenuItem
{
width: 10em;
background-color: #f7f2ea;
color: #777;
padding: 0.5em 0 0.5em 1em;
border-width: 1px;
border-color: #f7f2ea #aaab9c #f7f2ea #efefef;
border-style: solid;
}
.primaryDynamicHover
{
color: #800000;
background: #f0e7d7;
}
.secondaryLevelOne
{
background-color: transparent;
background-repeat: repeat-x;
margin: 1.5em 0 0 0;
padding: 5px 0 0 5px;
width: 12em;
height: 35px;
}
.secondaryLevelTwo
{
background: #FAFBFB;
padding: 5px 0 5px 5px;
}
.secondaryStaticHover
{
color: #800000;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<asp:Menu id="menuPrimary"
runat="server"
DataSourceID="siteSource1"
Orientation="Horizontal"
StaticEnableDefaultPopOutImage="false"
StaticDisplayLevels="1"
MaximumDynamicDisplayLevels="1">
<StaticMenuStyle CssClass="primaryStaticMenu"/>
<StaticMenuItemStyle CssClass="primaryStaticMenuItem"/>
<StaticHoverStyle CssClass="primaryStaticHover"/>
<DynamicMenuStyle CssClass="primaryDynamicMenu" />
<DynamicMenuItemStyle CssClass="primaryDynamicMenuItem"/>
<DynamicHoverStyle CssClass="primaryDynamicHover"/>
</asp:Menu>
<asp:SiteMapDataSource ID="siteSource1" runat="server"
ShowStartingNode="false" />
</div>
</form>
</body>
</html>
File: Web.sitemap
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.ru/AspNet/SiteMap-File-1.0" >
<siteMapNode title="Home" description="Home Page" url="Default.aspx">
<siteMapNode title="News" description="The Latest News" url="News.aspx">
<siteMapNode title="U.S." description="U.S. News" url="News.aspx?cat=us" />
<siteMapNode title="World" description="World News" url="News.aspx?cat=world" />
<siteMapNode title="Technology" description="Technology News" url="News.aspx?cat=tech" />
<siteMapNode title="Sports" description="Sports News" url="News.aspx?cat=sport" />
</siteMapNode>
<siteMapNode title="Weather" description="The Latest Weather" url="Weather.aspx" />
</siteMapNode>
</siteMap>
<%@ Page Language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Menu Server Control</title>
</head>
<body>
<form id="form1" runat="server">
<asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />
<asp:Menu ID="Menu1"
Runat="server"
DataSourceID="SiteMapDataSource1"
BackColor="Navy"
ForeColor="White"
Font-Names="Verdana"
Font-Size="0.8em"
StaticSubMenuIndent="10px"
DynamicHorizontalOffset="2">
<StaticSelectedStyle BackColor="#507CD1"></StaticSelectedStyle>
<StaticMenuItemStyle HorizontalPadding="5"
VerticalPadding="2"></StaticMenuItemStyle>
<DynamicMenuStyle BackColor="#B5C7DE"></DynamicMenuStyle>
<DynamicSelectedStyle BackColor="#507CD1"></DynamicSelectedStyle>
<DynamicMenuItemStyle HorizontalPadding="5"
VerticalPadding="2"></DynamicMenuItemStyle>
<DynamicHoverStyle ForeColor="White" Font-Bold="True"
BackColor="#284E98"></DynamicHoverStyle>
<StaticHoverStyle ForeColor="White" Font-Bold="True"
BackColor="#284E98"></StaticHoverStyle>
</asp:Menu>
</form>
</body>
</html>
File: Web.sitemap
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.ru/AspNet/SiteMap-File-1.0" >
<siteMapNode title="Home" description="Home Page" url="Default.aspx">
<siteMapNode title="News" description="News" url="News.aspx">
<siteMapNode title="U.S." description="News" url="News.aspx?cat=us" />
<siteMapNode title="World" description="News" url="News.aspx?cat=world" />
<siteMapNode title="Technology" description="Technology" url="News.aspx?cat=tech" />
<siteMapNode title="Sports" description="Sports News" url="News.aspx?cat=sport" />
</siteMapNode>
<siteMapNode title="Weather" description="The Latest Weather" url="Weather.aspx" />
</siteMapNode>
</siteMap>
Using custom images
<asp:Menu ID="Menu1"
Runat="server"
DataSourceID="SiteMapDataSource1"
Orientation="Horizontal"
DynamicPopOutImageUrl="myArrow.gif"
StaticPopOutImageUrl="myArrow.gif">
</asp:Menu>
Using the MenuItemClick event (C#)
<%@ Page Language="C#" %>
<script runat="server">
protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
{
Listbox1.Items.Add(e.Item.Parent.Value + " : " + e.Item.Value);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Menu Server Control</title>
</head>
<body>
<form id="form1" runat="server">
<asp:Menu ID="Menu1"
Runat="server"
DataSourceID="XmlDataSource1"
OnMenuItemClick="Menu1_MenuItemClick">
<DataBindings>
<asp:MenuItemBinding DataMember="Item"
TextField="Category"></asp:MenuItemBinding>
<asp:MenuItemBinding DataMember="Option"
TextField="Choice"></asp:MenuItemBinding>
</DataBindings>
</asp:Menu>
<asp:ListBox ID="Listbox1" Runat="server">
</asp:ListBox>
<asp:xmldatasource ID="XmlDataSource1" runat="server"
datafile="Data.xml" />
</form>
</body>
</html>
File: Data.xml
<?xml version="1.0" encoding="utf-8"?>
<Hardware>
<Item Category="A">
<Option Choice="A1" />
<Option Choice="A2" />
</Item>
<Item Category="B">
<Option Choice="B1" />
<Option Choice="B2" />
<Option Choice="B3" />
</Item>
</Hardware>
Using the MenuItemClick event (VB)
<%@ Page Language="VB" %>
<script runat="server">
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>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Menu Server Control</title>
</head>
<body>
<form id="form1" runat="server">
<asp:Menu ID="Menu1" Runat="server" DataSourceID="XmlDataSource1"
OnMenuItemClick="Menu1_MenuItemClick">
<DataBindings>
<asp:MenuItemBinding DataMember="Item"
TextField="Category"></asp:MenuItemBinding>
<asp:MenuItemBinding DataMember="Option"
TextField="Choice"></asp:MenuItemBinding>
</DataBindings>
</asp:Menu>
<p>
<asp:ListBox ID="Listbox1" Runat="server">
</asp:ListBox></p>
<asp:xmldatasource ID="XmlDataSource1" runat="server"
datafile="Data.xml" />
</form>
</body>
</html>
File: Data.xml
<?xml version="1.0" encoding="utf-8"?>
<Hardware>
<Item Category="A">
<Option Choice="A1" />
<Option Choice="A2" />
</Item>
<Item Category="B">
<Option Choice="B1" />
<Option Choice="B2" />
<Option Choice="B3" />
</Item>
</Hardware>