Ngôn ngữ ASP.NET - Điều khiển Menu

Cách tạo Menu trong ASP.NET

  • Dùng để thể hiện thực đơn và cho phép người dùng chuyển đến một trang web khác khi chọn một chức năng
  • Thao tác tạo: chọn thuộc tính Items: khai báo các chức năng trên thực đơn

Menu rất dễ sử dụng, chỉ cần thêm vào trang và liên kết nó đến SiteMapDataSource control là xong. Dữ liệu trong SiteMapDataSource lấy từ file *.sitemapMenu control có nhiều thuộc tính kèm theo nhưng sau đây là bảng danh sách các thuộc tính phổ biến:

Thuộc tính Mô tả
CssClass Cho phép dùng các class CSS.
StaticEnableDefaultPopOutImage Cho phép dùng hình ảnh để xác định menu con từ menu mức cao nhất.
DynamicEnableDefaultPopOutImage Cho phép dùng hình ảnh để xác định menu con từ menu con.
DisappearAfter Khoảng thời gian (mili giây) các items menu xuất hiện sau khi con trỏ chuột rời khỏi.
MaximumDynamicDisplayLevels Xác định số cấp menu được phép.
DataSourceID ID của SiteMapDataSource control dùng để cung cấp dữ liệu cho Menu lấy từ Web.sitemap.
Orientation Xác định menu ngang hay menu dọc.
RenderingMode Xác định cách thể hiện của menu bằng bảng và inline CSS hay dùng danh sách không thứ tự và CSS.
IncludeStyleBlock Hiển thị menu và CSS.

Trong ví dụ này chúng ta có 2 sitemap. Web.sitemap dùng cho TreeView HeaderMenu.sitemap dùng cho Menu

Bước 1: Tạo 2 tập tin Web.sitemap, HeaderMenu.sitemap

Code Web.sitemap

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="Home.aspx" title="Trang chủ"  description="Home Page" >
    <siteMapNode url="Products.aspx" title="Đồng hồ nam" description="Sản phẩm">
      <siteMapNode url ="Hardware.aspx" title="Đồng hồ kim"  description="Đồng hồ kim"></siteMapNode>
      <siteMapNode url ="" title="Đồng hồ lộ máy"  description="Đồng hồ lộ máy"></siteMapNode>
      <siteMapNode url ="" title="Đồng hồ thể thao Nam"  description="Đồng hồ thể thao Nam"></siteMapNode>
      <siteMapNode url ="" title="Đồng hồ điện tử"  description="Đồng hồ điện tử"></siteMapNode>
      <siteMapNode url ="" title="Đồng hồ quả quýt"  description="Đồng hồ quả quýt"></siteMapNode>
    </siteMapNode>
    <siteMapNode url="Services.aspx" title="Phụ kiện đồng hồ"  description="Phụ kiện đồng hồ">
      <siteMapNode url ="Consulting.aspx" title="Hộp đồng hồ"  description="Hộp đồng hồ"></siteMapNode>
      <siteMapNode url ="Outsourcing.aspx" title="Đồng hồ cho bé"  description="Đồng hồ cho bé"></siteMapNode>
      <siteMapNode url ="" title="Đồng hồ bé gái"  description="Đồng hồ bé gái"></siteMapNode>
      <siteMapNode url ="" title="Đồng hồ bé trai"  description="Đồng hồ bé trai"></siteMapNode>
      <siteMapNode url ="" title="Đồng hồ nữ"  description="Đồng hồ nữ"></siteMapNode>
    </siteMapNode>
    <siteMapNode url="" title="Trang sức nữ"  description="Trang sức nữ">
      <siteMapNode url ="" title="Vòng tay"  description="Vòng tay"></siteMapNode>
      <siteMapNode url ="" title="Bông tai"  description="Bông tai"></siteMapNode>
      <siteMapNode url ="" title="Dây chuyền nữ"  description="Dây chuyền nữ"></siteMapNode>
      <siteMapNode url ="" title="Bộ trang sức"  description="Bộ trang sức"></siteMapNode>
      <siteMapNode url ="" title="Nhẫn đôi"  description="Nhẫn đôi"></siteMapNode>
    </siteMapNode>
  </siteMapNode>
</siteMap>

Code HeaderMenu.sitemap

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="" title=""  description="">
  <siteMapNode url="Home.aspx" title="Trang chủ"  description="Home Page" >
    </siteMapNode>
    <siteMapNode url="Products.aspx" title="Sản phẩm" description="Sản phẩm">
      <siteMapNode url ="Hardware.aspx" title="Phần cứng"  description="Phần cứng"></siteMapNode>
      <siteMapNode url ="Software.aspx" title="Phần mềm"  description="Phần mềm"></siteMapNode>
    </siteMapNode>
    <siteMapNode url ="shoppingcart.aspx" title="Giỏ hàng"  description="Giỏ hàng"></siteMapNode>
    <siteMapNode url="Services.aspx" title="Dịch vụ"  description="Dịch vụ">
      <siteMapNode url ="Consulting.aspx" title="Tư vấn"  description="Tư vấn"></siteMapNode>
      <siteMapNode url ="Outsourcing.aspx" title="Gia công phần mềm"  description="Gia công phần mềm"></siteMapNode>
    </siteMapNode>
    <siteMapNode url="About.aspx" title="Giới thiệu"  description="Giới thiệu" />
    <siteMapNode url="Contact.aspx" title="Liên hệ"  description="Liên hệ" />
  </siteMapNode>
</siteMap>

Bước 2: Trong ứng dụng có 2 tập tin *.sitemap, Để SiteMapDataSource sử dụng tập tin sitemap nào chúng ta phải cấu hình trong web.config

<system.web>
    <!-- other configuration sections -->
    <siteMap defaultProvider="MenuProvider" >
      <providers>
        <add name="MenuProvider" type="System.Web.XmlSiteMapProvider"  siteMapFile = "HeaderMenu.sitemap" />
        <add name="TreeProvider" type="System.Web.XmlSiteMapProvider"  siteMapFile = "Web.sitemap" />
      </providers>
    </siteMap>    
  </system.web>

Bước 3 : Liên kết SiteMapDataSource với *.sitemap

  • SiteMapDataSource2 của TreeView với web.sitemap

SiteMapDataSource3 của Menu với HeaderMenu.sitemap

Bước 4: Từ thanh ToolBox kéo Menu bỏ vào .master :

Bước 5: Để hiển thị các con của Home, chúng ta nhấp chuột phảivào mục SiteMapDataSource3 dưới menu Home và chọn Properties. Trong hộp thoại Properties chọn thuộc tính ShowStartingNode và chuyển giá trị của nó từ True sang False, các menu con trong Home sẽ hiện ra như sau:


Bước 6 : Chọn Menu control và nhấp chuột phải chọn Properties, thay đổi các thuộc tính sau:

  • Xem mã Menu control trong chế độ Source:
<asp:Menu ID="Menu1" runat="server" BackColor="#FFFBD6" DataSourceID="SiteMapDataSource3" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#990000" Orientation="Horizontal" StaticEnableDefaultPopOutImage="False" StaticSubMenuIndent="10px">
            <DynamicHoverStyle BackColor="#990000" ForeColor="White" />
            <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            <DynamicMenuStyle BackColor="#FFFBD6" />
            <DynamicSelectedStyle BackColor="#FFCC66" />
            <StaticHoverStyle BackColor="#990000" ForeColor="White" />
            <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            <StaticSelectedStyle BackColor="#FFCC66" />
</asp:Menu>

Thực thi trang web cho kết quả: