Auto Complete Search Results in Social Networking Website like Facebook using Asp.Net



Search Results in Social Networking Website like Facebook using Asp.Net Csharp(c#)



  1. 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.
  2. 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.
  3. We have also made use of Ajax Autocomplete Extender to give search suggestions from our friends database list

Search.ascx Code:

  1. Open Search.ascx User Control Which You have created in Controls Folder.
  2.  In the Source of Search.ascx user control you can add the following piece of code given below.
  3. 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:

  1. 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.
  2. In the Search.ascx user control code behind from the page load method we are calling GetSearchResults() to get the search results.
  3. what ever the user have entered to search we are storing it in session and based on the session we are search the results.
  4. 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:

  1. Once the Search.ascx user control is ready we have to add it to Search.aspx page as shown below code snippet.
  2. 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