locked
Dynamic tabs menu RRS feed

  • Question

  • User258606273 posted

     Hello again,

     I'm creating a tab menu for my page.

    Now it gets information about menu elements and links from the database and I use Repeater for showing it:

     

    But how to create something like this?

     

    I would like to create only one menu element with "active" css tag, and other wihout it. How to find, which page is active now? I thought about adding to database another column, with the filename of file that is linked...

    But how to get filename of the active file and integrate it with repeater? Or maybe there's another solution for creating dynamic menu...?

     

     

    Monday, December 22, 2008 5:16 PM

Answers

  • User1564875471 posted

     Try this :

    <asp:Repeater ID="Repeater1" runat="server" DataSourceID="LokalnaBaza" OnItemDataBound="Repeater1_ItemDataBound">
    <ItemTemplate>
    <li id="li1" runat="server">
    <asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl='<%# Eval("MenuLink") %>'><%# Eval("MenuTitle") %>
    </asp:HyperLink>
    </li>
    </ItemTemplate>
    </asp:Repeater>
      
    protected void  Repeater1_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item) {
            string TabPageName = DataBinder.Eval(e.Item.DataItem, "MenuLink").ToString();
            HtmlGenericControl li1 = (HtmlGenericControl)e.Item.FindControl("li1");
            if ((IsTabEqualCurrentUrl(TabPageName))) {
                li1.Attributes["class"] = "page_item current_page_item";
            }
            else {
                li1.Attributes["class"] = "page_item page-item-2";
            }
        }
    }

    private bool IsTabEqualCurrentUrl(string TabPageName)
    {
        string CurrentPage = Request.Url.Segments[Request.Url.Segments.Length - 1];
        if (CurrentPage.ToLower() == TabPageName.ToLower()) {
            return true;
        }
       
        return false;
    }
     
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 23, 2008 10:08 AM

All replies

  • User1564875471 posted

     Yes , i think you need to link the each tab with the url that represents it.

    After I think you just need to store the actual page name in each tab  e.g : forum.aspx , and in the repeater ItemDataBound event , you can get the page name from the current request like this :

    string PageName=Request.Url.Segments(Request.Url.Segments.Length - 1)

    So for example : if the requested URL is :http://localhost/Main/Forums.aspx?group=4

    Then the mentioned code will return just Forums.aspx , then you can compare the current bounded row url with that url and if there are equal , you can change the CssClass of the Current repeater Item .

    Monday, December 22, 2008 6:04 PM
  • User258606273 posted

    string PageName=Request.Url.Segments(Request.Url.Segments.Length - 1);

     

     

     When I try to use this I get following error:

    Error    6    Non-invocable member 'System.Uri.Segments' cannot be used like a method.

     

    So for example : if the requested URL is :http://localhost/Main/Forums.aspx?group=4

    Then the mentioned code will return just Forums.aspx , then you can compare the current bounded row url with that url and if there are equal , you can change the CssClass of the Current repeater Item .

     

    How to do it? I thought about using Literal object with the style for menu item...


     

    Tuesday, December 23, 2008 8:26 AM
  • User1564875471 posted

     

    When I try to use this I get following error:

    Error    6    Non-invocable member 'System.Uri.Segments' cannot be used like a method.

    That's code in VB , for C#  you need this :

    string PageName=Request.Url.Segments[Request.Url.Segments.Length - 1];

    How to do it? I thought about using Literal object with the style for menu item...

    Show the code please

    Tuesday, December 23, 2008 8:29 AM
  • User258606273 posted

    Show the code please

     

     

    I have repeater:

     <asp:Repeater ID="Repeater1" runat="server" DataSourceID="LokalnaBaza" onitemdatabound="Repeater1_ItemDataBound">
    <ItemTemplate>
    <asp:Literal ID="StylMenu" runat="server"></asp:Literal>
    <asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl='<%# Eval("MenuLink") %>'><%# Eval("MenuTitle") %>
    </asp:HyperLink></li>
    </ItemTemplate>
    </asp:Repeater><asp:repeater id="<span" class="st"><itemtemplate><asp:hyperlink id="<span" class="st"></asp:hyperlink></itemtemplate></asp:repeater>
    And I would like to place:
    <li class="page_item current_page_item"> - for active page
    <li class="page_item page-item-2"> - for inactive page
    I have this, too:
            protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
    string PageName = Request.Url.Segments[Request.Url.Segments.Length - 1];
    Literal Styl = FindControl("StylMenu");
    Styl.Text = "<li class=\"page_item page-item-2\">";
    }
    It's for testing purposes... 
     

     

    Tuesday, December 23, 2008 9:09 AM
  • User1564875471 posted

     Try this :

    <asp:Repeater ID="Repeater1" runat="server" DataSourceID="LokalnaBaza" OnItemDataBound="Repeater1_ItemDataBound">
    <ItemTemplate>
    <li id="li1" runat="server">
    <asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl='<%# Eval("MenuLink") %>'><%# Eval("MenuTitle") %>
    </asp:HyperLink>
    </li>
    </ItemTemplate>
    </asp:Repeater>
      
    protected void  Repeater1_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item) {
            string TabPageName = DataBinder.Eval(e.Item.DataItem, "MenuLink").ToString();
            HtmlGenericControl li1 = (HtmlGenericControl)e.Item.FindControl("li1");
            if ((IsTabEqualCurrentUrl(TabPageName))) {
                li1.Attributes["class"] = "page_item current_page_item";
            }
            else {
                li1.Attributes["class"] = "page_item page-item-2";
            }
        }
    }

    private bool IsTabEqualCurrentUrl(string TabPageName)
    {
        string CurrentPage = Request.Url.Segments[Request.Url.Segments.Length - 1];
        if (CurrentPage.ToLower() == TabPageName.ToLower()) {
            return true;
        }
       
        return false;
    }
     
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 23, 2008 10:08 AM
  • User258606273 posted

     Thank you for help. [:)]

    Tuesday, December 23, 2008 10:34 AM