如何在 asp.net 网络表单中激活当前菜单项

Question

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

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

Answer 1

您可以设置 StaticSelectedStyle 或遍历所有菜单项以找到包含 URL 的菜单项并选中菜单项属性按照此 SO Post

中的建议为真

Answer 2

如果您谈论的是服务器端，您应该将属性添加到您的控件和方法中以检测它是否是指定页面

    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);
        }
    }

Answer 3

Find Page Title at the top of your *.aspx page. Replace here - Page.Title=="About". You have to set your page title instead of About.

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

It's Simple ternary operator. Represents if Page.Title is equal to About then class = active else class = empty.

如何在 asp.net 网络表单中激活当前菜单项

How do I make current menu item active in asp.net webforms

css

c#

asp.net

webforms

webusercontrol