This article will show you how you can use Ajax Control
Toolkit ModalPopupExtender with AutoCompleteExtender In Asp.Net. This article
will show to open ModalPopup window and add the AutoComplete Textbox in
asp.net.
Some of my previous articles are as follows:
Example
of Ajax Control Toolkit ModalPopupExtender In Asp.Net, Autocomplete
Textbox in Asp.Net With DataBase Using C# AjaxControlToolkit, Accordion
Ajax Control Toolkit Example in Asp.net OR How to Use Ajax Accordion Control in
Asp.Net, Ajax
FileUpload Control In Asp.Net or Multiple FileUpload With Progress Example in
Asp.Net Using C#.Net, How
To Use FileUpload Control in Update Panel For Ajax File Upload In Asp.Net Using
C#, Asynchronous
Page Loading In Asp.net Using UpdatePanel and Timer Control | Simple
Asynchronous Page Load in ASP.NET.
So for this article first we will create a new asp.net application and add ModalPopupExtender, AutoCompleteExtender, Script Manager and a button control. After adding all the controls your code will look as shown below.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutoCompleteTextboxInAjaxToolkit.aspx.cs"
Inherits="ProjectDemo_Asp.et.AutoCompleteTextboxInAjaxToolkit"
%>
<%@ 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>AjaxControlToolkit
ModalPopupExtender With AutoCompleteExtender In Asp.Net Using C#.Net
</title>
<style type="text/css">
.modalpopupbackground
{
background-color:
#666699;
filter:
alpha(opacity=45);
opacity:
0.7;
}
/*AutoComplete
flyout */
.autocomplete_completionListElement
{
margin:
0px !important;
background-color:
white;
color:
windowtext;
border-width:
1px;
border-style:
solid;
cursor:
pointer;
overflow:
auto;
text-align:
left;
list-style-type:
none;
}
/*
AutoComplete highlighted item */
.autocomplete_highlightedListItem
{
background-color:
#ffff99;
color:
black;
}
/*
AutoComplete item */
.autocomplete_listItem
{
background-color:
window;
color:
windowtext;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button runat="server" Text="Click To Open Popup" ID="Button1"
/>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
PopupControlID="divpopup"
TargetControlID="Button1" CancelControlID="Button2" BackgroundCssClass="modalpopupbackground">
</asp:ModalPopupExtender>
</div>
<asp:Panel runat="server" ID="divpopup" Style="font-size: 15; background-color: green;
border: 5 solid yellow; width: 380px; height: 150px; color: White; text-align: center;">
<br />
<br />
<br />
Search :
<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"
CompletionListCssClass="autocomplete_completionListElement"
CompletionListItemCssClass="autocomplete_listItem"
CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem">
</asp:AutoCompleteExtender>
<div style="text-align: center;">
<br />
<asp:Button ID="Button2" runat="server" Text="Close" /></div>
</asp:Panel>
</form>
</body>
</html>
|
After this we will create a webservice (.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;
}
}
}
|
In above code I have used access database. You can use Sql
database. Now we have done just
check the output.
About the Author
0 comments:
Please let me know your view