Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > ASP/ASP.Net > Tạo grid giống Facebook inbox sử dụng jquery, css, json và asp.net
Tạo grid giống Facebook inbox sử dụng jquery, css, json và asp.net
Nguyễn Trung Hiếu
Share Code Web Company 2012

Tạo grid giống Facebook inbox sử dụng jquery, css, json và asp.net

Nếu bạn đã từng dùng facebook, thì bạn sẽ để ý là cái này gần giống với phần inbox trên facebook đó. Và chúng ta sẽ làm nó.

Control này sử dụng các method sau:

  • Gửi một yêu cầu bằng Ajax và nhận kết quả trả về có định dạng Json
  • Tạo hàng và cột sau đó bind dữ liệu vào table
  • Set kiểu của control sau khi bind dữ liệu
  • Tương tác với người dùng
  • Thay đổi và thiết lập styles
  • Thực hiện các hiệu ứng bằng Jquery

Grid control này sử dụng Asp.net để lấy dữ liệu từ cơ sở dữ liệu nào đó (database, XML file, RSS, …) sau đó gửi về phía client và thực hiện bind nó vào grid. Thành phần này sử dụng thư viện Json.Net để thao tác với Json dễ dàng hơn trong asp.net, bạn cũng có thể tìm hiểu thêm về Json tại đây

Tất cả những gì bạn cần để sử dụng control này là:

  • Nhúng các thư viện và control vào website
  • Khởi động control bằng cách gọi hàm javascript Grid2(). Hàm này sẽ gửi một yêu cầu bằng Ajax tới server và nhận dữ liệu ở dạng Json, sau đó bind dữ liệu ra control

Facebook Inbox Grid Functions

Ở phía client, chúng ta sử dụng jquery để gọi một method trên server

Và chúng ta cần một cơ chế phía máy chủ để thu thập dữ liệu, chuyển đổi nó sang định dạng Json, và gửi nó cho client,

Bạn có thể tham khảo bằng việc download code dưới đây về ngâm cứu nhé.

Download Code

(codeproject)

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

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

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

Blog Stats

  • 5.778 hits
%d bloggers like this: