ASP.NET Tutorial/ASP.net Controls/Menu

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

Applying styles to different menu levels.

   <source lang="csharp">

<%@ Page Language="C#" %> <!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 id="Head1" runat="server"> 

   <style type="text/css">
       .menuLevel1
       {
           font:40px Arial,Sans-Serif;
       }
       .menuLevel2
       {
           font:20px Arial,Sans-Serif;
       }
       .menuLevel3
       {
           font:10px Arial,Sans-Serif;
       }
   </style>
   <title>Menu Level Styles</title>

</head> <body> 

   <form id="form1" runat="server">

   <asp:Menu
       id="Menu1"
       Runat="server">
       <LevelMenuItemStyles>
           <asp:MenuItemStyle CssClass="menuLevel1" />
           <asp:MenuItemStyle CssClass="menuLevel2" />
           <asp:MenuItemStyle CssClass="menuLevel3" />
       </LevelMenuItemStyles>
       <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>
       </asp:MenuItem>
       </Items>
   </asp:Menu>

   </form>

</body> </html></source>


Binding Menu to a Site Map

   <source lang="csharp">

<%@ Page Language="C#" %> <!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 id="Head1" runat="server"> 

   <title>Menu SiteMap</title>

</head> <body> 

   <form id="form1" runat="server">

   <asp:Menu
       id="Menu1"
       DataSourceID="srcSiteMap"
       Runat="server" />
   <asp:SiteMapDataSource
       id="srcSiteMap"
       Runat="server" />

   </form>

</body> </html>

File: Web.sitemap <siteMap xmlns="http://schemas.microsoft.ru/AspNet/SiteMap-File-1.0" > <siteMapNode 

 url="Default.aspx"
 title="Home"
 description="The Home Page">
 <siteMapNode
   url="Products/Default.aspx"
   title="Our Products"
   description="Products that we offer">
   <siteMapNode
     url="Products/FirstProduct.aspx"
     title="First Product"
     description="The description of the First Product" />
   <siteMapNode
     url="Products/SecondProduct.aspx"
     title="Second Product"
     description="The description of the Second Product" />
 </siteMapNode>
 <siteMapNode
   url="Services/Default.aspx"
   title="Our Services"
   description="Services that we offer">
   <siteMapNode
     url="Services/FirstService.aspx"
     title="First Service"
     description="The description of the First Service"
     metaDescription="The first service" />
   <siteMapNode
     url="Services/SecondService.aspx"
     title="Second Service"
     description="The description of the Second Service" />
 </siteMapNode>

</siteMapNode> </siteMap></source>


Displaying a desktop application menu.

   <source lang="csharp">

<%@ Page Language="C#" %> <!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 id="Head1" runat="server"> 

   <style type="text/css">
       .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> 

   <form id="form1" runat="server">

   <asp:Menu
       id="Menu1"
       Orientation="Horizontal"
       StaticMenuItemStyle-CssClass="staticMenuItem"
       StaticHoverStyle-CssClass="menuHover"
       DynamicHoverStyle-CssClass="menuHover"
       DynamicMenuItemStyle-CssClass="dynamicMenuItem"
       DynamicMenuStyle-CssClass="dynamicMenu"
       Runat="server">
       <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>

   </form>

</body> </html></source>


Displaying a menu with the Menu control.

   <source lang="csharp">

<%@ Page Language="C#" %> <!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 id="Head1" runat="server"> 

   <title>Menu HyperLink</title>

</head> <body> 

   <form id="form1" runat="server">

   <asp:Menu
       id="Menu1"
       Runat="server">
       <Items>
           <asp:MenuItem
               Text="Products"
               NavigateUrl="Products.aspx" />
           <asp:MenuItem
               Text="Services"
               NavigateUrl="Services.aspx">
               <asp:MenuItem
                   Text="Training"
                   NavigateUrl="Training.aspx"  />
               <asp:MenuItem
                   Text="Consulting"
                   NavigateUrl="Consulting.aspx" />
           </asp:MenuItem>
       </Items>
   </asp:Menu>

   </form>

</body> </html></source>


Menu Database

   <source lang="csharp">

<%@ Page Language="C#" %> <%@ Import Namespace="System.Web.Configuration" %> <%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Data.SqlClient" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server"> 

   void Page_Load()
   {
       if (!Page.IsPostBack)
           PopulateMenu();
   }
   private void PopulateMenu()
   {
       DataTable menuData = GetMenuData();
       AddTopMenuItems(menuData);
   }
   private DataTable GetMenuData()
   {
       string selectCommand = "SELECT CategoryId,ParentId,Name FROM Categories";
       string conString = WebConfigurationManager.ConnectionStrings["Categories"]. ConnectionString;
       SqlDataAdapter dad = new SqlDataAdapter(selectCommand, conString);
       DataTable dtblCategories = new DataTable();
       dad.Fill(dtblCategories);
       return dtblCategories;
   }    
   private void AddTopMenuItems(DataTable menuData)
   {
       DataView view = new DataView(menuData);
       view.RowFilter = "ParentID IS NULL";
       foreach (DataRowView row in view)
       {
           MenuItem newMenuItem = new MenuItem(row["Name"].ToString(), row["CategoryId"].ToString());
           Menu1.Items.Add(newMenuItem);
           AddChildMenuItems(menuData, newMenuItem);
       }
   }
   private void AddChildMenuItems(DataTable menuData, MenuItem parentMenuItem)
   {
       DataView view = new DataView(menuData);
       view.RowFilter = "ParentID=" + parentMenuItem.Value;
       foreach (DataRowView row in view)
       {
           MenuItem newMenuItem = new MenuItem(row["Name"].ToString(), row["CategoryId"].ToString());
           parentMenuItem.ChildItems.Add(newMenuItem);
           AddChildMenuItems(menuData, newMenuItem);
       }
   }

</script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> 

   <style type="text/css">
       .menuItem
       {
           border:Solid 1px black;
           width:100px;
           padding:2px;
           background-color:#eeeeee;
       }
       .menuItem a
       {
           color:blue;
       }
       .grid
       {
           margin-top:10px;
       }
       .grid td, .grid th
       {
           padding:10px;
       }
   </style>
   <title>Menu Database</title>

</head> <body> 

   <form id="form1" runat="server">

   <asp:Menu
       id="Menu1"
       Orientation="horizontal"
       StaticMenuItemStyle-CssClass="menuItem"
       DynamicMenuItemStyle-CssClass="menuItem"
       Runat="server" />
   <asp:GridView
       id="grdProducts"
       DataSourceID="srcProducts"
       CssClass="grid"
       AutoGenerateColumns="false"
       Runat="server">
       <Columns>
       <asp:BoundField
           DataField="ProductName"
           HeaderText="Product" />
       <asp:BoundField
           DataField="Price"
           HeaderText="Price"
           DataFormatString="{0:c}" />
       </Columns>
   </asp:GridView>
   <asp:SqlDataSource
       id="srcProducts"
       ConnectionString="<%$ ConnectionStrings:Categories %>"
       SelectCommand="SELECT ProductName,Price FROM Products
           WHERE CategoryId=@CategoryId"
       Runat="server">
       <SelectParameters>
       <asp:ControlParameter
           Name="CategoryId"
           ControlID="Menu1" />
       </SelectParameters>
   </asp:SqlDataSource>

   </form>

</body> </html></source>


MenuLinkButton

   <source lang="csharp">

<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server"> 

   protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
   {
       lblMessage.Text = "You selected " + Menu1.SelectedValue;
   }

</script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> 

   <title>Menu LinkButton</title>

</head> <body> 

   <form id="form1" runat="server">

   <asp:Menu
       id="Menu1"
       OnMenuItemClick="Menu1_MenuItemClick"
       Runat="server">
       <Items>
           <asp:MenuItem
               Text="Products Page"
               Value="Products" />
           <asp:MenuItem
               Text="Services Page"
               Value="Services">
               <asp:MenuItem
                   Text="Training Page"
                   Value="Training" />
               <asp:MenuItem
                   Text="Consulting Page"
                   Value="Consulting" />
           </asp:MenuItem>
       </Items>
   </asp:Menu>

   <asp:Label
       id="lblMessage"
       EnableViewState="false"
       Runat="server" />

   </form>

</body> </html></source>


Menu Navigation

   <source lang="csharp">

<%@ Page Language="C#" %> <!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 id="Head1" runat="server"> 

   <style type="text/css">
       html
       {
           background-color:silver;
       }
       .navigation
       {
           float:left;
           width:280px;
           height:500px;
           padding:20px;
           background-color:#eeeeee;
       }
       .content
       {
           float:left;
           width:550px;
           height:500px;
           padding:20px;
           background-color:white;
       }
       .menuItem
       {
           border:Outset 1px black;
           background-color:Gray;
           font:14px Arial;
           color:White;
           padding:8px;
       }
   </style>
   <title>Menu Navigate</title>

</head> <body> 

   <form id="form1" runat="server">

   <asp:Menu
       id="Menu1"
       DataSourceID="srcSiteMap"
       StaticMenuItemStyle-CssClass="menuItem"
       DynamicMenuItemStyle-CssClass="menuItem"
       Runat="server" />
   <asp:SiteMapDataSource
       id="srcSiteMap"
       ShowStartingNode="false"
       Runat="server" />

Displaying a Website menu with the Menu control

   </form>

</body> </html> File: Web.sitemap <siteMap xmlns="http://schemas.microsoft.ru/AspNet/SiteMap-File-1.0" > <siteMapNode 

 url="Default.aspx"
 title="Home"
 description="The Home Page">
 <siteMapNode
   url="Products/Default.aspx"
   title="Our Products"
   description="Products that we offer">
   <siteMapNode
     url="Products/FirstProduct.aspx"
     title="First Product"
     description="The description of the First Product" />
   <siteMapNode
     url="Products/SecondProduct.aspx"
     title="Second Product"
     description="The description of the Second Product" />
 </siteMapNode>
 <siteMapNode
   url="Services/Default.aspx"
   title="Our Services"
   description="Services that we offer">
   <siteMapNode
     url="Services/FirstService.aspx"
     title="First Service"
     description="The description of the First Service"
     metaDescription="The first service" />
   <siteMapNode
     url="Services/SecondService.aspx"
     title="Second Service"
     description="The description of the Second Service" />
 </siteMapNode>

</siteMapNode> </siteMap></source>


Using Templates with the Menu Control

   <source lang="csharp">

<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server"> 

   protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
   {
       lblMessage.Text = Menu1.SelectedValue;
   }

</script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> 

   <style type="text/css">
       .menuItem
       {
           color:black;
           border:Solid 1px Gray;
           background-color:#c9c9c9;
           padding:2px 5px;
       }
   </style>
   <title>Menu Templates</title>

</head> <body> 

   <form id="form1" runat="server">

   <asp:Menu
       id="Menu1"
       OnMenuItemClick="Menu1_MenuItemClick"
       Orientation="Horizontal"
       StaticMenuItemStyle-CssClass="menuItem"
       DynamicMenuItemStyle-CssClass="menuItem"
       Runat="server">
       <StaticItemTemplate>
       <%# Eval("Text") %>
       (<%# Eval("ChildItems.Count") %>)
       </StaticItemTemplate>
       <DynamicItemTemplate>
       <%# 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>
       </asp:MenuItem>
       </Items>
   </asp:Menu>

   <asp:Label
       id="lblMessage"
       EnableViewState="false"
       Runat="server" />

   </form>

</body> </html></source>


Using the Menu Control with the MultiView Control

   <source lang="csharp">

<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server"> 

   protected void menuTabs_MenuItemClick(object sender, MenuEventArgs e)
   {
       multiTabs.ActiveViewIndex = Int32.Parse(menuTabs.SelectedValue);
   }

</script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> 

   <style type="text/css">
       .menuTabs
       {
           position:relative;
           top:1px;
           left:10px;
       }
       .tab
       {
           border:Solid 1px black;
           border-bottom:none;
           padding:0px 10px;
           background-color:#eeeeee;
       }
       .selectedTab
       {
           border:Solid 1px black;
           border-bottom:Solid 1px white;
           padding:0px 10px;
           background-color:white;
       }
       .tabBody
       {
           border:Solid 1px black;
           padding:20px;
           background-color:white;
       }
   </style>
   <title>Menu Tab Strip</title>

</head> <body> 

   <form id="form1" runat="server">

   <asp:Menu
       id="menuTabs"
       CssClass="menuTabs"
       StaticMenuItemStyle-CssClass="tab"
       StaticSelectedStyle-CssClass="selectedTab"
       Orientation="Horizontal"
       OnMenuItemClick="menuTabs_MenuItemClick"
       Runat="server">
       <Items>
       <asp:MenuItem
           Text="Tab 1"
           Value="0"
           Selected="true" />
       <asp:MenuItem
           Text="Tab 2"
           Value="1"/>
       <asp:MenuItem
           Text="Tab 3"
           Value="2" />
       </Items>
   </asp:Menu>

   <asp:MultiView
       id="multiTabs"
       ActiveViewIndex="0"
       Runat="server">
       <asp:View ID="view1" runat="server">
       Contents of first tab
       </asp:View>
       <asp:View ID="view2" runat="server">
       Contents of second tab
       </asp:View>
       <asp:View ID="view3" runat="server">
       Contents of third tab
       </asp:View>
   </asp:MultiView>

   </form>

</body> </html></source>

Источник — «http://nfex.ru/index.php?title=ASP.NET_Tutorial/ASP.net_Controls/Menu&oldid=3361»