Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > ASP/ASP.Net > Thêm, sửa, xóa dữ liệu với Repeater sử dụng ajax và jquery
Thêm, sửa, xóa dữ liệu với Repeater sử dụng ajax và jquery
Nguyễn Trung Hiếu
Share Code Web Company 2012

Thêm, sửa, xóa dữ liệu với Repeater sử dụng ajax và jquery

Ở bài trước tôi đã hướng dẫn các bạn thủ thuật phân trang trong Repeater,Và sau khi dạo qua nhiều diễn đàn, tôi thấy các bạn hỏi rất nhiều về cách cập nhật, lấy dữ liệu cũng như các thao tác thêm sửa xóa trong control này. Vậy là ở bài viết này, tôi sẽ hướng dẫn các bạn cách làm các thao tác như vậy, nhưng sử dụng Ajax và jQuery.

Database

Đầu tiên là thiết kế cơ sở dữ liệu test chứ nhỉ. Ở đây bạn có thể thay đổi cho tùy thích với project của bạn nhé

HTML và CSS

Tạo mới một website, và add thư viện của jQuery vào nhé,

Thiết kế khung HTML cho Repeater nào

Thêm tí css cho nó ra dáng nhé

Repeater with jQuery

Bước quan trọng đây, tất cả các thao tác trên Repeater như: lấy dữ liệu, thêm, sửa, xóa, cập nhật chúng ta cần thực hiện bằng jQuery, vậy điều đầu tiên trong asp.net là chúng ta phải tạo ra webservice, sau đó dùng ajax để gọi các webmethod trong webservice này.

OK!. Sau khi tạo mới một webservice, chúng ta khai báo một lớp như sau:

Sau đó chúng ta xóa 2 dấu comment ở dưới đi để cho phép Webservice được gọi từ Client, và sử dụng lớp trên,

Tiếp theo là viết các phương thức cho project của chúng ta.

Lấy dữ liệu bằng hàm getData()

Thêm mới bằng AddNew()

Phương thức Update()

Phương thức delete()

Done! Giờ là viết ajax để gọi các webmethod bên trên về máy client thôi nào

Sự kiện lấy dữ liệu chúng ta cho vào hàm load document nhé

Sự kiện click nút add

Click nút edit

và cuối cùng là click nút delete

OK! xong rồi đó, nhìn thì trông khó hiểu vậy thôi chứ toàn là những code ajax đơn giản, tôi hy vọng bạn có thể hiểu được nó. Chúc bạn thành công

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}