ASP.Net/Asp Control/Menu

Материал из .Net Framework эксперт
Перейти к: навигация, поиск

Adding a hover style to dynamic items in 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">
           <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>



Adding a hover style to static items in 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">
           <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>



Forcing the menu items to use a horizontal orientation

<%@ 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 />
      &nbsp;
      <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>



Style menu

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