AJAX Auto Complete Extender Part 2 of 2 - (Part 2 Without Webservice)

Raj.Trivedi
Posted by in ASP.NET AJAX category on for Intermediate level | Points: 250 | Views : 8133 red flag

In the first part we saw how we can implement AJAX Auto Complete Extender using Web Service.In this article we will see how we can achieve the same without using Web Service

Introduction


Continuing from the First Part where we achieved Auto Complete feature using Web service.In this article we will be using the Web Method directly in the code behind.

Objective


  1. Writing the WebMethod in Code behind.
  2. Understanding AJAX Auto Complete Extender.

Using the code



  1. Create an Empty Website in VS 2010.Add a Webform
  2. Now drag and drop 1 label and 1 Textbox.
Explanation of Web Method for Getting data from database.

  1. We create a Web-method and define a function which has a return type List type of String the function will take a string variable as an argument.
  2. Then we write our SQL Query to get data from database and dill the data from data apdapter to dataaset.
  3. Now we declare a List Variable which is of type string array named as countryName and get the Count of the records that are fetched from the Query.
  4. We then run a foreach loop to the data rows in the dataset and then we run a for loop to the dataset and add the Names to the List Variable and return the list variable as our method has a Return Type as a List type of string.
Understanding the AJAX Auto Complete Extender.

  1. TargetControlID :- It will hold the ID of the textbox that will be used for auto-complete
  2. MinimumPrefixLength :- The count of characters required to enter by the user to fetch data from the database matching the Character.
  3. ServiceMethod :- The name of the webmethod that we have used to get data from database in the web service.(Note :- Name of the web method should be case sensitive).
Note :- In this we will not be using Service Path property as we are not using Web Service.

Lets Start Implementation

// HTML Mark Up
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoCompletewithoutWebService.aspx.cs" Inherits="AutoCompletewithoutWebService" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!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">
        .style1
        {
            font-family: "Cooper Black";
            font-size: x-large;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
    <div>
    
    <div class="style1" style="text-align: center">
        AJAX AutoComplete Sample using With Web Service<br />
        <br />
    </div>
    <p style="text-align: center">
        <asp:Label ID="Label1" runat="server" CssClass="style1" Text="Type Name of Countries"></asp:Label>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:TextBox ID="xtxtCountries" runat="server" Height="26px" Width="199px"></asp:TextBox>
       
        <asp:AutoCompleteExtender ID="xtxtCountries_AutoCompleteExtender" 
            runat="server" DelimiterCharacters="" Enabled="True" ServiceMethod="GetListofCountries"
            MinimumPrefixLength="1" EnableCaching="true"
            TargetControlID="xtxtCountries"></asp:AutoCompleteExtender>
       
    </p>
    </div>
    </form>
</body>
</html>
// Code Behind 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;

public partial class AutoCompletewithoutWebService : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [System.Web.Script.Services.ScriptMethod()]
    [System.Web.Services.WebMethod]
    public static List<string> GetListofCountries(string prefixText)
    {

        using (SqlConnection sqlconn = new SqlConnection("Data Source=.;Initial Catalog=DNF;Persist Security Info=True;User ID=sa;Password=sqluser"))
        {
            sqlconn.Open();
            SqlCommand cmd = new SqlCommand("select Countries from Countries where Countries like '" + prefixText + "%' ", sqlconn);
            cmd.Parameters.AddWithValue("@CountryPrefix", prefixText);
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            da.Fill(dt);
            List<string> CountryNames = new List<string>();
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                CountryNames.Add(dt.Rows[i]["Countries"].ToString());
            }
            return CountryNames;
        }
    }
        
    }

Output Screen









Conclusion


This is the second part, You can use the first part of the article as well but it is more complex as we use web service, where as this is more simpler for beginners.

 


Page copy protected against web site content infringement by Copyscape

About the Author

Raj.Trivedi
Full Name: Raj Trivedi
Member Level:
Member Status: Member,MVP
Member Since: 6/16/2012 2:04:41 AM
Country: India
Regard's Raj.Trivedi "Sharing is Caring" Please mark as answer if your Query is resolved
http://www.dotnetfunda.com/profile/raj.trivedi.aspx
Raj Trivedi i.e. me started my career as Support Professional and then moved on the Software development eventually reached at these skills Software Development | Enthusiastic Blogger | Content Writer | Technical Writer | Problem Solver | Lecturer on Technology Subjects | Runnerup Award Winner on www.dotnetfunda.com and firm believer in Sharing as a way of Caring Yet this much achieved its still a long way to go and there is biggest dream lying to be one of the best entrepreneurs of India in Technology Department. The Dream has just started and i hope it follows. Highlights are mentioned in details in my profile at http://in.linkedin.com/pub/raj-trivedi/30/61/b30/

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)