#tuts: Sử dụng Bootstrap 4 cho Gridview trong Asp.net

Thiết kế ASP.Net Gridview trong Web Forms sử dụng Bootstrap 4

Bài viết của tác giả Don Hoang trên Codeproject. Tôi xin lược dịch để các bạn tham khảo.

Kiến thức nền

Bài viết dựa trên kiến thức phân trang trong gridview sử dụng Bootstrap đã được công bố tại đây.

Các bước thực hiện trước khi code

  1. Create new ASP.NET Empty Web Site project
    • Sử dụng Microsoft Visual Studio tạo mới một ASP.NET Empty Web Site và đặt tên MyGridview
  2. Bootstrap Files to Empty ASP.NET Web Site project
    • Download bootstrap’s Compiled CSS and JS files từ http://getbootstrap.com.
    • Giải nén tập tin đã download về bootstrap-4.0.0-dist.zip.
    • Copy the folders cssjs sau đó dán vào folder bootstrap của MyGridview solution.
  3. Template Files Using Bootstrap to Empty ASP.NET Web Site project
    • Download một trong những mẫu Bootstrap 4 admin dashboard template tại đây
    • Giải nén sau copy tất cả tập tin và thư mục vào thư mục bootstrap của MyGridview solution

Sau khi xong nó sẽ thành thế này:

Bootstrap folder

Bắt đầu code nhé

Trong tập tin Default.aspx

Bạn có thể sử dụng các mẫu Admin Dashboard Template đã download bên trên để thiết kế cho Default.aspx. Sau đó, chèn một Gridview vào trong trang Default.aspx trong có đặt phương thức OnPreRender và thuộc tínhAutoGenerateColumns

Ngoài ra, để minh họa ví dụ cách sử dụng Bootstrap với Gridview trong Web Forms. Các bạn có thể thêm phần Databales sau để lấy dữ liệu.

Sau đó, các bạn thể render thêm các phím copy, xuất danh sách dạng CSV, Excel, PDF hay in.

Trong tập tin Default.aspx.cs

Ở đây chúng ta viết một vài hàm xử lý để hiển thị dữ liệu ra Default.aspx
Trong Page_load

Trong sự kiện GridView_PreRender

Và đây là kết quả của chúng ta:

gridview in asp.net using bootstrap 4

Download code Gridview using Bootstrap 4

Chúc các bạn viết code vui vẻ!

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