Ứng dụng Search giống Google trong Asp.net

autocomplete search in asp.net

Lâu lâu mới viết một bài viết về .Net, cũng vì chủ đề này rất hay nên mình sẽ chọn bài này để viết. Nói qua về cái ứng dụng này, nó sẽ giúp bạn có được một control search giống với khi ta search trên Google để bổ sung vào Project của bạn cho đẹp hơn và nhẹ hơn.

Giới thiệu về ứng dụng

Bình thường, hầu hết nhiều website thực hiện tìm kiếm theo truy vấn “like” trong database như sau
[PHP]
select * from book where bookName like ‘%all keywords come from user interface%’
[/PHP]
Tuy nhiên, điều này sẽ rất khó khăn nếu như chúng ta làm với một hệ thống có nhiều hàng trong một database lớn. Và bài báo này cũng sẽ chỉ làm trên một bộ dữ liệu nhỏ, để nhằm mục đích mô phỏng cách hoạt động của nó trong .Net ra làm sao (xin xem thêm bài Autocomplete search với Webservice và Jquery), hy vọng các bạn có thể giúp tôi hoàn thiện nó hơn, cải tiến nó hơn.

Cách code

Trước tiên chúng ta vào SQL server để tạo một database cho bài test này nhé
[PHP]
—————— step 1 ———–
SET ANSI_PADDING ON
GO

CREATE TABLE [dbo].[book](
[bookNo] [int] IDENTITY(1,1) NOT NULL,
[bookName] [varchar](500) NULL,
CONSTRAINT [PK_book] PRIMARY KEY CLUSTERED
(
[bookNo] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF,
ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

SET ANSI_PADDING OFF
GO
—————— /step 1 ———–
[/PHP]
Add tiếp thêm vài row dữ liệu nữa
[PHP]
—————— step 2 ———–
insert into book(bookName) values(‘mathematics question bank’)
insert into book(bookName) values(‘mathematics questions’)
insert into book(bookName) values(‘physics question bank’)
insert into book(bookName) values(‘mathematics question with solutions’)
insert into book(bookName) values(‘chemistry question bank’)
insert into book(bookName) values(‘chemistry questions wit detailed solutions’)
insert into book(bookName) values(‘physics questions’)
insert into book(bookName) values(‘detaied solutions of mathematics questions’)
insert into book(bookName) values(‘example of mathematics questions’)
insert into book(bookName) values(‘detailed mathematics’)
—————— /step 2 ———–
[/PHP]
Vào trong web.config, thêm một chuỗi kết nối
[PHP]

[/PHP]
Và tiếp theo là ra ngoài giao diện, tạo một cái giao diện như hình dưới đây
google like search in asp.net
Để cho textbox hoạt động việc autocomplete thì chúng ta thêm đoạn mã sau
[PHP]
—————— step 4 ———–




<%-- Make the completion list transparent and then show it --%>

<%--Cache the original size of the completion list the first time the animation is played and then set it to zero --%>

<%-- Expand from 0px to the appropriate size while fading in --%>








<%-- Collapse down to 0px and fade out --%>








—————— /step 4 ———–
[/PHP]
Trong đó

  • ServicePath=”AutoComplete.asmx”
  • ServiceMethod=”GetBookList”
  • OnClientItemSelected=”aceBook_itemSelected”

Autocomplete.asmx là một web service bao gồm hàm GetBookList dành cho việc kích hoạt sự kiện Onchange của textbox. Sau khi add xong, thì web service thì gọi ra như sau
[PHP]
[System.Web.Script.Services.ScriptService]
[/PHP]
Dưới đây là hàm GetBookList
[PHP]
//—————— step 5 ———–

[WebMethod]
public string[] GetBookList(string prefixText, int count)
{

// this query could be run as stored procedure

string sql = ” select bookNo, bookName” +
” from book ” +
” where ” +
” bookName like @par1 ” +
” order by bookName”;

//————-
SQLandParameters sqlObj = new SQLandParameters();
sqlObj.SQL = sql;
sqlObj.parameters.Add(“@par1”, prefixText + “%”);
//————-

DataTable dt = Provider.execMySQL(sqlObj);
//———————————–
List custList = new List();
string custItem = string.Empty;

for (int i = 0; i < dt.Rows.Count; i++) { custItem = AutoCompleteExtender.CreateAutoCompleteItem( dt.Rows[i]["bookName"].ToString(), dt.Rows[i]["bookNo"].ToString()); custList.Add(custItem); } //----------------------------------- return custList.ToArray(); }//------------------ /step 5 ----------- [/PHP] Ngoài ra còn một số class đơn giản cho việc tạo kết nối, truy suất tới database nữa
[PHP]
—————— step 6 ———–

public static DataTable execMySQL(SQLandParameters sqlObj)
{
DataTable dt = new DataTable();

string connStr = System.Configuration.ConfigurationManager.ConnectionStrings[“connStr”].ToString();

SqlConnection conn = new SqlConnection(connStr);

SqlDataAdapter da = new SqlDataAdapter(sqlObj.SQL, conn);

foreach (KeyValuePair item in sqlObj.parameters)
{
da.SelectCommand.Parameters.AddWithValue(item.Key.ToString(), item.Value.ToString());
}

da.SelectCommand.CommandType = CommandType.Text;

conn.Open();
da.Fill(dt);
conn.Close();

return dt;
}

—————— /step 6 ———–
[/PHP]
[PHP]

//—————— step 7 ———–

//—————— /step 7 ———–
[/PHP]
Vậy là xong cơ bản rồi, cuối cùng còn thêm hàm sử lý sự kiện click button Search nữa là xong nhỉ
[PHP]
//—————— step 8 ———–
protected void btnSearch_Click(object sender, EventArgs e)
{
SQLandParameters SQLobj = GoogleLikeSearchLib.GenerateSQL(TBbookName.Text.Trim(),
“book”, “bookName”, “bookNo”);

dgv1.DataSource = Provider.execMySQL(SQLobj);
dgv1.DataBind();
}
//—————— /step 8 ———–
[/PHP]
Khi button search được click thì trong SQL câu lệnh truy vấn được generate ra như sau
[PHP]
select distinct t1.bookNo, t1.bookName, max(t1.myRank) myRank from
(
select b.*, 2 myRank from book b where bookName like ‘%mathematics%’
and bookName like ‘%questions%’
union
select b.*, 1 myRank from book b where bookName like ‘%mathematics%’
union
select b.*, 1 myRank from book b where bookName like ‘%questions%’
) t1
group by t1.bookName, t1.bookNo order by max(t1.myRank) desc
[/PHP]
Kết quả nhận được trong SQL
google like search in asp.net
Kết quả nhận được
google like search in asp.net

Download code

Ngoài ra, để tham khảo, các bạn download file mã nguồn bên dưới này về cho dễ học tập nhé

Download code

Bài viết được chia sẻ bởi
Sharecodeweb.com

Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com