如何在 asp.net webforms 中激活当前菜单项答案

【问题标题】：How do I make current menu item active in asp.net webforms如何在 asp.net webforms 中激活当前菜单项
【发布时间】：2015-11-12 02:45:22
【问题描述】：

我正在使用 asp.net web 用户控件将我的菜单代码全部放在一个地方，但是我有一个问题，我不知道如何告诉它将活动的 css 类附加到当前页面的菜单项。

<ul class="sidebar-menu">
        <li class="header">MAIN NAVIGATION</li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-dashboard"></i> <span>Soccer Managment</span> <i class="fa fa-angle-left pull-right"></i>
          </a>
          <ul class="treeview-menu">
            <li><a href="~/BackDoor/players/default.aspx?teamId=00000000-0000-0000-0000-000000000000&id=00000000-0000-0000-0000-000000000000" runat="server"><i class="fa fa-circle-o"></i> Players</a>
                   <li><a href="~/BackDoor/teams/default.aspx" runat="server"><i class="fa fa-circle-o"></i>Teams</a></li>                    
             <li><a href="~/BackDoor/districts/default.aspx" runat="server"><i class="fa fa-circle-o"></i> Districts</a></li>
                <li><a href="~/BackDoor/points/default.aspx" runat="server"><i class="fa fa-circle-o"></i> Players Points</a></li>


            </li>
           </ul>
        </li>

例如，我使用的是 admin lte 主题，它对主要项目和子菜单项执行以下方式

 <li class="treeview active">
          <a href="#">
            <i class="fa fa-folder"></i> <span>Examples</span>
            <i class="fa fa-angle-left pull-right"></i>
          </a>
          <ul class="treeview-menu">
            <li><a href="invoice.html"><i class="fa fa-circle-o"></i> Invoice</a></li>
            <li><a href="profile.html"><i class="fa fa-circle-o"></i> Profile</a></li>
            <li><a href="login.html"><i class="fa fa-circle-o"></i> Login</a></li>
            <li><a href="register.html"><i class="fa fa-circle-o"></i> Register</a></li>
            <li><a href="lockscreen.html"><i class="fa fa-circle-o"></i> Lockscreen</a></li>
            <li><a href="404.html"><i class="fa fa-circle-o"></i> 404 Error</a></li>
            <li><a href="500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
            <li class="active"><a href="blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>
          </ul>
        </li>

【问题讨论】：

标签： c# css asp.net webforms webusercontrol

【解决方案1】：

如果你在谈论服务器端，你应该向你的控件和方法添加属性来检测它是否是指定的页面

    public string CurrentPageName { get; set; }

    public string IsCurrentPage(string itemName)
    {
        return CurrentPageName == itemName ? "class='active'" : string.Empty;
    }

并在页面上以这种方式声明控制

    <uc:YourMenuControl runat="server" CurrentPageName="Your Current Page" />

并更新您的 li 项目，例如

    <li <%= IsCurrentPage("500.html")  %>><a href="500.html"><i class="fa fa-circle-o"></i> 500 Error</a></li>
    <li <%= IsCurrentPage("blank.html")  %>><a href="blank.html"><i class="fa fa-circle-o"></i> Blank Page</a></li>

如果你可以使用服务器控件，你可以用稍微不同的方式制作它，在集合中设置你的 li 项目并将其添加到你的服务器控件

    <ul class="treeview-menu" runat="server" id="myMenu"></ul>

控制代码隐藏，这里我们在代码隐藏中设置 CurrentPageName 的值

    protected void Page_Load(object sender, EventArgs e)
    {
        CurrentPageName = "blank.html";
        var menuItemsList = new Dictionary<string, string>()
        {
            {"invoice.html", " Lockscreen"},
            {"lockscreen.html", " Lockscreen"},
            {"blank.html", " Blank"}
        };

        foreach (var item in menuItemsList)
        {
            HtmlGenericControl li = new HtmlGenericControl("li");
            HtmlGenericControl ianchor = new HtmlGenericControl("a");
            ianchor.Attributes.Add("href", item.Key);
            if (CurrentPageName == item.Key)
            {
                ianchor.Attributes.Add("class", "active");
            }

            HtmlGenericControl i = new HtmlGenericControl("i");
            i.Attributes.Add("class", "fa fa-circle-o");
            ianchor.InnerText = item.Value;
            ianchor.Controls.AddAt(0, i);
            li.Controls.Add(ianchor);
            myMenu.Controls.Add(li);
        }
    }

【讨论】：

感谢您提供非常深入的回答；）我将实施它，谢谢伙计
问题 mymenu 参考是我用 lisa 创建菜单项的原因？

【解决方案2】：

在 *.aspx 页面顶部查找页面标题。在此处替换 - Page.Title==“关于”。您必须设置页面标题而不是 About。

<li class="<%:Page.Title=="About"?"active":""%>">
    <a runat="server" href="~/About.aspx">About</a>
</li>

这是简单的三元运算符。表示如果 Page.Title 等于 About 则 class= 活动，否则 class= 空。

【讨论】：

【解决方案3】：

您可以设置 StaticSelectedStyle 或遍历所有菜单项以查找包含 URL 的菜单项，并将菜单项 selected 属性设置为 true，如 SO Post 中所建议的那样

【讨论】：