Member Avatar for kkemerait

I would like some help with a small issue... I have an html menu that I use on all my web pages, hence it is in my masterpage.master web page. The problem is that when a user clicks a menu choice I need to inject id="current" into the <LI> element... How can I do this?

<div id="header">
  <ul>
  <!-- CSS Tabs -->
    <li><a href="page1.aspx">Admin</a></li>
    <li><a href="page2.aspx">Inventory</a></li>
    <li id="current"><a href="page3.aspx">Other</a></li>

  </ul>
 </div>

So for example when a user clicks the "Admin" item I want to inject the "id="current" into that <li> element and remove it from what ever <li> has it currently.

Thanks in advance

  • 3 Contributors
  • 3 Replies
  • 251 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by sknake
Member Avatar for sknake

First off I think this is a bad idea and it is going to cause problems down the road. Are you trying to assign the id as "current" so you can find the currently selected list item in a content page, or so you can do custom CSS formatting? If so then there is better ways to go about doing this. Changing the control ID like this can cause problems on postbacks and likely with viewstates as well.

However, here is the answer to your question:

Master Page

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="daniweb.web.Site1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Master Page</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <ul>
			<li runat="server" id="liPage1"><a href="page1.aspx">Admin</a></li>
			<li runat="server" id="liPage2"><a href="page2.aspx">Inventory</a></li>
			<li runat="server" id="liPage3"><a href="page3.aspx">Other</a></li>
    </ul>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Master Page code behind

namespace daniweb.web
{
  public partial class Site1 : System.Web.UI.MasterPage
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      liPage1.ID = (this.Page is Page1 ? "current" : "liPage1");
      liPage2.ID = (this.Page is Page2 ? "current" : "liPage2");
      liPage3.ID = (this.Page is Page3 ? "current" : "liPage3");
    }
  }
}

Then I have created 3 content pages from the master, defined as:

public partial class Page1 : System.Web.UI.Page
public partial class Page2 : System.Web.UI.Page
public partial class Page3 : System.Web.UI.Page
Member Avatar for a496761

I'd change your css to have "current" be a class. Then you can add ID and runat attributes to your <li> tags and assign the class to them from the code-behind. Hope that helps?

Member Avatar for sknake

I'd change your css to have "current" be a class. Then you can add ID and runat attributes to your <li> tags and assign the class to them from the code-behind. Hope that helps?

This is what I was referring to in a round about way but an excellent suggestion none the less. This is my recommended approach as well.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.