Friday, May 3, 2013

How to Create Header and Footer Using Web User Controls in .net

5 comments
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.

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:
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



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:ContentPlaceHolder id="head" runat="server">
<asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>

3. Add two div tag inside form tag as shown below:

<form id="form1" runat="server">    
   <div></div>
  <div>
 <asp:ContentPlaceHolder id="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:

Add Header on Master Page

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:

Add Footer on Master Page


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:

Create Content Page from Master Page in asp.net

Now you have learnt how to create header, footer, master page and Content page.

Sample code for each page:
Header.ascx sample code:


<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Header.ascx.cs" Inherits="Header" %>
<div style="background:#0094ff;height:100px;"></div>

Footer.ascx Sample Code:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Footer.ascx.cs" Inherits="Footer" %>
<div style="background:#00ff90; height:100px;"></div>

Master Page Sample Code:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<%@ Register src="Header.ascx" tagname="Header" tagprefix="uc1" %>
<%@ Register src="Footer.ascx" tagname="Footer" tagprefix="uc2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
  
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <uc1:Header ID="Header1" runat="server" />
        </div>
    <div>

        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
       
        </asp:ContentPlaceHolder>
    </div>
        <div>
            <uc2:Footer ID="Footer1" runat="server" />
        </div>
    </form>
</body>
</html>

Content Page Sample Code:

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <h1>This is Content Page</h1>
</asp:Content>


  

5 comments:

  1. Couldn't we just select a background color in the DIV tag of the master page itself? or also add any text or controls in the DIV tag of the master page itself. Do we really have to add user controls to the master page? Your reply would be most appreciated. Thanks in advance. :)

    ReplyDelete
    Replies
    1. Never mind. I guess I didn't see the heading of this post correctly...

      Delete
  2. Adding User control for a Multilingual site will be helpful. Just get the text from resource file for any language..

    ReplyDelete
  3. i cant able to drag the header.ascx into the div

    ReplyDelete