Social Networking like Facebook Profile Page in asp.net c#
Social Networking facebook website Source Code Open Soure Project Application Profile Page
- The User Controls like Header, Profile Picture,Friend Suggestions are dragged and dropped onto the ProfileMaster.master master page
- we can say that this master page is holding all the usercontrols and keeping them togather so that it can look like facebook
- so let us now take a look at the code and asp source of ProfileMaster page
ProfileMaster.master Code:
- Open ProfileMaster.master MasterPage Which You have created in step 1.
- In the Source of ProfileMaster.master you can add the following piece of code given below.
- On ProfileMaster.master page we have made a struture some what similar to facebook.
- We have placed all the user controls into a tabular structure such that it resembles the tabular structure of social networking website like facebook
- On the footer we have written the copyright notice to 20Fingers2Brains
- The snapshot of the profilemaster.master page is shown above
- The source code of the profile master page is shown below
Source Code:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="ProfileMaster.master.cs"
Inherits="ProfileMaster" %>
<%@ Register Src="Controls/Header.ascx" TagName="Header" TagPrefix="uc1" %>
<%@ Register Src="Controls/ProfilePic.ascx" TagName="ProfilePic" TagPrefix="uc2" %>
<%@ Register Src="Controls/PeopleYouMayKnow.ascx" TagName="PeopleYouMayKnow" TagPrefix="uc3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.style2
{
width: 100%;
}
.style3
{
width: 900px;
}
.style4
{
width: 150px;
vertical-align: top;
text-align: center;
padding-top: 7px;
}
.style5
{
width: 600px;
vertical-align: top;
}
.style6
{
width: 120px;
vertical-align: top;
}
</style>
</head>
<body>
<form runat="server" id="MainForm">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<table cellpadding="0" cellspacing="0" class="style2">
<tr>
<td align="center" style="border: 1px ridge #CCCCCC; height: 35px; background-color: #0066CC;">
<table align="center" cellpadding="0" cellspacing="0" class="style3">
<tr>
<td>
<uc1:Header ID="Header1" runat="server" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table align="center" cellpadding="0" cellspacing="0" class="style3" style="border: 1px ridge #CCCCCC">
<tr>
<td class="style4" style="border-right-style: ridge; border-width: 1px; border-color: #CCCCCC">
<uc2:ProfilePic ID="ProfilePic1" runat="server" />
</td>
<td class="style5">
<table cellpadding="0" cellspacing="0" class="style2">
<tr>
<td colspan="2">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</td>
<td class="style6" style="border-left-style: ridge; border-width: 1px; border-color: #CCCCCC">
<br />
<uc3:PeopleYouMayKnow ID="PeopleYouMayKnow1" runat="server" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="border: 1px ridge #CCCCCC">
<table align="center" cellpadding="0" cellspacing="0" class="style3">
<tr>
<td>
© Copyright HeartBeat
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
- The code behind of Profile master page is empty as we have written all the respective code to for wall updates and friend suggestions on the user controls which we are dragging and dropping on the master page
- The empty code behind is shown below in the code snippet
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class ProfileMaster : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
