Chào các bạn, như mình đã giới thiệu ở bài trước về sử dụng AutoComplete MaskedEdit Trong ASP.Net hôm nay vẫn sẽ tiếp tục với bài viết có lẻ sẽ hấp dẫn hơn nhiều, đó là Autocomplete Textbox đây cũng được xem là ứng dụng nhiều nhất trong tính năng Autocomplete.
1. Autocomplete Textbox là gì?
Ai là đã từng sử dụng Internet chắc không thể không biết đến Google một trong những nhà tìm kiếm hơn nhất thế giới, và khi gõ từ khóa khóa muốn tìm vào trong đó sẽ cho ra một số từ gợi ý quan trọng cho chúng ta, đó là tính năng Autocomplete Textbox mà bcdonline.net muốn nói đến hôm nay.
2. Xây dựng Autocomplete Textbox kết nối CSDL
Vậy chúng ta sẽ tạo ra ứng dụng Autocomplete Textbox Trong ASP.Net như thế nào? Mình sẽ mô tả khái quát cho các bạn được nắm, chúng ta sẽ tạo một CSDL để lưu các từ khóa, ở mức độ nào đó bạn cũng thể sử dụng file để lưu hay là XML thì tùy, tuy nhiên ở đây mình dùng CSDL. Và cái mình làm ở đây là AutoComplete PageMethod bạn cũng có AutoComplete Service Method tuy nhiên mình là một cái còn cái kia thì tương tự vậy thôi, vì mình đã hướng dẫn về Web Service xong rồi.
Bảng CSDL chúng ta chỉ có hai trường, đó là SearchID và SearchName là demo nên chỉ làm đơn giản thế thôi. Tiếp theo bạn tạo một dự án Web và tạo một giao diện đơn giản là text box search, button nhấn submit và label hiển thị kết quả. Sau đó kéo và một ToolkitScriptManager.
Đến đây mới nhớ bạn phải cài trước Ajax Control ToolKit mới có control ToolkitScriptManager được. Tiếp theo bạn vào trong file .cs của trang vừa tạo viết một code lấy dữ liệu ra.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| [System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]public static string[] GetKeyWords(string prefixText){string sql = "Select * from Search Where SearchName like @prefixText";SqlDataAdapter da = new SqlDataAdapter(sql, "server=.; database=TestAutoCom; integrated security = true;");da.SelectCommand.Parameters.Add("@prefixText", SqlDbType.VarChar, 50).Value = prefixText + "%";DataTable dt = new DataTable();da.Fill(dt);string[] items = new string[dt.Rows.Count];int i = 0;foreach (DataRow dr in dt.Rows){items.SetValue(dr["SearchName"].ToString(), i);i++;}return items;} |
Đoạn trên có tác dụng lấy like là giá trị gần giống cộng tiếp vào chuỗi, vào thể hiện bằng một mảng items khi lập các dòng trong CSDL bằng foreach. Tiếp theo bạn sẽ kéo vào một AutoCompleteExtender vào ngay chổ TextBox.
Tiếp theo gắng kết chúng lại với nhau đồng thời trỏ đến ServiceMethod=”GetKeyWords”: hàm viết ở trong file .cs, TargetControlID=”txtSearch”, MinimumPrefixLength=”1″: chỉ 1 từ khóa vẫn thực hiện.
1
2
3
4
5
| <!--<asp:TextBox ID="txtSearch" runat="server" Height="25px" Width="200px"></asp:TextBox><asp:AutoCompleteExtender ID="txtSearch_AutoCompleteExtender" runat="server" DelimiterCharacters="" Enabled="True" ServiceMethod="GetKeyWords" MinimumPrefixLength="1" TargetControlID="txtSearch" UseContextKey="True"></asp:AutoCompleteExtender>--> |
3. Gắn TextBoxWatermarkExtender vào TextBox
Phần này là giới thiệu thêm, trong phần search bạn có thể dễ dang thấy được khi không cho con trỏ chuột vào thì sẽ có chữ mặc định “Mời nhập từ khóa … ” còn cho con trỏ chuột vào thì nó sẽ mất và lấy ra lại có. Vậy trong ASP.Net chúng ta làm thế nào? Bạn kéo vào TextBoxWatermarkExtender từ Ajax Control ToolKit và khai báo các thành phần. WatermarkText: từ hiển thị, TargetControlID: tên textbox
1
2
3
4
5
| <!--<asp:TextBox ID="txtSearch" runat="server" Height="25px" Width="200px"></asp:TextBox><asp:TextBoxWatermarkExtender ID="txtSearch_TextBoxWatermarkExtender" runat="server" Enabled="True" TargetControlID="txtSearch" WatermarkText="Nhập từ khóa"></asp:TextBoxWatermarkExtender>--> |
Kết luận: Coi như xong một phần nữa “Sử dụng Autocomplete Textbox Trong ASP.Net”, hii… Chuổi ngày học ASP.Net sắp hết, còn chừng vài bài nữa bcdonline.net sẽ chuyển qua mảng khác vào không viết về ASP.Net nữa, hii …! Chúc thành công!
Comments[ 0 ]
Đăng nhận xét