Đầu tiên, chúng ta sẽ bổ sung thêm trang .aspx, và thêm các thẻ html dưới đây:
<%@ 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>Autocomplete Textbox in Asp.Net With DataBase Using C# AjaxControlToolkit
</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
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">
</asp:AutoCompleteExtender>
</div>
</form>
</body>
</html>
Trong đoạn mã trên, bạn có thể thấy tôi đã chỉ định TargetControlID = "TextBox1" . Thẻ này sẽ được sử dụng để xác định kiểm soát tự động gợi ý sẽ xuất hiện.
Chúng ta sẽ thấy cách để nhận dữ liệu từ cơ sở dữ liệu. Thẻ AutoCompleteExtender có hai thuộc tính ServiceMethod và ServicePath. Chúng ta sẽ xác định tên dịch vụ web và phương thức. Thêm tập tin webservice(.asmx) trong Project. Đây là mã webservice.
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>
/// Summary description for AutoComplete
/// </summary>
[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();
}
/// <summary>
/// Function for retriving data from database
/// </summary>
/// <returns></returns>
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;
}
}
}
Trong đoạn mã trên, chúng ta đã sử dụng cơ sở dữ liệu để truy cập, bạn có thể sử dụng cơ sở dữ liệu sql hoặc khác.
Lưu ý: Khi tạo webservice thuộc tính [System.Web.Script.Services.ScriptService] sẽ được chú thích. Vì vậy, hãy bỏ ghi chú này nếu không AutoCompleteExtender sẽ không thể truy cập vào các phương thức webservice.
Bây giờ thì chạy trang web để kiểm tra: