Dear Friends,
Today I will be explaining how we can use AutoComplete
Textbox using C #asp.net, Ajax and SQL server. Now I will be explain all steps
one by one.
Step 1: design database
Create database testdata
Now table
CREATE TABLE [dbo].[State](
[stateid] [int] IDENTITY(1,1) NOT NULL,
[statename] [nvarchar](100) NULL,
CONSTRAINT
[PK_State] PRIMARY KEY
CLUSTERED
(
[stateid] ASC
)WITH
(PAD_INDEX
= OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS
= ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
Step 2: Open your visual Studio, and Create a new website. Add
reference for Ajax toolkit and add a web services using add new Item. Now write code for web services, that will be
help for find data from the database.
Webservices.cs;
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
/// <summary>
/// Summary description for WebService
/// </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 WebService : System.Web.Services.WebService {
public WebService () {
//Uncomment the following line if using
designed components
//InitializeComponent();
}
[WebMethod]
public List<string> GetCountries(string
prefixText)
{
SqlConnection con = new
SqlConnection(ConfigurationManager.ConnectionStrings["OlvIConnectionString"].ToString());
con.Open();
SqlCommand cmd = new
SqlCommand("select
* from dbo.State where statename like @statename+'%'", con);
cmd.Parameters.AddWithValue("@statename", 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][1].ToString());
}
return CountryNames;
}
}
Step 3: Now we will be wright code for access record to
using textbox in default.aspx page.
<%@ Page
Language="C#"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register
Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="ajax"
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function ShowProcessImage() {
var autocomplete = document.getElementById('txtCountry');
autocomplete.style.backgroundImage = 'url(loading1.gif)';
autocomplete.style.backgroundRepeat = 'no-repeat';
autocomplete.style.backgroundPosition = 'right';
}
function HideProcessImage() {
var autocomplete = document.getElementById('txtCountry');
autocomplete.style.backgroundImage
='none';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:TextBox ID="txtCountry" runat="server"></asp:TextBox>
<ajax:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
TargetControlID="txtCountry"
ServicePath="WebService.asmx"
MinimumPrefixLength="1" EnableCaching="true" CompletionSetCount="1" CompletionInterval="1000" ServiceMethod="GetCountries" OnClientPopulating="ShowProcessImage" OnClientPopulated="HideProcessImage"
>
</ajax:AutoCompleteExtender>
</div>
</form>
</body>
</html>
This is the code, after debugging and running we will be
find our result. You can download source code from here.
No comments:
Post a Comment