Tuvian : Discussion forum for ASP.Net,C#,Ajax,JQuery,JavaScript,HTML,CSS..

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";
}