Search Suggestion Box from MULTIPLE TABLE(Like Google Search) Using Ajax AutoCompleteExtender in Asp.Net C#

06:40:00  , , , , , , , ,  No comments

Search Suggestion Box from Multiple Table Using AJAX


 The script will use a TextBox to search through a  instantly to return results Alphabetically without reloading the page. Every typed letter will update the results.



 Auto Suggestion Box Master Page
 Auto Suggestion Box Multiple Table Search
 Auto Suggestion Ajax AutoCompleteExtender
 Auto Complete Search For WINDOW APPLICATION


            Show Result From "Multiple Tables" 
Download - Ajax .DLL File From below Link
     
  "http://ajaxcontroltoolkit.codeplex.com/downloads/get/768265"



 DEMO
   Html Coding

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
          
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
   
         <asp:TextBox ID="txtCourse" runat="server"></asp:TextBox>
            <asp:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server"
             TargetControlID="txtCourse"
             ServicePath="Course.asmx"
             ServiceMethod ="CourseDetail"
             MinimumPrefixLength="1"
             CompletionSetCount="20"
             CompletionInterval="0"
             EnableCaching="true">
            </asp:AutoCompleteExtender>  

    </div>
    </form>
    <p>
        &nbsp;</p>
</body>

</html>




C# Coding
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

/// <summary>
/// Summary description for Course
/// </summary>

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

[System.Web.Script.Services.ScriptService]

public class Course : System.Web.Services.WebService
{

    public Course()
    {

        //Uncomment the following line if using designed components
        //InitializeComponent();
    }

    [WebMethod]
    public List<string> CourseDetail(string prefixText)
    {
        System.Data.SqlClient.SqlConnection con = new System.Data.SqlClient.SqlConnection
            (System.Configuration.ConfigurationManager.ConnectionStrings["dbcon"].ToString());

        con.Open();

        System.Data.SqlClient.SqlCommand cmd1 = new System.Data.SqlClient.SqlCommand
            ("select * from coursename where name like @name+'%'", con);

        System.Data.SqlClient.SqlCommand cmd2 = new System.Data.SqlClient.SqlCommand
    ("select * from reg where name like @name+'%'", con);

        System.Data.SqlClient.SqlCommand cmd3 = new System.Data.SqlClient.SqlCommand
    ("select * from register where name like @name+'%'", con);

        cmd1.Parameters.AddWithValue("@name", prefixText);

        cmd2.Parameters.AddWithValue("@name", prefixText);

        cmd3.Parameters.AddWithValue("@name", prefixText);

        System.Data.SqlClient.SqlDataAdapter da1 = new System.Data.SqlClient.SqlDataAdapter(cmd1);

        System.Data.SqlClient.SqlDataAdapter da2 = new System.Data.SqlClient.SqlDataAdapter(cmd2);

        System.Data.SqlClient.SqlDataAdapter da3 = new System.Data.SqlClient.SqlDataAdapter(cmd3);


        System.Data.DataTable dt1 = new System.Data.DataTable();

        System.Data.DataTable dt2 = new System.Data.DataTable();

        System.Data.DataTable dt3 = new System.Data.DataTable();

        da1.Fill(dt1);
        da2.Fill(dt2);
        da3.Fill(dt3);

        List<string> Course_names = new List<string>();

        for (int i = 0; i < dt1.Rows.Count; i++)
        {
            Course_names.Add(dt1.Rows[i][2].ToString());
        }
        for (int j = 0; j < dt2.Rows.Count; j++)
        {
            Course_names.Add(dt2.Rows[j][1].ToString());
        }
        for (int k = 0; k < dt3.Rows.Count; k++)
        {
            Course_names.Add(dt3.Rows[k][0].ToString());
        }

        return Course_names;
    }


}






First  - Add  the New Web Form Name - Suggest.aspx







Next - Add the Ajax Tools - Right Click Tools - Select _ Choose Items 






Select  Browse Button - Add the Dll File -   AjaxControlToolKit.dll





Added the Ajax Tool in Toolbox






Next - Add TextBox & ToolKitScriptManager  from  ToolBox






Next - Add WebService -  Right Click Solution Explorer  - Add- Add NEw Item






Select - WebService - Change the Name - Course.asmx - Add





Show  Below Like That WebService Page







Next - Add the Table  Coursename & Common Field name








 Next - Add the Table  reg & Common Field name







 Next - Add the Table  register & Common Field name







Next  - Write the Coding  to WebService  





name Field  Common for All Tables





Next - Go To Design form -  Select - Textbox - Add Extender - AutoCompleteExtender - OK






Added the AutoComplete Extender Tool  &  Add the Service Path & Service Method






Added the  Path & Method to the Textbox





Next - Add the ajax Tools TagPrefix="asp" or  if Choice





           Next - Add table field name = Active




           Next - Add table field name = Active Server







     Next - Add table field name = Active Server Page







Next -Run the Design Web Form(F5 Run)






OUTPUT
All Three Table  Specified Field Related Word Display while Enter the Keyword



                                         
                                                

Read More

Suggestion Box Search Textbox Ajax AutoCompleteExtender control example Using WebService in asp.net C#

07:54:00  , , , , , , , ,  No comments

Suggestion Box Search(Like Google Search) Ajax AutoCompleteExtender Control Using WebService 


How the related suggestions Highlights as you start typing in the Google search box? This is called AutoComplete. So if you want Google type auto complete textbox functionality then we can also implement this functionality in our Asp.Net web applications using AutoCompleteExtender control of AJAX. AJAX is very powerful tool for improving performance,Like Below

 Auto Suggestion Box Master Page
 Auto Suggestion Box Multiple Table Search
 Auto Suggestion Ajax AutoCompleteExtender
 Auto Complete Search For WINDOW APPLICATION


  Two ways to implement AutoComplete functionality:

 1) Using Web Service

 2) Using Static Method

First -  Add the Ajax Tools  If you want to Download this Site 

  "http://ajaxcontroltoolkit.codeplex.com/downloads/get/768265"
  

                                 DEMO


HTML CODING
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
        <br />
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager> 
      

         <asp:TextBox ID="txtCourse" runat="server"></asp:TextBox>
            <asp:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server"
             TargetControlID="txtCourse"
             ServicePath="Course.asmx"
             ServiceMethod ="CourseDetail"
             MinimumPrefixLength="1"
             CompletionSetCount="20"
             CompletionInterval="0"
             EnableCaching="true">
            </asp:AutoCompleteExtender>  
  
           
    </div>
    </form>
</body>

</html>
C# Coding
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

/// <summary>
/// Summary description for Course
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

[System.Web.Script.Services.ScriptService]


public class Course : System.Web.Services.WebService
{

    public Course()
    {

        //Uncomment the following line if using designed components
        //InitializeComponent();
    }

    [WebMethod]
    public List<string> CourseDetail(string prefixText)
    {
        System.Data.SqlClient.SqlConnection con = new System.Data.SqlClient.SqlConnection
            (System.Configuration.ConfigurationManager.ConnectionStrings["dbcon"].ToString());

        con.Open();

        System.Data.SqlClient.SqlCommand cmd = new System.Data.SqlClient.SqlCommand
            ("select * from coursename where course like @course+'%'", con);

        cmd.Parameters.AddWithValue("@course", prefixText);
        System.Data.SqlClient.SqlDataAdapter da = new System.Data.SqlClient.SqlDataAdapter(cmd);

        System.Data.DataTable dt = new System.Data.DataTable();
        da.Fill(dt);

        List<string> Course_names = new List<string>();

        for (int i = 0; i < dt.Rows.Count; i++)
        {
            Course_names.Add(dt.Rows[i][1].ToString());
        }
        return Course_names;
    }


}
First  Add -  New Web Form  Suggest.aspx






Next - Add Ajax Tools From Downloaded DLL File below Like that







Browse - Add AjaxControlToolKit.dll File 







Next - Added  the Ajax Tools  Toolbox






Next - Select ToolScriptManager   & TextBox   Change Id name for Textbox







Next - Add the New Web Services 







WebService  Name Given To Required  .asmx







Next - Show the  Coding Part to Web Service File






Next  - Add the New Table  fields 







Next - Refresh Database   Fields Added to  Server Explorer 

-




Next -  Write the Coding to Webservice  Coding Part







Next - Right Click -  TextBox - Add Extender - Select - AutoAompleteExtender - Ok





Next - Add the Textbox  WebService Path & Method  & MinimumPrefixLength







Show  the Propety  for Textbox







Next - Add TagPrefix For AjaxTool (SelectedTool Name)









Next  - Fill the  Table Field  Values






Add the WebServies Coding Part  System.Web.Script.Services.ScriptServices








OUTPUT
Next - Run (F5) the WebForm  -  Enter  Keyword  Show the  All Related Detail 


                                                            
                                               

Read More