Asp.net菜单控件实例(兼容IE7,IE8,Chrome,Firefox)

时间:2009-12-21 11:47来源:未知作者:admin 点击: 次

分享到：

本文介绍的菜单控件采用的css 和ul list来显示菜单，生成的html小，无需javascript支持，对大部分的浏览器都支持，除ie6要单独修改css也可以使其支持。通过本文可以了解asp.net 控件的开发

本文介绍的菜单控件采用的css 和ul list来显示菜单，生成的html小，无需javascript支持，对大部分的浏览器都支持，除ie6要单独修改css也可以使其支持。

通过本文可以了解asp.net 控件的开发，及Composite设计模式的实际运用。

采用Composite设计模式设计菜单类：

MenuCompositeitem类

namespace Ruinet.Controls
{
  [Serializable()]
  public class MenuCompositeItem
  {
    private List<MenuCompositeItem> _children = new List<MenuCompositeItem>();
    private string _text;
    private string _link;
    private string _target;

    /// <summary>
    /// 菜单项
    /// </summary>
    /// <param name="text">菜单名</param>
    /// <param name="link">链接</param>
    public MenuCompositeItem(string text, string link)
    {
      this._text = text;
      this._link = link;
    }
    /// <summary>
    /// 菜单项
    /// </summary>
    /// <param name="text">菜单名</param>
    /// <param name="link">链接</param>
    /// <param name="target">跳转目标</param>
    public MenuCompositeItem(string text, string link, string target)
    {
      this._text = text;
      this._link = link;
      this._target = target;
    }

    /// <summary>
    /// 设置或获取菜单名
    /// </summary>
    public string Text
    {
      get { return _text; }
      set { _text = value; }
    }

    /// <summary>
    /// 设置或获取链接
    /// </summary>
    public string Link
    {
      get { return _link; }
      set { _link = value; }
    }
    /// <summary>
    /// 跳转目标
    /// </summary>
    public string Target
    {
      get { return _target; }
      set { _target=value; }
    }

    /// <summary>
    /// 设置或获取子菜单
    /// </summary>
    public List<MenuCompositeItem> Children
    {
      get { return _children; }
      set { _children = value; }
    }
  }

MenuComposite类

namespace Ruinet.Controls
{
  [DefaultProperty("Menu")]
  [ToolboxData("<{0}:MenuComposite runat=server></{0}:MenuComposite>")]
  public class MenuComposite : WebControl
  {
    /// <summary>
    /// 设置获取选择的菜单
    /// </summary>
    [Bindable(true)]
    [DefaultValue("")]
    [Localizable(true)]
    public string SelectedMenuText
    {
      get
      {
        String s = (String)ViewState["SelectedMenuText"];
        return ((s == null) ? String.Empty : s);
      }

      set
      {
        ViewState["SelectedMenuText"] = value;
      }
    }

    /// <summary>
    /// 获取和设置菜单项从ViewState
    /// </summary>
    [Bindable(true)]
    [DefaultValue(null)]
    [Localizable(true)]
    public MenuCompositeItem MenuItems
    {
      get
      {
        return ViewState["MenuItems"] as MenuCompositeItem;
      }

      set
      {
        ViewState["MenuItems"] = value;
      }
    }

    /// <summary>
    /// 呈现菜单结构
    /// </summary>
    /// <param name="output">HTML输出流</param>
    protected override void RenderContents(HtmlTextWriter output)
    {
      MenuCompositeItem root = this.MenuItems;

      output.Write(@"<div class=""navmenu"">");
      output.Write(@"    <ul>");

      for (int i = 0; i < root.Children.Count; i++)
      {
        RecursiveRender(output, root.Children[i]);
      }
      output.Write(@"    </ul>");
      output.Write(@"</div>");
    }

    /// <summary>
    /// 递归输出菜单项
    /// </summary>
    /// <param name="output">HTML输出流</param>
    /// <param name="item">菜单项.</param>
    /// <param name="depth">Indentation depth.</param>
    private void RecursiveRender(HtmlTextWriter output, MenuCompositeItem item)
    {
      output.Write("<li>");
      if (string.IsNullOrEmpty(item.Target))//为空不设置跳转目标
      {
        output.Write(@"<a href=""" + item.Link + @""">");
      }
      else
      {
        output.Write(@"<a href=""" + item.Link + @""" target= """ + item.Target + @""">");
      }
      if (item.Text == SelectedMenuText)  //选中的菜单
      {
        output.Write(@"<span class=""selected"">");
        output.WriteLine(item.Text);
        output.WriteLine("</span>");
      }
      else
      {
        output.Write(item.Text);
      }

      output.Write("</a>");

      if (item.Children.Count > 0)
      {
        output.WriteLine();
        output.Write("<ul>");
        for (int i = 0; i < item.Children.Count; i++)
        {
          RecursiveRender(output, item.Children[i]);
        }
        output.Write("</ul>");
      }
      output.Write("</li>");
    }
  }
}

在页面中使用

添加对控件的引用后就可以直接在“工具箱”-》Controls组件中看到MenuComposite组件

再就可以像其他asp.net 控件一样使用

使用：

MenuCompositeItem root = new MenuCompositeItem("root", null);
    MenuCompositeItem menu01 = new MenuCompositeItem("menu01", ResolveUrl("~/Default.aspx"));
    MenuCompositeItem menu02 = new MenuCompositeItem("menu02", ResolveUrl("~/Default.aspx"));
    MenuCompositeItem menu03 = new MenuCompositeItem("menu03", ResolveUrl("~/Default.aspx"));
    MenuCompositeItem menu04 = new MenuCompositeItem("menu04", ResolveUrl("~/Page04.aspx"));
    MenuCompositeItem menu05 = new MenuCompositeItem("menu05", ResolveUrl("~/Default.aspx"));

    MenuCompositeItem menu01_01 = new MenuCompositeItem("menu01-01", ResolveUrl("~/Default.aspx"));
    MenuCompositeItem menu01_02 = new MenuCompositeItem("menu01-02", ResolveUrl("~/Page01-02.aspx"));
    MenuCompositeItem menu01_03 = new MenuCompositeItem("menu01-03", ResolveUrl("~/Default.aspx"));
    MenuCompositeItem menu01_04 = new MenuCompositeItem("menu01-04", ResolveUrl("~/Default.aspx"));
    menu01.Children.Add(menu01_01);
    menu01.Children.Add(menu01_02);
    menu01.Children.Add(menu01_03);
    menu01.Children.Add(menu01_04);

    MenuCompositeItem menu02_01 = new MenuCompositeItem("menu02-01", ResolveUrl("~/Default.aspx"));
    MenuCompositeItem menu02_02 = new MenuCompositeItem("menu02-02", ResolveUrl("~/Default.aspx"), "menu02-02");
    menu02.Children.Add(menu02_01);
    menu02.Children.Add(menu02_02);

    MenuCompositeItem menu04_01 = new MenuCompositeItem("menu04-01", ResolveUrl("~/Default.aspx"));
    MenuCompositeItem menu04_02 = new MenuCompositeItem("menu04-02", ResolveUrl("~/Page04-02.aspx"), "_blank");
    menu04.Children.Add(menu04_01);
    menu04.Children.Add(menu04_02);

    root.Children.Add(menu01);
    root.Children.Add(menu02);
    root.Children.Add(menu03);
    root.Children.Add(menu04);
    root.Children.Add(menu05);

    TheMenuComposite.MenuItems = root;

此时生成的编译运行后会生成一个没有样式Ul list ,效果如下：

上一篇：asp.net的*.ashx类型文件有什么作用? *.ashx使用方法
下一篇：MVC编程之ASP.NET MVC中对表记录通用的增删改操作方案

分享到： QQ空间新浪微博人人网开心网更多

精彩图集

精彩文章

热点文章

Asp.net菜单控件实例(兼容IE7,IE8,Chrome,Firefox)

热门标签

赞助商链接