Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > ASP/ASP.Net > Edit ListView Control sử dụng Jquery trong Asp.net
Edit ListView Control sử dụng Jquery trong Asp.net
Nguyễn Trung Hiếu
Share Code Web Company 2012

Edit ListView Control sử dụng Jquery trong Asp.net

Bài viết sau đây sẽ hướng dẫn các bạn cách edit ListView sử dụng Jquery mà không cần phải load lại trang rất đơn giản

edit listview
Listview là control được giới thiệu vào phiên bản .Net Framework 3.5, nó có nhiều tính năng rất hữu ích như hỗ trợ phân trang, sắp xếp, chọn, thêm, sửa, xóa… rất đa năng phải không. Bài hôm nay sẽ giới thiệu cách edit trong listview nhé.
Để làm được bài này,trước tiên bạn tạo một project asp.net, sau đó kéo thả một Listview vào. Trong bài viết này, chúng ta sử dụng Layout Template để định nghĩa layout chính của control, và Item Template để định nghĩa nội dung Item Databound để hiển thị cho Single Item. Xem đoạn code dưới đây.

Trong đoạn code trên, Layout Templates được định nghĩa là một table. Điều chú ý ở đây là chúng ta sử dụng một sự kiện onClick cho thẻ img để gọi hàm EditStudent khi có sự kiện click vào. Hàm EditStudent này sẽ cho phép hiển thị một pop-up có tên editForm như bên dưới.

Với đoạn code trên, bạn chỉ cần chú ý tới 2 hàm Javascript là CloseEditStudentDialog(); và UpdateStudent();. 2 hàm này sẽ được đưa ra ở bên dưới.
Tiếp theo các bạn cần tạo một Webservice để nhận yêu cầu sử lý sự kiện của các hàm javascript bên trên. Thêm một webservice vào project của bạn và đặt tên là StudentWebService.asmx. Sau đó khởi tạo 2 hàm GetStudents và UpdateStuden trong code behind của webservice này.

Trong đoạn code trên, bạn cần phải thay đổi chuỗi kết nối sao cho phù hợp với project của bạn. Ở đây chúng ta sử dụng một db đơn giản là Student với 3 cột là ID, Name và Fee. Bạn cũng có thể tao db tùy theo ý thích của bạn. Sau đó gọi hàm GetStudents để hiển thị dữ liệu lên ListView nhé

Tiếp theo là css cho nó đẹp mắt chút.

Ta được hình dưới
edit listview using jquery
Tiếp theo là công đoạn nhúng jquery vào project và tạo các hàm ajax trong jquery

Hàm EditStudent ở bên trên

Hàm EditStudent này lại gọi ra một phương thức là DisplayEditStudentDialog(); phương thức mới này sẽ hiển thị pop-up ra để các bạn có thể edit

Hàm trên lấy giá trị id, name, free truyền vào các Id của các thẻ hmtl, sau đó gọi form editForm ra
edit listview using jquery
Cuối cùng là nút update và nút cancle của pop-up

Vậy là xong rồi đó, cùng build và thử thành quả xem nhé.

Download Code

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}