Home > DotNet > How to change master page navigation style from aspx page?

How to change master page navigation style from aspx page?


How to include site navigation in master page?

A Master page in most of the ASP.Net applications conatin common contents in the site like header,footer,left menus etc.. But some of the time we need to communicate with master page content from aspx page for changing style, displaying current user details etc. 

Here we are explaining how to change navigation div style in masterpage from the aspx page as per the page visits. Here we are having navigation divs Home,AboutUS,ContatcUS etc.. All this divs are in the master page. All the div background color is white and once we visited the particular page we need to set curresponding navigation div background color to blue. The steps explaining also how to access master page control from aspx page.

 Steps to change style of master page from aspx page 

Step 1 : For first step creating a master page with common header contents with navigations divs. Like below mentioned image, we have created 4 divs and back ground color is gray, and active page has background color is blue. CSS for menu and active menu is also given below. 

ASPX page 

<div class='<%= HomeMenu %>'>
                    <div style="margin-top: 3px;">
                        <a href="Home.aspx”">Home</a></div>
                </div>
                <div class='<%= ShopeMenu %>'>
                    <div style="margin-top: 3px;">
                        <a href="Products.aspx">Shope</a></div>
                </div>
                <div class='<%= ContactUsMenu %>'>
                    <div style="margin-top: 3px;">
                        <a href="ContactUs.aspx">Contact Us</a></div>
                </div>
                <div class='<%= AboutUsMenu %>'>
                    <div style="margin-top: 3px;">
                        <a href="AboutUs.aspx">About Us</a></div>
                </div> 

CSS Style 

.menubutton
{
background-color:#f2f2f2;
}
.menubuttonselect
{
background-color:#507cd1;
}
 

Step2 : Creating properties for each div navigation menu for style. 

private string _homeMenu = "menubutton";
        public string HomeMenu
        {
            get { return _homeMenu; }
            set { _homeMenu = value; }
        }

        private string _shopeMenu = "menubutton";
        public string ShopeMenu
        {
            get { return _shopeMenu; }
            set { _shopeMenu = value; }
        }

        private string _contactUsMenu = "menubutton";
        public string ContactUsMenu
        {
            get { return _contactUsMenu; }
            set { _contactUsMenu = value; }
        }

        private string _aboutUsMenu = "menubutton";
        public string AboutUsMenu
        {
            get { return _aboutUsMenu; }
            set { _aboutUsMenu = value; }
        }
 

Step 3 :

 In load event of every aspx page, we need to set active menu property of the master page as per the browsing page. Suppose when a user browses contact us page we need to set ‘ContactUsMenu’ to active class from the aspx page. 

protected void Page_Load(object sender, EventArgs e)
{ 
 Master.ContactUsMenu = "menubuttonselect";
}
  1. Mangesh
    March 28, 2013 at 2:33 pm

    Hi Tuvian,

    Thanks for such a nice post above. I did understand the logic yet i was not able to get it to work. I really need your help on this.
    I had 2 Questions :
    1) Where do i put the Step 2 code ? Should i put it in masterpage.cs file? Do i have to put it in Page_Load function in masterpage.cs?

    2) I am not able to find ContactUsMenu in Master.ContactUsMenu = “menubuttonselect”;
    It is giving error.

    Please help as i am quite naive with .net

  1. June 18, 2011 at 7:10 pm
    Luggage Xyz Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: