Search Results in Social Networking Website like Facebook using Asp.Net Csharp(c#)
- Searching is also an integral part of social networking website as it helps to get
new friends and expand the social network in a better way.
- We are showing the search
results in the form of datalist with username ,profile picture and from the search
results you can also navigate to any profile page.
- We have also made use of Ajax
Autocomplete Extender to give search suggestions from our friends database list
Search.ascx Code:
- Open Search.ascx User Control Which You have created in Controls Folder.
- In the
Source of Search.ascx user control you can add the following piece of code given
below.
- For Search results also we have made a different user controls as it sepearats the
code from the main page.The search user control is quite simple as we have created
a tablular struture with the datalist binding user name and profile picture.In the
ImageButton Command argument we are binding the registerid so that user can go to
other profiles from here
<%@ Control Language="C#" AutoEventWireup="true"
CodeFile="Search.ascx.cs" Inherits="Controls_Search" %>
<style type="text/css">
.styleFriends
{
width: 100%;
}
.friendsTD
{
width: 30%;
text-align: center;
}
</style>
<asp:DataList ID="SearchList" runat="server" Width="100%">
<ItemTemplate>
<table cellpadding="2" class="styleFriends" style="border: 1px ridge #CCCCCC">
<tr>
<td class="friendsTD" rowspan="2">
<asp:ImageButton ID="imgbtnPic" runat="server" Height="84px" Width="84px"
ImageUrl='<%# "ImageHandler.ashx?RegisterId="+ Eval("RegisterId") %>'
BorderColor="#CCCCCC" BorderStyle="Ridge" BorderWidth="1px"
CommandArgument='<%#Bind("RegisterId") %>' onclick="imgbtnPic_Click"/>
</td>
<td align="left">
<asp:Label ID="lblFriendName" runat="server" Font-Bold="False"
Font-Names="Franklin Gothic Medium" Text='<%# Bind("Name") %>'></asp:Label>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
Search.ascx.cs C# Code:
- Now Open the Code behind file of Friends User Control. In Search.ascx.cs file you
can add the following piece of code given below.
- In the Search.ascx user control code behind from the page load method we are calling
GetSearchResults() to get the search results.
- what ever the user have entered to
search we are storing it in session and based on the session we are search the results.
- We
have made use of sql like operator to get the results which begins with the search
text
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_Search : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
GetSearchResults();
}
private void GetSearchResults()
{
DataTable dt = new DataTable();
string query = "Select * FROM [Register]
where Name like '" + Session["SearchText"].ToString() + "%'";
dt = Database.GetData(query);
if (dt.Rows.Count > 0)
{
SearchList.Visible = true;
SearchList.DataSource = dt;
SearchList.DataBind();
}
else
{
}
}
protected void imgbtnPic_Click(object sender, ImageClickEventArgs e)
{
Session["CurrentProfileId"] = (((ImageButton)sender).CommandArgument).ToString();
Response.Redirect("Main.aspx");
}
}
Search.aspx Code:
- Once the Search.ascx user control is ready we have to add it to Search.aspx page
as shown below code snippet.
- Here we have done nothing but dragged dropped the user
control on the search.aspx page
<%@ Page Title="" Language="C#" MasterPageFile="~/ProfileMaster.master"
AutoEventWireup="true" CodeFile="Search.aspx.cs"
Inherits="Search" EnableEventValidation="false"%>
<%@ Register src="Controls/Search.ascx" tagname="Search" tagprefix="uc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<table align="center" class="style2">
<tr>
<td>
</td>
</tr>
<tr>
<td>
Search Results:</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<uc1:Search ID="Search1" runat="server" />
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</asp:Content>
0 comments:
Post a Comment