Thursday, February 9, 2012

Hilighting the current page in an asp.net 3.5 master page

In my project the master page contains a repeater that's used as a menu with an Xml file as the data source for the repeater.
<asp:Repeater ID="Admin_menus" runat="server">
    <HeaderTemplate><div id="navmenu"><ul></HeaderTemplate>
    <FooterTemplate>|</ul></div></FooterTemplate>
    <ItemTemplate>
        |<li>
        <a href="<%# DataBinder.Eval(Container.DataItem, "url")%>" 
           class="link6" id="<%# DataBinder.Eval(Container.DataItem, "id")%>">
               <strong>
                   <%# DataBinder.Eval(Container.DataItem, "title")%>
               </strong> 
        </a>
        </li>
    </ItemTemplate>
</asp:Repeater>
urls in the xml file is as
<menuitems>
    <item id="1" url="Employee.aspx" title="Employee" description="Employee" />
    <item id="2" url="Location.aspx" title="Location"  description="Location" />
</menuitems>
Here I want to change the CSS style of the current page in the menu.

One solution you can opt for is to handle the ItemCreated event of the <asp:Repeater> control. To do this you need to add an event handler:
In the .master markup:

    <asp:Repeater ID="Admin_menus" runat="server" OnItemCreated="Admin_menus_ItemCreated">
        <HeaderTemplate>
            <div id="navmenu">
                <ul>
        </HeaderTemplate>
        <FooterTemplate>
            |</ul></div></FooterTemplate>
        <ItemTemplate>
            |<li runat="server" id="hyperlink"><a href="<%# DataBinder.Eval(Container.DataItem, "url")%>" class="link6" id="<%# DataBinder.Eval(Container.DataItem, "id")%>">
                <strong>
                    <%# DataBinder.Eval(Container.DataItem, "title")%></strong> </a></li>
        </ItemTemplate>
    </asp:Repeater>


In the .master.cs codebehind:
protected void Admin_menus_ItemCreated(object sender, RepeaterItemEventArgs e)
{
    // Ensure that the ItemCreated is not null, the first one (header?) gets 
    // returned null
    if (e.Item.DataItem != null)
    {
        // Extract the "url" attribute from the Xml that's being used for 
        // databinding for this particular row, via casting it down to 
        // IXPathNavigable as the concrete type of e.Item.DataItem isn't available
        // to us.
        var currentUrl = ((IXPathNavigable)e.Item.DataItem).CreateNavigator().GetAttribute("url", "");

        if (Request.Url.PathAndQuery.Contains(currentUrl))
        {
            // This just adds a background color of "red" to the selected 
            // menu item. What you actually do is entirely up to you                
            var hyperlink = (HtmlGenericControl) e.Item.FindControl("hyperlink");
            hyperlink.Style.Add(HtmlTextWriterStyle.BackgroundColor, "red");
        }
    }
}
Note that I've added a runat="server" as well as an id="hyperlink" to the <li> tag in your ItemTemplate so that the code in the ItemCreated handler can find it easily to style it.

Perhaps one solution is to check the current page in your inline Eval code and add the "currentpage" class to the anchor
For simplicity I'm using Eval() instead of DataBinder.Eval()
<asp:Repeater ID="Admin_menus" runat="server">
    <HeaderTemplate>
        <div id="navmenu"><ul>
    </HeaderTemplate>
    <ItemTemplate>
        <li>
            <a href='<%# Eval("url") %>' class='link6<%# Request.RawUrl.EndsWith(Eval("url").ToString()) ? " currentpage" : "" %>' id='<%# Eval("id")%>'><strong><%# Eval("title")%></strong></a>
        </li>
    </ItemTemplate>
    <FooterTemplate>
        </ul></div>
    </FooterTemplate>
</asp:Repeater>
ref : 
http://stackoverflow.com/questions/4969743/hilighting-the-current-page-in-an-asp-net-3-5-master-page

No comments:

Post a Comment