Facebook Like Header User Control using Asp.net for Social networking website

Home » Asp.Net » Facebook » Projects » Social Networking Website » Facebook Like Header User Control using Asp.net for Social networking website

Facebook Like Header User Control using Asp.net for Social networking website

Posted by 20Fingers2Brains on Tags: Asp.Net , Facebook , Projects , Social Networking Website

Facebook Like Header User Control using Asp.net for Social networking website

We have created a Header similar to facebook header with Heartbeat logo,Notifications icon,Messages icon and Friend Requests icon,Search Box and Logout button.
To create a facebook like header we have created a user control and used it on profile master page

Header.ascx Code:

Open Header.ascx User Control Which You have created in Controls Folder.
In the Source of Header.ascx user control you can add the following piece of code given below.
We have created a user control and named it as Header.
On the user control we have make a tabular structure and properly alligned the logo and other images,seach box and logout button. We have also added AutoCompleteExtender and TextBoxWatermarkExtender on the header control

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Header.ascx.cs" Inherits="Controls_Header" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<style type="text/css">
    .HeaderStyle
    {
        width: 80px;
        padding-right: 7px;
    }
    .LogoStyle
    {
        width: 50px;
        padding-right: 7px;
    }
    .Red
    {
        color: Red;
        font-weight: bold;
    }
</style>
<table cellpadding="0" cellspacing="1" width="900px">
    <tr>
        <td align="center" class="LogoStyle">
            <asp:LinkButton ID="btnLogo" runat="server" Font-Bold="True" 
            Font-Names="Franklin Gothic Medium"
            Font-Underline="False" ForeColor="White" 
            Font-Size="Large" 
            OnClick="btnLogo_Click">HeartBeat</asp:LinkButton>
        </td>
        <td class="HeaderStyle">
            <table>
                <tr>
                    <td>
                        <asp:HyperLink ID="HyperLink1" runat="server" 
                        ImageUrl="~/images/globe.png"></asp:HyperLink>
                    </td>
                    <td>
                        <asp:ImageButton ID="imgBtnMsg" runat="server" 
                        ImageUrl="~/images/msgr.png" />
                    </td>
                    <td>
                        <asp:ImageButton ID="imgBtnFrendReq" runat="server" 
                        ImageUrl="~/images/friendRequest.png" />
                    </td>
                </tr>
            </table>
        </td>
        <td align="left">
            <asp:TextBox ID="txtSearch" runat="server" Width="300px" 
            Height="21px"></asp:TextBox>

            <asp:TextBoxWatermarkExtender ID="txtSearch_TextBoxWatermarkExtender" 
            runat="server" Enabled="True" 
            TargetControlID="txtSearch" WatermarkText="Search Friends..">
            </asp:TextBoxWatermarkExtender>

            <asp:AutoCompleteExtender ID="txtSearch_AutoCompleteExtender" 
            runat="server" DelimiterCharacters="" ServiceMethod="SearchFriends" 
            Enabled="True" TargetControlID="txtSearch" ServicePath="~/WebService.asmx"
            CompletionInterval="100" MinimumPrefixLength="1">
            </asp:AutoCompleteExtender>

            <asp:Button ID="btnSearch" runat="server" Text="Search"
             OnClick="btnSearch_Click" BorderColor="#0033CC" 
             BorderStyle="Ridge" Font-Bold="True" ForeColor="Black"
             Height="27px" />

        </td>
        <td align="right">
            <asp:LinkButton ID="btnLogout" runat="server" 
            Font-Bold="False" ForeColor="White"
            OnClick="btnLogout_Click" 
            Font-Names="Arial Rounded MT Bold" 
            Font-Underline="False">Logout</asp:LinkButton>
        </td>
    </tr>
</table>

Header.ascx.cs C# Code:

Now Open the Code behind file of Header User Control.
In Header.ascx.cs file you can add the following piece of code given below.
In the csharp file of header control we have three OnClick as Logo Click , Logout Button Click and Search Button Click.
On Logo Click we are changing the session.On Logout Button Click we are redirecting the user to login page and Search Button we are directing the user to Search page

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

public partial class Controls_Header : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        
    }
    
    protected void btnLogo_Click(object sender, EventArgs e)
    {
        Session["UserId"] = Session["UserId"];
        Session["CurrentProfileId"] = Session["UserId"];
        Response.Redirect("Main.aspx");
        
    }
    protected void btnLogout_Click(object sender, EventArgs e)
    {
        Response.Redirect("Default.aspx");
    }
    protected void btnSearch_Click(object sender, EventArgs e)
    {
        Session["SearchText"]=txtSearch.Text;
        Response.Redirect("~/Search.aspx");
    }
}