Create user control for the footer of the your web application in asp.net

With the help of the following tutorial, you can create a user control for the footer of your web application. The article demonstrates how you can create a user control and how can you use that. In this article code is written using Visual Studio 2008. So first you need to add a web user control in your project, just follow these instructions:

1. Right click on your visual studio project root and click on ‘Add New Item’.
2. Select the ‘Web User Control’ from the installed templates list and give the name of your control shown as below picture, click ‘OK’.

Create User Control for footer in asp.net
Picture-1

Web user control is the simple html container you can place the set of html. And than you can add that user control in any of the web page in your project.

We will design the above user control as shown in picture 2. But you can do as you wish or as your requirement.

<%@ Control Language="VB" AutoEventWireup="false" 
CodeFile="footer.ascx.vb" Inherits="footer" %>
 
<style type="text/css">
 
#footerdiv {width: 100%;font-family: 'lucida sans', sans-serif;
font-size: 90%;height: 70px;padding: 20px 0 5px 0;
text-align: center;background: #404040 url(../img/footer.png) repeat-x;
color: #A8AA94;margin: 30px 0 0 0;}
#scroll {position: relative;width: 1000px;margin: 0 auto;
         bottom: -17px;right: 0;background: red;padding: 0;}
#scroll a {
float: right;margin: 0 0 0 0;padding: 0 0 0 0;}
#footerdiv a:hover {color: #FFF;text-decoration: none;}
#footerdiv a {color: #FFF;text-decoration: underline;}
#scroll div 
{background-image:url(../img/top.png);width:30px;height:16px;}
 
</style>
 
<div id="scroll">
    <a title="Scroll to the top" class="top" href="#">
        <div alt="top">
        </div>
    </a>
</div>
<div id="footerdiv">
    <p>
    </p>
    <p>
       <a href="">Welcome</a> | <a href="http://www.authorcode.com" 
        target="_blank" tabindex="-1">
            AuthorCode </a>| <a href="http://www.authorcode.com" 
         target="_blank" tabindex="-1">Contact
                Us</a></p>
    <p>
        Copyright XXXX-XX |<span style="font-size: 12px">XYZ Version XXX</span>
    </p>
</div>

footer in asp.net
Picture-2

How to use it

The user controls can’t be run alone, You must add them to web pages in order to use. You can use the above user control in any web page to show the footer in the project. The user control can contain the code as well. The below you can see how to add them in the asp.net web page.

<%@ Page Language="VB" AutoEventWireup="false" 
CodeFile="Default.aspx.vb" Inherits="_Default" %>
 
<%@ Register Src="~/footer.ascx" TagPrefix="uc" TagName="footer" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<html>
<head runat="server">
    <title>Example of the HTML5 color input tag</title>
</head>
<body>
    <form id="form1" runat="server">
    <div style="border: 1px solid #bbb; width: 550px; 
        height: 120px; padding: 20px">
    </div>
    <uc:footer ID="footer1" runat="server" />
    </form>
</body>
</html>

You can also create the user control for the header also… Thanks