Cấp bậc tác giả:

DOTNET

Hướng dẫn sử dụng AJAX AutoComplete

Được viết bởi QuangIT ngày 15/05/2013 lúc 01:16 PM
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
  • 0
  • 2731

Hướng dẫn sử dụng AJAX AutoComplete


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

ajax_autocomplete.jpg

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

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML