In this article we will study how to create header and footer and using both on the master page. In this article sample code is written using Visual Studio 2012 but it is also applicable to previous versions of vs as well.
![Add Header on Master Page]( "Add Header on Master Page")
![Add Footer on Master Page]( "Add Footer on Master Page")
![Create Content Page from Master Page in asp.net]( "Create Content Page from Master Page in asp.net")
Header and Footer for asp.net website can be added using Master Page(extension .master) and User Controls(extension .ascx). This process is useful if you are building website where the Site Header and Footer part content is same throughout the website.
In visual studio header and footer of the website can be created using User Control.
Let us first discus what are User Control in ASP.Net?
1. User control is container for html as well as code but it can’t run individually. You must add them to web pages in order to use.
2. Namespace for user control is System.Web.UI.UserControl.
3. User Controls have extension .ascx.
4.User Controls use directive @Control on the top of the page.
Creating Header and Footer:
Let us move on creating header and footer for website. For this purpose we need two user control i.e. one for Header part and second for footer.
Before Creating header and footer add a new website using visual studio.
Steps to Create Header using User Control:
Steps to Create Header using User Control:
1. Right Click on Website in Solution ExplorerWindow in Visual Studio.
2. Then goto Add->AddNewItem or use keyboard shortcut ctrl+shift+A.
3. In Add New Item window selected your preferred language either visual basic or visual C#.
4. Then select web User Control type the name for the control as we are creating header so I named it Header.ascx as shown in picture below:
![Add web user control in vs 2012]( "Add web user control in vs 2012")
Steps to Create Footer in asp.net Web User Control:
1. Right Click on Website in Solution Explorer Window in Visual Studio.
2. Then goto Add->AddNewItem or use keyboard shortcut ctrl+shift+A.
3. In Add New Item window select your preferred language either visual basic or visual C#.
4. Then select web User Control type the name for the control as we are creating footer so I named it Footer.ascx.
Next to use header.ascx and footer.ascx we will create master page and add both of them on Master page.
To create Master Page follow these steps:
1. Right Click on website and then goto Add->AddNewItem.
2. Now Select MasterPage template and click on Ok.
Next we will add Header.ascx and Footer.ascx on MasterPage.master.
Remove this html code from <head> tag of master page:
<asp:ContentPlaceHolderid="head"runat="server">
<asp:ContentPlaceHolderid="head"runat="server">
</asp:ContentPlaceHolder>
3. Add two div tag inside form tag as shown below:
<formid="form1"runat="server">
<div></div>
<div>
<asp:ContentPlaceHolderid="ContentPlaceHolder1"runat="server">
</asp:ContentPlaceHolder>
</div>
<div></div>
</form>
4. Click on the Design view of the Page.
5. Select the first div in the design view from solution explorer drag the first div and leave inside this div as shown in picture below:
6. Now Select the last div leave the second div as it is for adding the content page. Drag Footer.ascx and drop in the third div as shown below:
7.We added header and footer now we will create content page.
8. Right Click on second div on master page design view and click on AddContentPage as shown below:
Now you have learnt how to create header, footer, master page and Content page.
Sample code for each page:
Header.ascx sample code:
<%@ControlLanguage="C#"AutoEventWireup="true"CodeFile="Header.ascx.cs"Inherits="Header"%>
<divstyle="background:#0094ff;height:100px;"></div>
Footer.ascx Sample Code:
<%@ControlLanguage="C#"AutoEventWireup="true"CodeFile="Footer.ascx.cs"Inherits="Footer"%>
<divstyle="background:#00ff90; height:100px;"></div>
Master Page Sample Code:
<%@MasterLanguage="C#"AutoEventWireup="true"CodeFile="MasterPage.master.cs"Inherits="MasterPage"%>
<%@Registersrc="Header.ascx"tagname="Header"tagprefix="uc1"%>
<%@Registersrc="Footer.ascx"tagname="Footer"tagprefix="uc2"%>
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
</head>
<body>
<formid="form1"runat="server">
<div>
<uc1:HeaderID="Header1"runat="server"/>
</div>
<div>
<asp:ContentPlaceHolderid="ContentPlaceHolder1"runat="server">
</asp:ContentPlaceHolder>
</div>
<div>
<uc2:FooterID="Footer1"runat="server"/>
</div>
</form>
</body>
</html>
Content Page Sample Code:
<%@PageTitle=""Language="C#"MasterPageFile="~/MasterPage.master"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>
<asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server">
<h1>This is Content Page</h1>
</asp:Content>