Tạo trang tìm kiếm trong ASP.Net

Chào mọi người, tìm kiếm là một tính năng cần thiết trong WEB ASP.Net hay bất kỳ một site nào, trong bài hôm nay mình muốn chia sẻ cách tạo trang tìm kiếm trong ASP.Net một cách đơn giản nhất và gợi cho bạn vài ý tưởng thiết kế search page cho site mình.

Xét về bản chất thì đây là một trang khó để làm vì nó là điều kiện mình tường tác đến tất cả trong bảng dữ liệu của ta do đó nếu làm không kĩ sẽ bị bọn ác tấn công vào, hii nói thì nói thế thôi chứ như tụi mình thì chắc không thể làm nổi đến như vậy. Mình sẽ giới thiệu cho các bạn cách tạo một trang tìm kiếm sản phẩm đơn giản bằng ASP.Net. Với trang tìm kiếm này bạn sẽ lấy được các sản phẩm theo tên, theo giá và mình cũng sẽ gợi cho các bạn ý tưởng để phát triển tính năng tìm kiếm lên.

Với mức độ của trang tìm kiếm ( search page ASP.Net ) này cũng chỉ đủ để demo chức năng, để các bạn sinh viên học và làm đồ án báo cáo, để sử dụng được nó cần phát triển thêm nữa :D

Tạo trang tìm kiếm trong ASP.Net

Tạo trang tìm kiếm trong ASP.Net

Lấy thông tin tìm kiếm

Đầu tiên cũng nói tổng quan về trang tìm kiếm ( search page ASP.Net ) hôm nay mình sẽ làm, ở trang lấy thông tin tìm kiếm bạn có hai dropdownlist lấy giá sản phẩm bắt đầu ( giá từ ) và một dropdownlist lấy giá lớn nhất ( giá đến ), ngoài ra còn có một texbox để nhập tên sản phẩm muốn tìm. Người ta thường để phần này ở trong trang Master Page của mình để hiển thị phần tìm kiếm ở tất cả mọi trang. Ở bài này mình cũng dùng Class kết nối CSDL như ở phần trước.

Mình cần có một trang để hiển thị kết quả tìm kiếm được cũng như thông báo nếu tìm không ra kết quả nào từ các thông tin đã đưa. Trang này sẽ nhận dữ liệu được truyền qua bởi trang lấy thông tin tìm kiếm. Và các quá trình này sẽ dễ dàng thực hiện thông qua phần request trong web ASP.Net

Cũng như các bài trước mình sẽ demo CSDL cho các bạn được nắm về phần Demo tìm kiếm ( search page ASP.Net ) CSDL là một bảng gồm các thuộc tính của Sản phẩm và ở đây bạn chú ý đến trường giá và tên sản phẩm và mình sẽ làm việc với chúng.

CSDL Demo trang tìm kiếm search page ASP.Net

CSDL Demo trang tìm kiếm search page ASP.Net

Tiếp đến bạn vào trong Master Page hay trang mà bạn muốn lấy thông tin tìm kiếm và dựng lên giao diện gồm các thành phần như đã giới thiệu ở trên, chúng ta qui ước luôn textbox tên là: txtTenTim, dropdown giá từ thì là: drGiaTu, dropdown giá đến thì là: drGiaDen còn Image Button thì là: btSearch để dễ dàng trong lúc làm việc.

Giao diện form tìm kiếm trong ASP.Net

Giao diện form tìm kiếm trong ASP.Net

Tiếp theo xử lý trong phần gửi đi ở sự kiện click của btSearch,giả sử bạn kiểm tra là phải nhập tên sản phẩm mới cho truyền tham số đi, thật ra thì đây cũng không phải cần thiết tuy nhiên mình muốn demo cách làm này để còn áp dụng vào trường hợp khác.

<!--
    protected void btSearch_Click(object sender, ImageClickEventArgs e)
    {
        if (txtTenTim.Text == "")
        {
            Response.Write("<script>alert('Bạn Phải Nhập Từ Khoá Trước Khi Tìm >.<!...')</script>");
        }
        else
        {
            string ProName = txtTenTim.Text;
            int GiaTu = int.Parse(drGiaTu.SelectedItem.Value.ToString());
            int GiaDen = int.Parse(drGiaDen.SelectedItem.Value.ToString());
            
            Response.Redirect("KQTim.aspx?ProName=" + ProName + "&GiaTu=" + GiaTu + "&GiaDen=" + GiaDen);
        }
    }
-->

Bạn nhìn vào đây chắc cũng sẽ hiểu mình truyền bằng request trong web ASP.Net và truyền đến trang KQTim.aspx có giá từ, giá đến và tên.

Bây giờ nếu bạn chạy thử bấm vào nút search thì kết quả trên URL sẽ hiện như sau:

Truyền thông tin tìm kiếm qua trang kết quả tìm

Truyền thông tin tìm kiếm qua trang kết quả tìm

Hiển thị kết quả tìm kiếm

Tiếp theo bạn tiến hành thao tác trên trang kết quả tìm kiếm, ở trang này như đã nói thì bạn phải lấy giá trị đã truyền qua và truy vấn lấy dữ liệu từ những thông tin đã lấy được đó.

Cũng như ở bài Sử dụng – đổ dữ liệu vào DataList trong ASP.Net mình cũng hiển thị các kết quả đó vào một datalist giống như các định dạng ở bài trước đã nói để có sự đồng nhất.

Giao điện cần có ở trang kết quả tìm kiếm

Giao điện cần có ở trang kết quả tìm kiếm

Sau đó bạn qua code mình viết hàm load dữ liệu lên như sau:

<!--
        double giatu = double.Parse(Request.QueryString["GiaTu"].ToString());
        double giaden = double.Parse(Request.QueryString["GiaDen"].ToString());

        string sten = Request.QueryString["ProName"].ToString();
        
        string sql = "select ProID, ProName, Price, VAT, Description,URLImages, Visible from Products where ProName like '%" + sten + "%'  and Price > '" + giatu + "'   and Price < '" + giaden + "' order by UpdateDate DESC";
        dlSanPham.DataSource = data.get(sql).Tables[0];
        dlSanPham.DataBind();
-->

Mình sẽ lấy dữ liệu từ phía bên kia truyền qua bằng Request.QueryString sau khi lấy được rồi mình sẽ truy vấn, like là phép giống trong MSSQL dấu % đại diện cho nhiều kí tự, order by UpdateDate DESC sắp xếp giảm dần. Và sau đó là bind lên dlSanPham.

Kết luận: Công việc tiếp theo là chỉ cần định dạng lại các kết quả có được, ngoài ra mình còn có thể xuất thông báo khi không có kết quả nào, kiểm tra bằng cách đếm số dòng trên datalist nếu bằng 0 thì sẽ không có dữ liệu.

Ngoài ra để phát triển thêm bạn cần phải làm nhiều thứ nữa, search theo tên, thể loại, và giá kết hợp với nhau. Ví dụ người ta chọn thể lại Nokia giá từ 500k đến 1 chai thì phải tìm được… Nói chung đây chỉ là phần demo tính năng, các bạn tham khảo và phát triển thêm nha! Chúc thành công!

VN:F [1.9.22_1171]
Rating: 9.9/10 (14 votes cast)
Tạo trang tìm kiếm trong ASP.Net, 9.9 out of 10 based on 14 ratings
Chuyên mục: ASP.Net & SQL Server
Tagged: , , .

22 Comments

  1. van

    cám ơn bạn rất nhiều

  2. Phan

    Mình chạy mà không thấy dropdownlist hiện giá lên, làm sao hiện lên giờ bạn ơi. giúp mình với hix

    • Bạn phải truyền cho nó giá trị, add bằng tay hay tạo cho người dùng tính năng chỉnh sửa trong CSDL. Dựa và DataTextField và DataValueField của Dropdownlist.

  3. Nguyễn Trung Đức

    Em gặp phải 1 vấn đề thế này mong anh chỉ giúp !
    Em muốn tạo ra 1 textbox giống như tìm kiếm của google ý ạ ! Lúc mình nhập vào là nó sẽ xổ xuống cho mình !
    Em đã tìm trên mạng có anh hoainam bên congdongcviet viết bằng ajax nhưng mà chỉ cho demo thôi chứ ko viết bài !
    Anh có thể viết 1 bài hướng dẫn em và mọi người vấn đề này ko ạ ! cảm ơn anh nhiều !!!
    Em đang học asp.net

    • Đó là dùng autocomplete, bạn tìm hiểu nha. Nếu có time mình sẽ viết bài về autocomplete :) nhưng hơi lâu.

  4. thang

    Cho tôi hỏi
    dlSanPham.DataSource = data.get(sql).Tables[0];

    phần data đó là cái gì?

    • Bạn đọc không kỹ bài viết mình rồi! Mình có giải thích là sử dụng Class kết nối ở bài trước!

  5. vĩnh

    bạn thử truyền chuỗi này xem tìm kiếm có chết ko
    hi’ or 1==1–

  6. bac

    Ban oi ban co code tim kiem bang linq ko ban!minh dang can ban co the share cho minh duoc ko..tks ban nhju

  7. Minh

    Mình Chưa làm dc vay.bên Trang KQTim.aspx.ko hiển thị dc kết quả nào hết.help với

  8. mình mun hoi cai:

    <!--
            else
            {
                string ProName = txtTenTim.Text;
                int GiaTu = int.Parse(drGiaTu.SelectedItem.Value.ToString());
                int GiaDen = int.Parse(drGiaDen.SelectedItem.Value.ToString());
                 
                Response.Redirect("KQTim.aspx?ProName=" + ProName + "&amp;GiaTu=" + GiaTu + "&amp;GiaDen=" + GiaDen);
            }
    

    cái thằng “KQTim.aspx?ProName=”,ProName do la minh tu dat cho nó hay la chi chay sp vay ban,cua minh chay Sp la itc

  9. ngọc

    các bạn cho mình hỏi 1 vấn đề ngoài lề 1 tí, mình viết 1 web service bằng asp.net, trong đó gồm có các method xemdiem, xemthoikhobieu, xemlich………

    mình viết 1 ứng dụng để truy xuất đến asp.net đó qua url GET.tạm thời mình chỉ viết trên localhost. Vậy, mình chưa hiểu chuỗi url để truy xuất đến 1 phương thức trong asp. net đó có định dạng như thế nào. ví dụ
    url=”http://localhost:51013/Service1.asmx/??????????……..”
    nghĩa là mình muốn truy xuất dữ liệu của phương thức đó để lấy đc thông tin mình cần ý. mong các bạn giúp mình

  10. Minh

    Ad oi,khi mình nhập tên tìm sản phẩm,nhập chữ ko dấu,nhưng tên sản phẩm lại có dấu,giờ mún nhập ko dấu nhưng vẫn tìm ra được sản phẩm thì phải làm sao đây?

  11. chin

    minh muon tim liem tren nhiu bang(nhieu thuoc tinh do ) thi minh lam sao. cac ban co the chi minh khong thank’s

  12. hiếu

    admin ơi mình đang tạo 1 form xác nhận thông tin bằng nn ASP.net. mình đã kết nối được với SQL server. Bảng Thông Tin gồm : MSV,TSV,LOP,KHOA,QUEQUAN,DT… bạn có thể giúp mình code này ko

  13. Hien

    dlSanPham.DataSource = data.get(sql).Tables[0];
    Nếu mình làm bằng access thì phần trên sửa sao vậy bạn :(

  14. hayhay

    anh ơi cho hỏi tí, trong bảng chỉ có 1 giá chứ mấy, đâu có giá từ và giá đến đâu.
    Khó hiểu chỗ đó quá.
    Giải thích giùm tí nghẹn anh.
    Cảm ơn

  15. Jin

    Bài viết rất hay, tks

  16. Hien Le

    anh oi cho em hoi, neu nhu em su dung XML lam CSDL thi ben trang KQTim.aspx sua nhu the nao a?

  17. Bái Viết Quá Hay Luôn Thank AD

  18. Izumi Akira

    public partial class Pages_SearchResult : System.Web.UI.Page
    {
    ConnectionClass data = new ConnectionClass();
    protected void Page_Load(object sender, EventArgs e)
    {
    string title = Request.QueryString["Title"].ToString();
    string sql = “SELECT ID, Type, Title, Image, Review, Link FROM PC WHERE Title LIKE ‘%” + title + “%’”;
    dlPC.DataSource = data.GetPC(sql).Tables[0];
    dlPC.DataBind();
    }
    }
    Mình làm đoạn code thế này trong VS 2012 nhưng khi search thì nó lại báo lỗi: “Both DataSource and DataSourceID are defined on ‘dlPC’. Remove one definition.”
    Mình ko hỉu là mình sai chỗ nào… T_T

Để lại comment của bạn