This article will show you how you can use ajaxcontroltoolkit AutoCompleteExtender
for displaying autosuggest textbox inside the gridview. In this article I have
used asp.net, gridview, AutoCompleteExtender. In this article I have used
access database.
Some of my previous articles are follows: Autocomplete
Textbox in Asp.Net With DataBase Using C# AjaxControlToolkit, Reset
Div Height by Using jQuery, Digital
Clock in Asp.Net in C#, Login
Form With LightbBox Effect in Asp.Net.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridViewBindWithTextBox.aspx.cs"
Inherits="ProjectDemo_Asp.et.GridViewBindWithTextBox"
%>
<%@ 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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="author_name" HeaderText="NAME" />
<asp:BoundField DataField="publisher_name" HeaderText="PUBLISHER NAME"
/>
<asp:TemplateField HeaderText="TITLE">
<ItemTemplate>
<asp:TextBox ID="TextBox1"
runat="server"></asp:TextBox>
<asp:AutoCompleteExtender
ID="AutoCompleteExtender1"
runat="server"
ServiceMethod="AutoCompleteAjaxRequest"
ServicePath="AutoComplete.asmx" MinimumPrefixLength="2"
CompletionInterval="100"
EnableCaching="false" CompletionSetCount="10"
TargetControlID="TextBox1"
FirstRowSelected="false">
</asp:AutoCompleteExtender>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
|
After this we will add an AutoComplete.asmx file and add the below code into it.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using System.Data.OleDb;
namespace ProjectDemo_Asp.et
{
///
/// Summary description for AutoComplete
///
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 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 AutoComplete : System.Web.Services.WebService
{
[WebMethod]
public string[] AutoCompleteAjaxRequest(string prefixText, int count)
{
List<string> ajaxDataCollection = new List<string>();
DataTable _objdt = new DataTable();
_objdt = GetDataFromDataBase(prefixText);
if(_objdt.Rows.Count>0)
{
for (int i = 0; i < _objdt.Rows.Count; i++)
{
ajaxDataCollection.Add(_objdt.Rows[i]["LanguageName"].ToString());
}
}
return ajaxDataCollection.ToArray();
}
///
/// Function for retriving data from database
///
///
public DataTable GetDataFromDataBase(string prefixText)
{
string connectionstring = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=|DataDirectory|\\bookstore.mdb;Persist Security Info=False;";
DataTable _objdt = new DataTable();
string querystring = "select * from ProLanguage where LanguageName like '%" + prefixText + "%';";
OleDbConnection _objcon = new OleDbConnection(connectionstring);
OleDbDataAdapter _objda = new OleDbDataAdapter(querystring, _objcon);
_objcon.Open();
_objda.Fill(_objdt);
return _objdt;
}
}
}
|
Now we will bind the gridview
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.OleDb;
using System.Data;
namespace ProjectDemo_Asp.et
{
public partial class GridViewBindWithTextBox : System.Web.UI.Page
{
public
string connectionstring = "Provider=Microsoft.ACE.OLEDB.12.0;Data
Source=|DataDirectory|\\bookstore.mdb;Persist Security Info=False;";
protected
void Page_Load(object
sender, EventArgs e)
{
DataTable
_objdt = new DataTable();
_objdt = GetDataFromDataBase();
if
(_objdt.Rows.Count > 0)
{
GridView1.DataSource =
_objdt;
GridView1.DataBind();
}
}
///
/// Function for binding retribing the data from database
/// In this i have used Access DB you can use SQL DB to bind
the data
///
public DataTable GetDataFromDataBase()
{
DataTable _objdt = new DataTable();
string querystring = "select * from Books;";
OleDbConnection _objcon = new OleDbConnection(connectionstring);
OleDbDataAdapter _objda = new OleDbDataAdapter(querystring, _objcon);
_objcon.Open();
_objda.Fill(_objdt);
return _objdt;
}
}
}
|
Here we have done with code. Now I will give some explanation
of this code. In html part of the code I have define the .asmx file name which Is
ServicePath="AutoComplete.asmx"
this will used for getting the records.
DOWNLOAD
About the Author
0 comments:
Please let me know your view