Question

I am trying to put CssClass to a link Button of Navigation Menu.
It is because when i click on to the link Button it sets its class to active.
Here I got error creating controls.

<div class="navigation">
<ul>
<li class="homenavBt">
<asp:LinkButton ID="LinkHome" runat="server" <% If Session("Page")="Home" Then %> CssClass="active" <% End If %> >Home</asp:LinkButton></li>
<li class="newsBt">
<asp:LinkButton ID="LinkNews" runat="server"  <% If Session("Page")="News" Then %> CssClass="active" <% End If %> >News</asp:LinkButton></li>
<li class="sportsbt">
<asp:LinkButton ID="LinkSports" runat="server"  <% If Session("Page")="Sports" Then %> CssClass="active" <% End If %> >Sports</asp:LinkButton></li>
<li class="glamournavBt">
<asp:LinkButton ID="LinkArticle" runat="server"  <% If Session("Page")="Article" Then %> CssClass="active" <% End If %> >Article</asp:LinkButton></li>
<li class="technav_bt">
<asp:LinkButton ID="LinkGallery" runat="server"  <% If Session("Page")="Gallery" Then %> CssClass="active" <% End If %>>Gallery</asp:LinkButton></li>
</ul>
</div>

When i click on the link Button i need to set Session for respective pages, just like below.

Protected Sub LinkNews_Click(sender As Object, e As EventArgs) Handles LinkNews.Click
        Session("Page")="News"
End Sub

Please comment if something is not cleared
Thanks!!

Answer 1

The reason you’re having this problem is that you can’t put in-line code into controls with runat=”server”, unless you use the data binding syntax: <%# …%>, and call DataBind() from your code.

Well, here’s how you could possibly do it, using your code behind (in C#):

protected void Page_Load(object sender, EventArgs e)
{
    CheckPage();
}

private void CheckPage()
{
    if (Session["Page"] as string == "News")
        LinkNews.CssClass = "active";
    else
        LinkNews.CssClass = String.Empty;
}

protected void LinkNews_Click(object sender, EventArgs e)
{
    Session["Page"] = "News";
    CheckPage();
}

…in which case you wouldn’t specify a CSS class in your markup:

<div class="navigation">
<ul>
<li class="homenavBt">
<asp:LinkButton ID="LinkHome" runat="server">Home</asp:LinkButton></li>
<li class="newsBt">
<asp:LinkButton ID="LinkNews" runat="server">News</asp:LinkButton></li>
<li class="sportsbt">
<asp:LinkButton ID="LinkSports" runat="server">Sports</asp:LinkButton></li>
<li class="glamournavBt">
<asp:LinkButton ID="LinkArticle" runat="server">Article</asp:LinkButton></li>
<li class="technav_bt">
<asp:LinkButton ID="LinkGallery" runat="server">Gallery</asp:LinkButton></li>
</ul>
</div>

If you want to use the binding technique, it might look something like this (again C#):

<asp:LinkButton ID="LinkNews" runat="server" CssClass='<%# Session["Page"] as string == "News" ? "active" : "" %>'>News</asp:LinkButton>

… and you will have to call DataBind() from your code, instead of CheckPage() (in my previous example).