为什么当我使用runat="；服务器”；在无序列表中

本文关键字：服务器 无序 列表 quot runat 为什么 | 更新日期: 2023-09-27 18:26:35

当管理员登录导航部分时，我要做的是使列表项可见。我无法使用AD，所以我可以使用角色，所以我使用SQL server来控制哪些用户可以访问什么。我找到了一种方法，可以在管理员登录后使列表项可见，但要做到这一点，我必须在无序列表中使用runat="server"。一旦我使用了这个，我用于导航的css格式就不再存在了。我如何才能解决这个问题并实现我想要做的事情？这是我在母版页中的代码。。

<section runat="server" id="login">
   <asp:LoginView id="loginview" runat="server" ViewStateMode="Disabled">
      <LoggedInTemplate>
         <p id="paragraph">
            Welcome,
            <asp:LoginName ID="loginName" runat="server" CssClass="username" />
            </a>!
            <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/Account/Login.aspx" />
            <ul runat="server" id="menu">
               <li><a href="~/Dashboard.aspx">Dashboard</a></li>
               <li><a runat="server" href="~/DeliveredDeals.aspx">Delivered Deals</a></li>
               <li><a runat="server" href="~/DealTracking.aspx">Deal Tracking</a></li>
               <li><a runat="server" id="allUsers" href="~/Users.aspx" visible="false">Users</a></li>
            </ul>
         </p>
      </LoggedInTemplate>
   </asp:LoginView>
</section>

我就是这样设置的。一旦我从<ul>中删除了runat="server"，我就无法再查看新的列表项（allUsers），但格式又回来了。欢迎提出任何建议。谢谢你。

这是css。。

/* login
----------------------------------------------------------*/
#login {
    display: block;
    font-size: .85em;
    margin: 0 0 10px;
    text-align: right;
}
    #login a {
        background-color: #d3dce0;
        margin-left: 10px;
        margin-right: 3px;
        padding: 2px 3px;
        text-decoration: none;
    }
    #login a.username {
        background: none;
        margin-left: 0px;
        text-decoration: underline;
    }
    #login ul {
        margin: 0;
    }
    #login li {
        display: inline;
        list-style: none;
    }

/* menu
----------------------------------------------------------*/
ul#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: right;
}
    ul#menu li {
        display: inline;
        list-style: none;
        padding-left: 15px;
    }
        ul#menu li a {
            background: none;
            color: #999;
            text-decoration: none;
        }
        ul#menu li a:hover {
            color: #333;
            text-decoration: none
        }

为什么当我使用runat="；服务器”；在无序列表中

由于使用runat="server"，ID将通过ASP.NET进行修改，从而导致css问题。您应该将ul更改为使用类，而不是根据id对其进行样式设置。

<ul runat="server" class="menu">
    <!--Html-->
</ul>

Css:

/* menu
----------------------------------------------------------*/
 ul.menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: right;
}
ul.menu li {
    display: inline;
    list-style: none;
    padding-left: 15px;
}
ul.menu li a {
    background: none;
    color: #999;
    text-decoration: none;
}
ul.menu li a:hover {
    color: #333;
    text-decoration: none
}

如果您添加runat="server"，ASP.NET将为您的ID添加前缀，这很可能会破坏CSS

例如：

如果您将元素放置在<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server"><asp:Content> 中

将<ul runat="server" id="menu">更改为<ul id="MainContent_menu">

因此，请检查页面来源，然后调整CSS。

您也可以考虑使用css类来代替和ID。然后，您就不必担心.NET会动态地将名称添加到元素的样式设置部分，从而使css更容易处理。

换句话说，应该是这样的：

<ul runat="server" class="menu">
    <li>lorem ipsum</li>
</ul>
相关文章：