Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > ASP/ASP.Net > [Tuts]Bind dữ liệu ra Repeater sử dụng jQuery Ajax
[Tuts]Bind dữ liệu ra Repeater sử dụng jQuery Ajax
Nguyễn Trung Hiếu
Share Code Web Company 2015

[Tuts]Bind dữ liệu ra Repeater sử dụng jQuery Ajax

Trong sharecodeweb.net đã từng có một bài viết hướng dẫn cách bind dữ liệu ra Repeater rồi, nhưng chắc cũng do nhiều người tìm kiếm cộng với công nghệ chắc cũng “lạc hậu”, nên hôm nay update thêm một bài nữa cũng sử dụng jQuery luôn. Bài này mình sẽ cố gắng giải thích code cho các bạn dễ hiểu chút nhé, và đặc biệt là có demo tham khảo luôn

Bài này sử dụng cách fetch DataSet hoặc DataTale từ server như XML sử dụng jQuery AJAX

Database

Về database các bạn có thể lấy từ Microsoft, hoặc tham khảo bài viết hướng dẫn lấy database Northwind về attach vào Server của mình nhé.

Thiết kế HTML

Trong file giao diện, các bạn sử dụng control Repeater nằm trong một thẻ div để sau này chúng ta sử dụng jQuery AJAX lấy ra.
Code mẫu các bạn có thể tham khảo dưới đây, tuy nhiên bạn có thể design nó khác đi tùy vào nhu cầu của bạn!

Coding nào!

Trước tiên, bạn cần thêm một số namespace để cho project của chúng ta chạy tốt nhé.

C#

VB.Net

Về hàm, chúng ta có hàm đầu tiên để bind ra Repeater rất đơn giản như này thôi

C#

VB.Net

Tạo service sử dụng Webmethod

Các bạn chú ý, hàm GetCustomers() sẽ được jQuery AJAX gọi ra ở ngoài giao diện, ở hàm này bạn chỉ cần thay đổi biến query thành ý bạn muốn thôi.

C#

[WebMethod]
public static string GetCustomers()
{
string query = “SELECT TOP 10 * FROM Customers”;
SqlCommand cmd = new SqlCommand(query);
return GetData(cmd).GetXml();
}

private static DataSet GetData(SqlCommand cmd)
{
string constr = ConfigurationManager.ConnectionStrings[“constr”].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
sda.Fill(ds);
return ds;
}
}
}
}
[/PHP]

VB.Net

Thêm đoạn script này ở ngoài client side, đoạn này chỉ là AJAX gọi hàm GetCustomers() bên trên đã viết ra thôi.

Function OnSuccess sẽ làm nhiệm vụ render HTML ra cho người dùng nhìn thấy thôi.

Download code

Nếu bạn đọc code không hiểu, bạn có thể download code bên dưới về để ngâm cứu nhé!
Mọi đóng góp hy vọng bạn có thể gửi thông qua liên hệ hoặc comment cho tôi về thắc mắc hoặc báo cáo lỗi link download nhé, Thanks!

Related Posts

Tác giả: 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

http://sharecodeweb.net/?s={search_term_string}