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)
<source lang="csharp">
<%@ 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>
</source>
<source lang="csharp">
<%@ 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>
</source>
Applying divider images to dynamic items
<source lang="csharp">
<asp:Menu ID="Menu1"
Runat="server" DataSourceID="SiteMapDataSource1" DynamicBottomSeparatorImageUrl="myDivider.gif">
</asp:Menu>
</source>
A simple use of the Menu control
<source lang="csharp">
<%@ 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>
</source>
Data Binding with Menu Control
<source lang="csharp">
<%@ 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">
<asp:Menu id="menuMain" runat="server" DataSourceID="siteSource" /> <asp:SiteMapDataSource ID="siteSource" runat="server" ShowStartingNode="false" />
</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>
</source>
<source lang="csharp">
<%@ 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>
</source>
Menu control
<source lang="csharp">
<%@ 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">
<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>
<asp:SiteMapDataSource ID="siteSource1" runat="server" ShowStartingNode="false" />
</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>
</source>
Menu style
<source lang="csharp">
<%@ 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>
</source>
Menu style: Orientation, StaticSubMenuIndent
<source lang="csharp">
<%@ 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">
<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>
<asp:SiteMapDataSource ID="siteSource1" runat="server" ShowStartingNode="false" />
</form>
</body> </html>
</source>
Menu with CSS style
<source lang="csharp">
<%@ 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">
<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" />
</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>
</source>
<source lang="csharp">
<%@ 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>
</source>
Using custom images
<source lang="csharp">
<asp:Menu ID="Menu1"
Runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" DynamicPopOutImageUrl="myArrow.gif" StaticPopOutImageUrl="myArrow.gif">
</asp:Menu>
</source>
Using the MenuItemClick event (C#)
<source lang="csharp">
<%@ 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>
</source>
Using the MenuItemClick event (VB)
<source lang="csharp">
<%@ 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>
<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>
</source>