Bài toán đặt ra rằng, tại thời điểm gõ nội dung lên Textbox, ngay lập tức các từ gợi ý đã tồn tại trong CSDL để người dùng tránh gõ trùng lặp. Cách đơn giản, bạn sử dụng control AutoCompleteExtender của Bộ Ajax Control Toolkit
Cách thực hiện như sau:
B1: Tạo Service "AutoCompleteText.asmx", mặc định nó sẽ tự động tạo ra AutoCompleteText.cs trong thư mục "Appcode"
B2: Vào AutoCompleteText.cs để thêm hàm sau
/// <summary>
/// Danh mục Khoa
/// </summary>
/// <param name="prefixText"></param>
/// <param name="count"></param>
/// <returns></returns>
[WebMethod]
public string[] GetCompletionList(string prefixText, int count)
{
int TotalRows = 0;
string WhereClause = "1=1";
WhereClause += String.Format(" AND TenKhoa like N'%{0}%'", prefixText);
TList<Khoa> TList_Khoa = DataRepository.KhoaProvider.GetPaged(WhereClause, "MaKhoa DESC", 0, 0, out TotalRows);
count = TList_Khoa.Count;
List<string> items = new List<string>(count);
if (count > 0)
{
for (int i = 0; i <= count-1; i++)
{
items.Add(TList_Khoa[i].TenKhoa);
}
}
return items.ToArray();
}
Chú ý: Trên phần khai báo trên cùng bạn nên để [System.Web.Script.Services.ScriptService] để chấp nhận Web service gọi script(sử dụng Ajax)
B3: Vào trang cần hiển thị thông tin
Gọi ToolkitScriptManager:
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/AutoCompleteText.asmx" />
</Services>
</cc1:ToolkitScriptManager>
Chú ý: Nếu chưa có Ajax Control Toolkit thì tải về và add DLL vào thư mục bin và đăng ký cho trang
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
B4: Xây dựng control như bên dưới
<asp:TextBox ID="txtTen" CssClass="hrm_textbox" Width="200px" MaxLength="50"
ToolTip="Nhập tên Khoa không vượt quá 50 ký tự" runat="server"></asp:TextBox>
<cc2:AutoCompleteExtender runat="server" ID="autoComplete1" TargetControlID="txtTen"
ServicePath="~/AutoCompleteText.asmx" ServiceMethod="GetCompletionList"
MinimumPrefixLength="2" CompletionInterval="1000" EnableCaching="true"/>
Chú ý: Nếu bạn chỉ muốn hiển thị dữ liệu ra khi vùng đếm dưới 20 thì thiết lập thuộc tính CompletionSetCount="20" cho Control AutoCompleteExtender
Nhấn F5 để chạy kiểm tra