CODEWITHSUNDEEP
htmlcssasp.netmaster-pagesnav
Barry Michael Doyle
Barry Michael Doyle

Reputation: 10598

ASP.NET Masterpage nav current page Css

I am trying to set the background color of the LinkButton in my nav bar according to what page is currently displayed. I'd like it to be orange if on that page and black if not.

I have this for now:

<nav>
    <asp:LinkButton ID="lnkB1TSUser" runat="server" OnClick="lnkB1TSUser_Click">B1TS User</asp:LinkButton>
    <asp:LinkButton ID="lnkClient" runat="server" OnClick="lnkClient_Click">Client</asp:LinkButton>
    <asp:LinkButton ID="lnkUserClient" runat="server" OnClick="lnkUserClient_Click">User Client</asp:LinkButton>
</nav>

I know how to do CSS in general but I have no idea how to set the specific page that I'm on to have the background.

If I made two CSS classes active and inactive:

.active {
  background-color: orange;
}
.inactive {
  background-color: black;
}

Would that help me to implement this? It would just be really great if I could highlight (in orange) the page that I'm actively on. And I have no idea how to do this with master pages. Help would be very much appreciated.

At the moment the onclick event is just for navigating between pages.

Upvotes: 0

Views: 116

Answers (1)

Protector one
Protector one

Reputation: 7261

I'm not a big fan of putting styling in code, but I think you have no choice except using server-side code or Javascript. Here's how to do it with C# server-side code, using LinkButton's CommandArgument to store the page's name:

<nav>
    <asp:LinkButton CommandArgument="page.aspx" ID="lnkB1TSUser" runat="server" OnClick="lnkB1TSUser_Click">B1TS User</asp:LinkButton>
    <asp:LinkButton CommandArgument="page2.aspx" ID="lnkClient" runat="server" OnClick="lnkClient_Click">Client</asp:LinkButton>
    <asp:LinkButton CommandArgument="page3.aspx" ID="lnkUserClient" runat="server" OnClick="lnkUserClient_Click">User Client</asp:LinkButton>
</nav>
<%
    foreach(var control in new LinkButton[] { lnkB1TSUser, lnkClient, lnkUserClient })
    {
        if (HttpContext.Current.Request.Url.AbsolutePath.EndsWith(control.CommandArgument))
            control.ForeColor = System.Drawing.Color.Orange;
    }
%>

Upvotes: 1

Related Questions