Bootstrap 导航栏中的二级菜单显示隐藏链接

Second level menu in Bootstrap navigation bar showing hidden links

提问人:Noobie 提问时间:10/1/2023 更新时间:10/4/2023 访问量:41

问:

我在带有 C# 的 ASP.NET 应用程序中使用 Bootstrap。我有两级菜单,有些选项可供用户使用,有些选项可供管理员使用。母版页中的页面加载决定了在菜单中显示或隐藏链接的选项。它在桌面模式下工作正常,但在移动设备中,它也显示隐藏的链接,这些链接只能显示给管理员。

<ul class="navbar-nav">
    <li class="nav-item active">
        <asp:LinkButton class="nav-link" ID="LinkButton5" runat="server" Visible="false" PostBackUrl="#">Link 01</asp:LinkButton>
    </li>
    <li class="nav-item active">
        <asp:LinkButton class="nav-link" ID="LinkButton6" runat="server" Visible="false" PostBackUrl="#">Link 02</asp:LinkButton>
    </li>
    <li class="nav-item active">
        <asp:LinkButton class="nav-link" ID="LinkButton4" runat="server" Visible="false" PostBackUrl="#">Link 03</asp:LinkButton>
    </li>
    <li class="nav-item active">
        <asp:LinkButton class="nav-link" ID="LinkButton2" runat="server" Visible="false" PostBackUrl="#">Link 04</asp:LinkButton>
    </li>
    <li class="nav-item active">
        <asp:LinkButton class="nav-link" ID="LinkButton7" runat="server" Visible="false" PostBackUrl="#">Link 05</asp:LinkButton>
    </li>
    <li class="nav-item dropdown">
    <a runat="server" class="nav-link dropdown-toggle" href="#" id="dropdown04" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true" Visible="false">Link With Sub Menu</a>
      <div class="dropdown-menu" aria-labelledby="dropdown04">
        <a class="dropdown-item" href="#">Sublink 01</a>
        <a class="dropdown-item" href="#">Sublink 02</a>
        <a class="dropdown-item" href="#">SubLink 03</a>        
      </div>
    </li>
    <li class="nav-item active">
        <asp:LinkButton class="nav-link" ID="LinkButton1" runat="server" Visible="true" PostBackUrl="#">Link 06</asp:LinkButton>
    </li>
    <li class="nav-item active">
        <asp:LinkButton class="nav-link" ID="LinkButton3" runat="server" Visible="False" OnClick="LinkButton3_Click">Link 07</asp:LinkButton>
    </li>                           
</ul>

背后的代码是

if (Session["PersonType"] != null && Session["PersonType"].Equals("Admin"))
{
    LinkButton1.Visible = false;
    LinkButton2.Visible = false;
    dropdown04.Visible = true;
    LinkButton3.Visible = true;
    LinkButton4.Visible = false;
    LinkButton5.Visible = true;
    LinkButton6.Visible = true;
    LinkButton7.Visible = true;
}
else
{
    LinkButton1.Visible = true;
    LinkButton2.Visible = true;
    LinkButton3.Visible = false;
    LinkButton4.Visible = true;
    LinkButton5.Visible = false;
    LinkButton6.Visible = false;
    LinkButton7.Visible = false;
    dropdown04.Visible = false;
}

即使管理员未登录,也会显示 dropdown04 菜单项。但它仅在移动模式下显示,而不在桌面模式下显示。桌面模式工作正常。问题仅在移动模式下出现。

有些人建议将 data-toggle 添加到 data-bs-toggle 并将 data-target 添加到 data-bs-target,但它并没有为我解决问题,而是停止在移动视图中展开菜单。

C# CSS asp.net Bootstrap-5

评论

0赞 Albert D. Kallal 10/1/2023
你有移动网站管理页面吗?(但没有使用它)???只是删除它。如果已发布的代码隐藏在页面加载事件中运行,则这应该有效。您正在运行上述发布的代码的哪个页面事件?(我们假设代码不在页面加载事件的 !isPostBack 代码存根中,而是每次都运行,对吗?
0赞 Noobie 10/2/2023
是的,此代码每次都在页面加载中运行。页面加载没有条件。此代码基本上位于母版页中。

答:

0赞 Noobie 10/4/2023 #1

原始代码具有具有 visible 属性的 a 元素。

<ul class="navbar-nav">
    <li class="nav-item active">
        <asp:LinkButton class="nav-link" ID="LinkButton5" runat="server" Visible="false" PostBackUrl="#">Link 01</asp:LinkButton>
    </li>
    <li class="nav-item active">
        <asp:LinkButton class="nav-link" ID="LinkButton6" runat="server" Visible="false" PostBackUrl="#">Link 02</asp:LinkButton>
    </li>
    <li class="nav-item active">
        <asp:LinkButton class="nav-link" ID="LinkButton4" runat="server" Visible="false" PostBackUrl="#">Link 03</asp:LinkButton>
    </li>
    <li class="nav-item active">
        <asp:LinkButton class="nav-link" ID="LinkButton2" runat="server" Visible="false" PostBackUrl="#">Link 04</asp:LinkButton>
    </li>
    <li class="nav-item active">
        <asp:LinkButton class="nav-link" ID="LinkButton7" runat="server" Visible="false" PostBackUrl="#">Link 05</asp:LinkButton>
    </li>
    <li class="nav-item dropdown">
    <a runat="server" class="nav-link dropdown-toggle" href="#" id="dropdown04" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true" Visible="false">Link With Sub Menu</a>
      <div class="dropdown-menu" aria-labelledby="dropdown04">
        <a class="dropdown-item" href="#">Sublink 01</a>
        <a class="dropdown-item" href="#">Sublink 02</a>
        <a class="dropdown-item" href="#">SubLink 03</a>        
      </div>
    </li>
    <li class="nav-item active">
        <asp:LinkButton class="nav-link" ID="LinkButton1" runat="server" Visible="true" PostBackUrl="#">Link 06</asp:LinkButton>
    </li>
    <li class="nav-item active">
        <asp:LinkButton class="nav-link" ID="LinkButton3" runat="server" Visible="False" OnClick="LinkButton3_Click">Link 07</asp:LinkButton>
    </li>                           
</ul>

经过反复试验,我将 visible 属性放在 li 元素中。并使其运行服务器。到目前为止,它正在工作。

<li class="nav-item dropdown" id="ddropDown04" runat="server" Visible="true">
        <a runat="server" class="nav-link dropdown-toggle" href="#" id="dropdown04" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">Link With Sub Menu</a>
          <div class="dropdown-menu" aria-labelledby="dropdown04">
            <a class="dropdown-item" href="#">Sublink 01</a>
            <a class="dropdown-item" href="#">Sublink 02</a>
            <a class="dropdown-item" href="#">SubLink 03</a>        
          </div>
        </li>

我背后的代码现在更改了 ddropDown04 的可见性。我从元素中删除了可见性元素。