Ajax với Autocomplete TextBox từ database

Bài này mình sẽ hướng dẫn dùng webservices để tạo Autocomplete TextBox lấy dữ liệu từ database

Bạn muốn làm Autocomplete TextBox lấy dữ liệu từ database bạn có thể sử dụng Ajax với webservices để thực hiện việc này.
Giả sử bạn có một bảng với 2 trường MaSP và TenSP. Khi đó bạn cần tạo các [WebMethod] để thực hiện việc lấy dữ liệu từ Database cho Autocomplete TextBox . Bạn hãy tạo Webservice WebService.asmx và trong code WebService.cs bạn viết các [WebMethod] như minh họa sau:

using System;

using System.Configuration;

using System.Data;

using System.Data.SqlClient;

using System.Web;

using System.Collections;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Web.Script.Services;

///

/// Summary description for WebService

///

[ScriptService]

[WebService(Namespace = “http://tempuri.org/”)]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

public class WebService : System.Web.Services.WebService

{

public WebService()

{

//Uncomment the following line if using designed components

//InitializeComponent();

}

[WebMethod]

public string HelloWorld()

{

return “Hello World”;

}

[WebMethod]

public string[] GetSanPham(string prefixText)

{

string sql = “Select MaSP, TenSP From TB_SanPham Where MaSP like @prefixText or TenSP like @prefixText”;

SqlDataAdapter da = new SqlDataAdapter(sql, ConfigurationManager.ConnectionStrings[“KetNoiDatabase”].ConnectionString);

//KetNoiDatabase này khai báo trong web.conf

da.SelectCommand.Parameters.Add(“@prefixText”, SqlDbType.NVarChar, 250).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)

{

//Dữ liệu để Auto

items.SetValue(dr[“TenSP”].ToString(), i);

i++;

}

return items;

}

}

Sử dụng các [WebMethod] như sau:
Giả sử bạn có Textbox là txtSanPham như sau

<asp:TextBox ID=”txtSanPham” runat=”server” CssClass=”textbox” Width=”300px”>

Khi đó bạn dùng [WebMethod] GetSanPham đưa vào thuộc tính ServiceMethod như sau

<cc1:AutoCompleteExtender ID=”AutoCompleteExtender2″ runat=”server” CompletionListCssClass=”autocomplete_completionListElement”
CompletionListHighlightedItemCssClass=”autocomplete_highlightedListItem” CompletionListItemCssClass=”autocomplete_listItem” EnableCaching=”true” MinimumPrefixLength=”1″ ServiceMethod=”GetSanPham” ServicePath=”WebService.asmx” TargetControlID=”txtSanPham” >

Về tieuyeuit
Lập trình viên Asp.net Tôi chia sẻ một,bạn chia sẻ một và chúng ta có rất nhiều!

One Response to Ajax với Autocomplete TextBox từ database

  1. yeuasp.net nói:

    chào bạn, cảm ơn bạn về bài viết có ích này, bạn có thể send code được chứ, cảm ơn bạn

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: