Click here to Skip to main content
Click here to Skip to main content

Highlighting Current Page in ASP.NET Master Page

, 13 May 2013
Rate this:
Please Sign up or sign in to vote.
How to highlight the current page in ASP.NET master page

Introduction

In this tip, I am going to explore how to highlight the current page in ASP.NET master page. In earlier days, highlighting the current page in HTML, we used to add style class attribute in each page. In ASP.NET master page, it’s very easy to highlight the current page and it makes the developer's life easier. Follow the simple steps to highlight the current page in ASP.NET master page.

Step 1

In the master page, add two image buttons:

<form id="form1" runat="server">
    <div>

    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td><asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/home.gif"
            BorderStyle="None" BorderWidth="0px" EnableViewState="False"
            onclick="ImageButton1_Click" /></td>
            <td><asp:ImageButton ID="ImageButton2"
            runat="server" ImageUrl="~/images/about.gif" BorderStyle="None"
            BorderWidth="0px" EnableViewState="False" onclick="ImageButton2_Click" /></td>
    </tr></table>


        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
    </form>

Step 2

In each content page, add the following code to access the master page controls:

<%@ MasterType VirtualPath=”~/MasterPage.master” %>

Step 3

Let’s add the following code in each content page Page Load to change the images dynamically.

Default.aspx

protected void Page_Load(object sender, EventArgs e)
    {
        ImageButton img = (ImageButton)this.Master.FindControl("ImageButton1");
        img.ImageUrl = "~/images/home-over.gif";

    }

Default2.aspx

protected void Page_Load(object sender, EventArgs e)
    {
        ImageButton img = (ImageButton)this.Master.FindControl("ImageButton2");
        img.ImageUrl = "~/images/about-over.gif";
    }

Look into the below images before applying and after applying the codes.

Before

After

Default.aspx
Default2.aspx

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Ravindra T C
Software Developer L&T IES Mysore
India India
I'm a software developer. I spent most of the time in learning new technologies. I've a keen interest in client-side technologies especially JavaScript and Jquery it is the most beautiful language ever seen.

I like sharing my knowledge and written some non-popular articles. I believe in quality and standards but blames myself for lagging them.

I believe in small things and they makes me happy!

Comments and Discussions

 
Questionnon-pop? PinmemberMember 904013720-May-13 7:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 13 May 2013
Article Copyright 2013 by Ravindra T C
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid